Das Beez Template

Ein Template enthält meistens mehr, als man auf den ersten Blick sieht. Den Begriff Template verbindet man in der Regel mit dem visuelle Erscheinungsbild einer Website. Aber neben  der Gestaltung zeichnet es sich durch die Art und Weise der technischen Umsetzung aus.  Es bestimmt wo sich der Inhalt innerhalb des Dokumentenflusses befin­det, wo und wann bestimmte Module ein- und ausgeblendet werden, ob eigene Error- Seiten verwendet werden sollen und welches Markup, also welche HTML-Version, verwendet werden soll.

Einige Nutzer werden sicherlich mit dem Beez-Template in der Version 1.5 vertraut sein.  Sowohl beez_20 als auch beez5 unterscheiden sich optisch sehr von der Gestaltung Ihrer Vorgängerversion. Was die Gestaltung angeht habe ich mich bemüht die elementaren Bestandteile  des Templates, wie z.B. das Menu  mit einem neutralen Grau auszustatten, um hier eine Lösung zu bieten die mit möglichst vielen Farben harmoniert.

Schon damals wollte ich ein standardkonformes, gut zugängliches und leicht adaptierbares Template entwickeln. Ganz bewusst hatte ich mich für die Farbe Lila entschieden, in der Hoffnung viele Designer würden den Code aufgreifen, gestalterisch modifizieren und zur freien Verfügung stellen. Ich hatte mit einer Vielzahl freier neuer Templates gerechnet. Das ist leider nicht eingetreten.

Ein weiterer Fehler war sicherlich, dass ich nicht deutlich genug kommuniziert habe, was das Ganze eigentlich sollte. Schon damals war der Output so strukturiert, dass sich so ziemlich jedes Design damit umsetzen ließ, einfach und unkompliziert mit leichten Modifikationen innerhalb der CSS-Anweisungen. Dieses Prinzip habe ich in den neuen Beez-Versionen beibehalten. Zusätzlich gibt es noch ein zugänglicheres JavaScript und in beez5 eine kleine Portion HTML5. Beez_20 kommt ohne Template- Overrides aus. Von Layouttabellen hat sich Joomla! nun endgültig verabschiedet. Der neue HTML-Output orientiert sich von der Struktur her an den Template-Overrides des alten Beez- Templates.

Für eine bessere Verständlichkeit wurden die CSS-Klassennamen umbe­nannt und vereinheitlicht. Für Template-Designer bietet dies einen gewaltigen Vorteil. Der HTML-Output im Joomla!-Standard ist sauber und wohl geformt. Man muss nun keine Template-Overrides mehr einsetzen, um sauberen, standardkonformen Code zu generieren. Der technische Funktionsumfang von beiden Beez-Templates ist nahezu identisch. Sie unterscheiden sich nur durch ihre grafische Gestaltung. Version beez5 ist zudem für die Verwendung von HTML5 ausgelegt.

Die wichtigsten Features

  • Barrierefreiheit
  • Position der Navigationsspalte konfigurierbar
  • WAI ARIA Landmark-Roles
  • automatische Darstellung der Module in barrierefreien Tabs
  • Ein- und ausblendbare Module
  • Ein- und ausblendbare Spalten
  • beez_ 20: wählbar zwischen zwei Gestaltungen: Natur oder Personal
  • beez 5: Verwendung von HTML5 möglich

Barrierefreiheit allgemein

Für die meisten Menschen ist das Internet mittlerweile zur Selbstverständlichkeit geworden. Informationen aus aller Welt stehen zum Abruf bereit. Und vielleicht noch wichtiger: Auch die Sonderangebote beim örtlichen Baumarkt, die Öffnungszeiten des Einwohnermeldeamtes oder das Telefonbuch sind am heimischen Bildschirm erreichbar. Lästige Bibliotheksbesuche oder Telefonate werden unnötig, man schaut halt ins Netz.
Von dieser Entwicklung profitieren jedoch nicht alle. Gerade Menschen, denen durch irgendeine körperliche oder geistige Behinderung die volle Teilnahme am gesellschaftlichen Leben erschwert ist, könnten von der Kommunikationstechnik enorm profitieren. Doch sie scheitern oft an Barrieren, die ihnen den Zugang zu Informationen oder die Nutzung von Angeboten erschweren oder ganz unmöglich machen. Viele dieser Barrieren lassen sich überwinden, wenn die Angebote entsprechend gestaltet sind.

Betreiber von Online-Shops oder Banken, die Internetbanking anbieten, sollten sich dieser nicht so kleinen Zielgruppe durchaus bewusst sein.

Barrierefreies Webdesign zielt dementsprechend darauf ab, Inhalte und Interaktionen im Netz für (möglichst) alle Nutzergruppen und Endgeräte zugänglich zu machen.

Ca. 8% der deutschen Bevölkerung haben eine physische Einschränkung, die den Betroffenen den Zugang zu Informationen aus dem Internet erschwert. Landläufig wird barrierefreies Webdesign mit dem Begriff Internet für Blinde gleichgesetzt. Ich möchte betonen, dass das nicht alles ist – tatsächlich sogar nur der kleinste Teil. Ich habe mich schon oft gefragt, warum das so ist. Wahrscheinlich liegt das daran, dass der Monitor zum klassischen Symbol für den Computer geworden ist, und wer nichts sieht, kann ihn nicht bedienen. In meiner täglichen Arbeit ist mir aber immer wieder aufgefallen, dass gerade blinde Menschen mit weniger zugänglichen Seiten viel besser zurecht kommen als Menschen mit andersartigen Behinderungen.

Als blind gelten Personen, deren restliche Sehkraft nur noch wenige Prozent des Durchschnittswertes beträgt. Die Zahl der so bestimmten Blinden wird für Deutschland mit 150.000 bis 200.000 angegeben. Einige von ihnen können am Computer durch Schriftvergrößerung und individuelle Farbeinstellungen Texte gerade noch entziffern, während andere darauf angewiesen sind, sich die Information akustisch ausgeben zu lassen oder diese über die Braillezeile zu ertasten.

Erheblich größer ist der Anteil der Menschen mit starken Sehbehinderungen.

Über verschiedene Grade von Fehlsichtigkeit klagt etwa ein Viertel der Bevölkerung im berufstätigen Alter – später nimmt der Anteil stark zu. Einige Fehlsichtigkeiten lassen sich durch Brillen recht gut kompensieren, andere nur sehr begrenzt. Bestimmte Augenerkrankungen wie Grauer oder Grüner Star lassen sich operativ beheben oder zumindest abmildern. Wieder andere wie Retinopathia pigmentosa oder Diabetische Retinopathie führen zu einer ständigen Verschlechterung des Sehvermögens und letztlich oft zu völligem Verlust der Sehfähigkeit. Beim so genannten »Tunnelblick« ist das Gesichtsfeld der betroffenen Personen extrem eingeschränkt – manchmal auf die Größe einer Zwei-Euro-Münze, die man auf die Entfernung der Länge eines Armes vor das Gesicht hält.

Etwa 10% der männlichen Bevölkerung ist von leichten Formen der Farbenblindheit betroffen – meistens heißt das, dass bestimmte Rot- und Grüntöne nicht voneinander unterschieden werden können. Blindheit gegenüber anderen Farben, völlige Farbenblindheit oder Rot-Grün-Blindheit bei Frauen sind sehr selten.

Einer anderer potenzieller Nutzerkreis hat Probleme mit der üblichen Eingabetechnik – nicht jeder kann eine Maus führen oder eine Standardtastatur bedienen.

Dafür kann es viele Gründe geben: Arme und Finger sind bewegungsunfähig oder bewegen sich spontan und schwer kontrollierbar. Andere haben überhaupt keine Hände und Arme oder sind vom Hals abwärts oder nach einem Schlaganfall halbseitig gelähmt. Solange ein Mensch in der Lage ist, auch nur ein binäres Signal – also die berühmte 0 oder 1 – gesteuert abzusetzen, reicht das, um mit Energie, Lernaufwand und geeigneter Software einen Computer in allen Funktionen bedienen zu lernen.

Es gibt in Deutschland etwa 60.000 bis 100.000 Menschen mit extrem eingeschränkter Hörfähigkeit. Einige Tausend davon waren dadurch auch so stark beim Erlernen der deutschen Sprache behindert, dass sie diese Sprache nur unvollkommen (Stand 4. bis 6. Schuljahr) beherrschen. Was die Forderung nach verständlicheren Texten klarer macht.

Für die Kommunikation untereinander, aber auch für die Aufnahme fremder oder anspruchsvollerer Inhalte ziehen sie die Deutsche Gebärdensprache vor – das ist ein Idiom auf einer eigenen, von der Lautsprache unabhängigen Grundlage eines Systems von Zeichen und Gesten.

Achtung

Nicht nur Menschen mit geringem Hörvermögen surfen meistens ganz ohne oder mit abgeschalteten Lautsprechern! Es ist keinesfalls ausreichend, z.  B. irgendwelche Warnsignale nur akustisch auszugeben – sie müssen stets von einem eindeutig interpretierbaren visuellen Hinweis begleitet werden.

Je mehr das Internet alle Lebensbereiche erobert, desto mehr treten auch situative Behinderungen in den Vordergrund: Langsame Verbindungen im Hotel, unkontrollierbare Lichtverhältnisse im fahrenden Zug, angeordneter Verzicht auf Ton am Arbeitsplatz.

Von zugänglichen Websites profitieren alle Menschen. Dabei muss es nicht immer um die volle Beachtung aller Richtlinien gehen, zu deren Einhaltung staatliche Stellen verpflichtet sind. Auch kleine Schritte in Richtung Zugänglichkeit können die Benutzbarkeit von Seiten wesentlich verbessern.
Durch seinen hohen Verbreitungsgrad hat Joomla! die Möglichkeit, viel zu bewegen. Mit den Standard-Templates beez ist es nun relativ einfach, zugängliche und für viele nutzbare Seiten zu erstellen.

Wie schon in beez 1.5 sind auch in beez_20 und beez5 all die Dinge implementiert, die für die Gestaltung eines barrierefreien Templates notwendig sind. Die wichtigsten sind:

  • Trennung von Content und Layout
  • Semantisch logische Struktur
  • Sprungmarken
  • Tastaturnavigierbarkeit
  • ausreichende Farbkontraste

Trennung von Content und Layout

Die erste und wichtigste Regel für die Entwickler ist die möglichst vollständige Trennung von Inhalt und Layout:

  • Sauberer und reiner HTML-Code für die Inhalte
  • Keine unnötigen Layouttabellen
  • Formatierung ausschließlich über CSS
  • Ein logischer semantischer Aufbau
  • Sprungmarken

Die linearisierbare Ausgabe des Inhalts und die Formatierung ausschließlich über CSS ist eine der wichtigsten Bedingungen für praktische Zugänglichkeit.

Nur dann hat Assistive Technologie die Möglichkeit, den Inhalt nach Belieben aufzubereiten, während die visuelle Präsentation völlig unberücksichtigt bleiben kann. Die Auslagerung der Präsentation in Stylesheets gibt dem z.  B. sehbehinderten User überdies die Möglichkeit, eigene Stylesheets in seinem Browser zu definieren und damit die Seiten exakt seinen Bedürfnissen anzupassen. Eine lineare Darstellung der Inhalte und eine adäquate semantische Struktur ist für Screenreader-Nutzer besonders wichtig.

Screenreader erfassen den Inhalt einer Website von oben nach unten – also linear. Verwendet man umfangreiche Layoutabellen, ist diese Linearisierung nicht mehr gegeben.

Unter dem Begriff Semantik im Web kann man sich erst einmal wenig vorstellen. Man denkt wahrscheinlich an den Deutschunterricht, aber auch beim Schreiben von Webinhalten spielt sie eine besondere Rolle. Zum Beispiel bieten Screenreader ihren Nutzern an, von Überschrift zu Überschrift oder von Liste zu Liste zu springen, was einen schnelleren Überblick über das Gesamtdokument verschafft. Beinhaltet ein Webdokument keine Überschriften, ist diese Funktionalität nicht nutzbar.

Die formale Struktur eines Webdokumentes sollte der inhaltlichen Struktur weitgehend entsprechen. Je nach Webprojekt kann die Wahl der entsprechenden Überschriftenhierarchie durchaus eine Herausforderung sein.

Dieses Konzept findet man heute nicht nur in den Templates, sondern in der gesamten Joomla!-Standardausgabe. Bei der Entwicklung von Joomla! 1.6 war dies ein zentraler Bestandteil der Entwicklungsarbeit. Gründe dafür sind, neben der besseren Nutzbar­keit in assistiven Technologien, auch die Suchmaschinenoptimierung und die bessere Bedienbarkeit in mobilen Endgeräten. Gut strukturierter Code hilft nicht nur Men­schen mit Behinderung, sich besser innerhalb einer Website zurechtzufinden, auch Google fühlt sich mit einer so strukturierten Site deutlich wohler.

Sprungmarken

Lineare Darstellung von Inhalten hat allerdings einen großen Nachteil: Unter Umständen muss man einen sehr weiten Weg zurücklegen, um zu »hinten« liegenden Inhaltsbereichen zu kommen. Auf dem Bildschirm können bei einem Drei-Spalten-Layout dagegen mehrere Bereiche »oben« zumindest anfangen, und das Auge kann gleich dorthin springen, wo es – durch visuelle Hilfen unterstützt – die gerade interessierende Information vermutet. Abhilfe bietet hier das Konzept der Sprungmarken. Es bildet faktisch ein nicht visuelles Gegenstück zum grafischen Layout und ermöglicht es dem Anwender linearer Wiedergabegeräte, wesentliche Inhaltsbereiche bereits am Anfang der Seite zu identifizieren und dann unmittelbar dorthin zu springen, wo er die Informationen vermutet, die ihn interessieren.

Praktisch läuft der Einsatz von Sprungmarken darauf hinaus, an den Anfang jeder Seite noch einmal ein zusätzliches Menü für die seiteninterne Navigation zu stellen. In den meisten Fällen wird es sinnvoll sein, dieses Menü im grafischen Layout auszublenden – für sehende User ist es mitunter höchst irritierend, wenn sie einen Link betätigen, aber es geschieht (scheinbar) nichts, weil das Linkziel ja bereits im Viewport sichtbar ist. In jedem Fall sollte das "Übersprungmenü" nicht zu lang und sehr durchdacht aufgebaut sein, weil es ja unter den Bedingungen der Linearisierung selbst ebenfalls zur Verlängerung und Verkomplizierung des Wahrnehmungspfades beiträgt. Im Allgemeinen dürfte es empfehlenswert sein, als erstes Sprungziel "zum Hauptinhalt" anzubieten – dann haben Stammbesucher, die sich auf einer Site auskennen und die Navigation gezielt handhaben, den kürzesten Weg dorthin, wo sie tatsächlich hin wollen.

Spätestens hier wird deutlich, dass insbesondere Seiten mit komplexeren Inhalten nicht nur ein grafisches Layout benötigen, sondern auch ein Content-Design, das darauf abzielt, den Seiteninhalt in einer Form anzuordnen, die für Anwender linearisierender Clients keine überflüssigen Barrieren enthält.

Beispiel:

<ul class="skiplinks">
  <li><a href="#main" class="u2">Skip to content</a></li>
  <li><a href="#nav" class="u2">Jump to main navigation and login</a></li>
</ul>

Die Farbwahl

Die Farbwahl ist gerade im barrierefreien Zusammenhang besonders wichtig, denn auch Menschen mit eingeschränkter Farbwahrnehmung sollen Ihre Website uneingeschränkt nutzen können.

Konvertiert man ein Layout in Graustufen, gewinnt man eine ungefähre Vorstellung davon, was z.  B. farbenblinde Menschen sehen. Allerdings ist die Wahrnehmung sehr individuell und je nach Ausprägungsgrad der Fehlsichtigkeit unterschiedlich. Viele farbenblinde Menschen haben allerdings im Lauf ihres Lebens gelernt, welche Farben hinter dem, was sie tatsächlich sehen, stecken. Sie wissen z.B., dass Rasen grün ist, und können durch Vergleiche auch andere Grüntöne identifizieren.

Wesentlich verbreiteter als die totale Farbenblindheit ist die so genannte Rot-Grün-Blindheit. Durch eine genetische Besonderheit sind Betroffene nicht in der Lage, die Farben Rot und Grün zu unterscheiden. Mischfarben, die diese Farbanteile enthalten, verschwimmen.

Kontraste

Farben spielen auch bei verschiedenen anderen Arten der Sehbehinderung eine wichtige Rolle, denn nicht nur der Farbwert, sondern auch ein deutlicher Farbkontrast kann bei der Nutzung einer Webseite hilfreich sein.

Vorder- und Hintergrundfarbe sollten innerhalb der Textelemente einen deutlichen Kontrast bilden, allerdings ist es nicht möglich, Farb- und Kontraststellungen auszuwählen, die allen gerecht werden. Schwarzer Text auf weißem Hintergrund erzielt einen größtmöglichen Farbkontrast. Um störende Blendeffekte zu vermeiden, kann eine leichte Tönung des Hintergrundes sinnvoll sein. Manche fehlsichtige Menschen benötigen sehr starke Kontraste, um die einzelnen Elemente einer Seite inhaltlich voneinander trennen zu können. Für sie sind Farbkombinationen wie beispielweise weiße Schrift auf hellem, orangefarbenem Hintergrund nicht kontrastreich genug. Auf andere hingegen wirken starke Kontraste als Überstrahlung – der Inhalt wird schwer lesbar.

beez_20: Gestaltung wählbar

Im Beez 2.0-Template kann man zwischen den Gestaltungen perso­nal und natur wählen. Die CSS-Einbindung der Dateien nature.css und personal.css über die Template-Parameter sowie die allgemeine Struktur der verwendeten CSS-Dateien sind die Basis für diese Methode.

cocoate.com/node/8049

Abbildung 1: Auswahl des Styles

Neben den CSS-Dateien, die für die farbliche Gestaltung zuständig sind, gibt es noch zwei weitere. Die position.css und die layout.css sind für die allgemeine Posi­tionierung und die Abstände verantwortlich.

Möchten Sie später lediglich die Farben des Templates verändern, passen Sie einfach die Dateien personal.css oder nature.css wunschgemäß an. Die Positionierung der Inhalte bleibt unangetastet, da diese in den anderen Dateien festgelegt ist.

Alle Style-Vorlagen sind weiterhin beliebig modifizierbar und können von Template- Entwicklern auch um zusätzliche Vorlagen ergänzt werden.
Ich habe bei der Gestaltung des Quellcodes darauf geachtet, dass allein durch die Modifikation der CSS-Dateien eine Vielzahl von gestalterischen Variationen möglich ist. Ich sage es nur ganz ganz leise, aber auf ihre Art bieten die Beez-Templates auch so etwas wie Frameworks und ersparen Ihnen somit eine Vielzahl von Arbeitsschritten.

Position der Navigationsspalte

Aus gestalterischen Gründen oder zur Verbesserung der Suchmaschinenfreundlichkeit und Zugänglichkeit kann es je nach Websitekonzept notwendig werden, die Navi­gation vor oder nach dem eigentlichen Inhalt zu positionieren. Hier bieten beide  Beez-Versionen die Möglichkeit zwischen beiden Varianten  im Backend umzu­schalten.

cocoate.com/node/8049

Abbildung 2: Position der Navigationsspalte wählen

Die Navigation wird sowohl optisch als auch semantisch vor oder nach dem Inhalt positioniert und mit Hilfe von CSS entsprechend formatiert.
Wenn Sie die index.php des beez_20-Templates oder die des von Ihnen schon modifi­zierten Templates öffnen, finden Sie etwa in Zeile 27 folgende Zuweisung:

$navposition = $this->params->get('navposition');

Der Variablen $navposition wird der aktuell im Backend ausgewählte Wert zuge­wiesen. Die Variable kann den Wert left oder center aufweisen. left steht für die Positionierung vor dem Inhalt, center steht für die Positionierung nach dem Inhalt.

Der Begriff center erscheint hier ein wenig verwirrend, logischer wäre auf den ersten Blick vielleicht right. Aber je nachdem, wie man das CSS gestaltet, kann man die Navigationsspalte bei dreispaltiger Darstellung auch in der Mitte platzieren.

JavaScript und WAI ARIA

WAI ARIA (Web Accessibility Initiative - Accessible Rich Internet Applications) ist eine technische Spezifikation der Web Accessibility Initiative (http://de.wikipedia.org/wiki/Web_Accessibility_Initiative), die es Menschen mit Behinderung erleichtern soll, an den heute immer komplexer und interaktiver werdenden Weban­geboten teilhaben zu können. Es ist besonders dort hilfreich, wo es um dynamische Inhalte und Benutzeroberflächen geht. Die Technik basiert auf dem Einsatz von JavaScript, Ajax, HTML und CSS.

Gerade blinde Menschen  verlieren Sie oft die Orientierung, wenn  Sie eine Website besuchen auf der plötzlich irgendetwas ein- oder ausgeblendet wird. Sehende Menschen können diese Veränderung mit den Augen wahrnehmen, blinde Menschen können sie nur nachvollziehen, wenn der Fokus auf das entsprechende Element gesetzt wird.

Fokussieren bedeutet eigentlich nichts anderes, als den Cursor an der entsprechenden Stelle zu platzieren und somit die dort positionierten Inhalte zugänglich zu machen.

In HTML und XHTML hatten wir laut Spezifikation nicht die Möglichkeit, alle Ele­mente zu fokussieren. Lediglich Interaktionselemente wie Links, Buttons oder Einga­befelder waren fokussierbar. Mit dem Einsatz von WAI ARIA und HTML5 hat sich das geändert.
Die innerhalb des Beez-Templates benutzten Scripte greifen auf diese Technik zurück, um das Template für Menschen mit Behinderung zugänglich zu gestalten.

WAI ARIA – Landmark-Roles: Erste Hilfe für die Orientierung

Landmark-Roles sollen Menschen mit Behinderung die Orientierung auf einer Web­site erleichtern, indem sie einzelne Seitenbereiche und deren Funktion innerhalb der Seite genauer beschreiben. Die Navigation hat die Rolle navigation, die Suche die Rolle search, der Hauptinhalt die Rolle main. Die Implementierung ist ganz einfach. Das auszuzeichnende Element wird lediglich um das entsprechende Role-Attribut erweitert. Und schon werden Nutzer von modernen Screenreadern über diese Rolle informiert.

<div id="main" role="main">

Innerhalb der Beez-Templates geschieht dies automatisch  mit Hilfe von Javascript (javascript/hide.js) . Die Wai-Aria-Technik  ist ein noch nicht verabschiedeter Standard und das Notieren direkt im Quelltext würde dazu führen , dass die Seite den Validierungstest nicht besteht.
Eine vollständige Übersicht der Landmark-Roles finden Sie unter http://www.w3.org/TR/wai-aria/roles#landmark_roles.
Falls Sie später das Beez-Template als Basis für Ihr eigenes Template nutzen und die Struktur der einzelnen Seitenbereiche verändern, sollten Sie darauf achten, das Script entsprechend anzupassen.

Ausblendbare Module und Seitenbereiche

Das Ein- und Ausblenden bestimmter Seitenbereiche kann für den Nutzer, gerade bei Seiten mit sehr viel Inhalt, durchaus hilfreich sein, um einen besseren Überblick zu bekommen. Beide Beez-Templates bieten hier zwei verschiedene Möglichkeiten an. Zum einen lässt sich die Spalte mit den zusätzlichen Informationen vollständig ein- und ausblenden, zum anderen lassen sich auch die Module bis auf ihre Überschriften ein- und ausklappen.

Spalte ausblenden

Um diese Funktionalität zu testen, müssen Sie zuerst ein Modul in der Spalte für die Zusatzinformation platzieren. Hier stehen die Modulpositionen position-6, posi­tion-8 und position-3 zur Verfügung. Dabei ist es zunächst gleichgültig, ob sich die Navigation vor oder nach dem eigentlichen Inhalt befindet. Immer dann, wenn diese Spalte angezeigt wird, erscheint oben rechts ein Link mit dem Text „close info“.

cocoate.com/node/8049

Abbildung 3:  Spalte  ausblenden

Durch die Aktivierung dieses Links wird die Spalte ausgeblendet, der Linktext ändert sich in „open info“  und die Spalte kann per Klick wieder aktiviert werden.

Diese Funktionalität wird durch JavaScript gesteuert. Alle hier erwähnen Scripte basie­ren auf dem mitgelieferten Mootools-JavaScript-Framework, das uns in vielen Berei­chen die Arbeit abnimmt.

Für das Ein- und Ausblenden der Spalte ist die Datei hide.js im JavaScript-Ordner des Templates zuständig.

In der index.php des Templates findet sich etwa in Zeile 194 der dafür notwendige HTML-Code.

<div id="close">
 <a href="#" onclick="auf('right')">
  <span id="bild">
   <?php echo JText::_('TPL_BEEZ2_TEXTRIGHTCLOSE'); ?>
  </span>
 </a>
</div>

Den textlichen Inhalt der JavaScript-Variablen steuern Sie über die Joomla!-Language-Strings.

Module ein- und ausblenden

Eine der größten Herausforderungen bei der Gestaltung einer Website ist die über­sichtliche Strukturierung der Inhalte. Gerade auf der Startseite müssen Sie häufig eine Vielzahl von Informationen unterbringen, ohne dabei die Seite zu überfrachten.

cocoate.com/node/8049

Abbildung 4: beez-Slider

Beide Beez-Templates verfügen über die Möglichkeit, Module in Form von Slidern darzustellen.
Hierbei wird zunächst die Überschrift des Moduls ausgegeben. Per Klick auf ein Plus- Zeichen neben der Überschrift klappen Sie das Modul nach unten auf – sein Inhalt wird sichtbar. Anschließend wird das Pluszeichen durch ein Minuszeichen ersetzt und das Modul kann wieder eingeklappt werden. Auch bei dieser Methode habe ich die zugängliche WAI ARIA-Technik eingesetzt.
Um Module in ausklappbarer Form zu nutzen, sollten diese über die Anweisung
<jdoc:include type="modules" name="position-8" style="beezHide" headerLevel="3" state="0" />
ins Template integriert werden.
Durch den Einsatz des style=“beezHide“ werden automatisch alle Module, die auf dieser Position geladen werden als zugänglicher Slider  ausgegeben.
Vielleicht fällt Ihnen auf, dass diese Anweisung zusätzlich noch über das Attribut state verfügt, welches steuert, ob das Modul beim ersten Laden auf- oder zugeklappt ist.
Wählt man der Wert 0, ist es beim ersten Laden zugeklappt, wählt man den Wert 1, ist es per Voreinstellung aufgeklappt und lässt sich durch den Benutzer schließen.

Barrierefreie Tabs

Die Darstellung der Inhalte in so genannten Tabs wird immer beliebter. Schon jetzt gibt es Module, die Joomla! um diese Funktionalität erweitern. Keines der angebo­tenen Module erfüllt nur annähernd die Anforderungen der Barrierefreiheit.

cocoate.com/node/8049

Abbildung 5: BeezTabs

Die in Beez integrierte Lösung greift ebenfalls auf die WAI ARIA-Techniken zurück, um die Zugänglichkeit zu gewährleisten. Um die Module innerhalb von Tabs darzustellen, sind sie wie folgt einzubinden.

<jdoc:include type="modules" name="position-5" style="beezTabs" headerLevel="2" id="1" />

Alle auf der position-5 platzierten Module werden automatisch in Form von Tabs angeordnet. Über den Style beezTabs steuern Sie die HTML-Ausgabe. Das verwen­dete Attribut id="3" ist zwingend erforderlich. Der Grund liegt in der Struktur des verwendeten JavaScripts. Stellen Sie sich vor, Sie möchten an unterschiedlichen Stellen Module auf diese Art in Ihr Template einbinden. Die verwendete JavaScript-Funktion benötigt nun eine eindeutige Information darüber, an welcher Stelle sie die Tabs nun tatsächlich auf- und zuklappen soll. Fehlt diese Information, wird das Script nicht wie gewünscht funktionieren. Bitte verwenden Sie für die id an dieser Stelle ausschließlich Zahlen.

Schriftgröße anpassen

Oben im Kopf des Layouts besteht für den Benutzer die Möglichkeit, die Schriftgröße zu beeinflussen. Die technische Basis für diese Methode ist in der JavaScript-Datei templates/ihr_name/JavaScript/md_stylechanger.js zu finden. Innerhalb der index.php binden Sie einen div-Container mit id="fontsize" ein.

Dieser Bereich ist zunächst leer und füllt sich dann mittels JavaScript dynamisch mit Inhalt. Denn wenn Ihre Besucher JavaScript ausgeschaltet haben sollten, steht Ihnen diese Funktion auch nicht zur Verfügung.

Einige werden sich sicherlich fragen, wozu diese Funktion heute überhaupt noch notwendig ist, wo doch jeder Browser über eine Schriftvergrößerungsfunktion ver­fügt. Gerade für ältere Menschen ist diese Technik aber meist von ganz besonderer Bedeutung, da die meisten eine mehr oder weniger eingeschränkte Sehfähigkeit haben. Allerdings wissen besonders ältere Menschen oft sehr wenig über die Funktionalität ihres Browsers und freuen sich über ein offensichtliches Angebot.

beez5: HTML5 nutzen

Das beez5-Template unterscheidet sich, abgesehen von der Gestaltung,  kaum von beez_20. Die angebotenen Funkti­onalitäten sind weitestgehend identisch.

Einziger Unterschied: beez5 ermöglicht die Nutzung von HTML5. Wenn Sie einen Blick auf die Template-Parameter von beez5 werfen, sehen Sie, dass Sie dort für die Ausgabe zwischen HTML5 und XHTML-Code wählen können.  Grundlage hierfür sind die HTML5-Template-Overides, die sie im HTML-Ordner des Templates finden.

HTML5 bietet eine Vielzahl neuer Möglichkeiten an und wird sicherlich in der Zukunft eine Reihe von Veränderungen und Erleichterungen mit sich bringen, aber nach wie vor handelt es sich um einen noch nicht verabschiedeten Standard (Stand März 2011). Viele der angebotenen Möglichkeiten sind im Moment noch nicht ver­lässlich anwendbar, einige andere aber lassen sich schon jetzt problemlos nutzen.

Ein sehr wichtiger und überwiegend schon funktionierender Teil sind die neuen struk­turierenden Elemente. HTML4 und XHTML krankten daran, von geringer semanti­scher Bedeutung zu sein. Das hat sich mit HTML5 deutlich gebessert.
Uns stehen wirklich praktische Elemente zur Strukturierung der Seite zur Verfügung.

Mit den Elementen

  • header
  • footer
  • aside
  • nav

lässt sich eine Seite wunderbar strukturieren.
Elemente wie

  • section
  • article
  • hgroup

helfen, mehr Bedeutung in den eigentlichen Inhalt zu bekommen.

Der in Beez5 benutzte HTML5-Code verwendet nur die Elemente, die schon jetzt mehr oder weniger verlässlich funktionieren. Nur der Internet Explorer bis zur Ver­sion 8 macht wie immer Probleme.

Im Kopf der Seite wird ein Script eingefügt, das die unbekannten Elemente in die vor­handene Dokumentenstruktur integriert.

<!--[if lt IE 9]>
<script type="text/JavaScript" src="<?php echo $this->baseurl ?>/ templates/beez5/JavaScript/html5.js"></script>
<![endif]-->

Grundlage für die Integration von HTML5 in Joomla! sind die Template-Overrides sowie das Reagieren auf die gewählte Markupsprache über die Template-Parameter innerhalb der index.php. Dadurch, dass das Template die Verwendung von zwei verschiedenen Markupsprachen ermöglicht, müssen Sie schon in der index.php auf diese Möglichkeit eingehen.

Im Klartext: Der Aufbau der index.php ist recht kompliziert, weil je nach gewählter Markupsprache ein anderer HTML-Code ausgegeben werden muss.
Das fängt schon bei der Festlegung des Dokumententyps an.

Wenn Sie die index.php des Beez5-Templates öffnen, sehen Sie sofort, was ich meine.

<?php if(!$templateparams->get('html5', 0)): ?> 
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"><?php else: ?> 
<?php echo '<!DOCTYPE html>'; ?> 
<?php endif; ?>

Dieses Konzept zieht sich durch die ganze Seite und die HTML5-Elemente werden nur dann ausgegeben, wenn HTML5 auch im Backend ausgewählt wurde.

Wenn Sie später Ihr eigenes HTML5-Template bauen möchten, wäre es besser, wenn Sie alle Abfragen und XHTML-Elemente entfernen und direkt den HTML5-Code ausgeben.

Möchten Sie mehr über Joomla!-Templates wissen empfehle ich ihnen mein Buch:

Joomla!-Templates entwickeln: Barrierefreie & attraktive Designs von Konzept bis Umsetzung

Kommentare

Gutes Buch, verständlich geschrieben. Dies war schon bei der 1.5er Version so. Ich bin leider noch nicht dazu gekommen unsere Seiten auf Joomla umzustellen, möchte aber bis in den nächsten 3 Monaten auf 1. 7umstellen.

Was soll man tun, damit die Sprungmarken nicht in Suchresultaten von google und co. auftauchen?