Entwicklung & Design

Ein barrierefreies grafisches Menü mit TypoScript: GTMENU

Grafische Menüs sind zwar schön, aber leider nicht barrierefrei. Außerdem benötigen sie JavaScript für Rollover-Effekte. Umgehen lässt sich dieses Problem mit einem Textmenü, bei dem die Buchstaben per CSS ausgeblendet werden und eine Hintergrundgrafik angezeigt wird. Wie ein solches Menü mit Bordmitteln von TYPO3 realisiert wird, zeigt dieser Artikel.

Die Anforderungen an Internetseiten steigen. Viele Kunden fordern das Verwenden ihrer Hausschrift, weitestgehende Barrierefreiheit und Internetseiten, die auch ohne JavaScript funktionieren. Reine Grafik- oder Textmenüs erfüllen diese Anforderungen nicht. Einen Ausweg bieten Textmenüs, bei denen der verlinkte Text über CSS ausgeblendet und stattdessen eine Hintergrundgrafik angezeigt wird. Das bedient sowohl die Suchmaschine als auch den normalen Besucher der Website.

Der bei GMENUs über JavaScript gesteuerte MouseOver-Effekt soll über a:hover in CSS gesteuert werden. Dazu werden beide Zustände in eine Grafik geschrieben, die bei Mausberührung nach oben oder unten verschoben wird.

Navigation über Listenelemente abbilden

Basis für die Navigation ist eine Liste, die über <ul> und <li> abgebildet wird. Da die Navigation über TYPO3 dynamisch geschrieben wird, ist die Zeichenlänge der einzelnen Punkte und damit der generierten Hintergrundgrafiken vorher unbekannt. Die Elemente müssen sich also an die Breite der Navigationspunkte dynamisch anpassen können. Dazu wird über das „style“-Attribut die Breite individuell in jeden Link geschrieben.

HTML
<ul id="navi">
 <li><a xhref="punkt-1.html" style="width:66px; background-image: url('/typo3temp/GB/ff8db8a838.gif');">Punkt 1</a></li>
 <li class="current"><a xhref="langer-navigationspunkt-2.html" style="width:212px; background-image: url('/typo3temp/GB/552f9f2db0.gif');">Langer Navigationspunkt 2</a></li>
 <li><a xhref="punkt-3.html" style="width:66px; background-image: url('/typo3temp/GB/bd319c7487.gif');">Punkt 3</a></li>
</ul>

Listing 1

Die Formatierung der Navigation übernimmt eine knappe CSS-Datei. Diese hat zwei Hauptaufgaben:

Bitte beachte unsere Community-Richtlinien

Wir freuen uns über kontroverse Diskussionen, die gerne auch mal hitzig geführt werden dürfen. Beleidigende, grob anstößige, rassistische und strafrechtlich relevante Äußerungen und Beiträge tolerieren wir nicht. Bitte achte darauf, dass du keine Texte veröffentlichst, für die du keine ausdrückliche Erlaubnis des Urhebers hast. Ebenfalls nicht erlaubt ist der Missbrauch der Webangebote unter t3n.de als Werbeplattform. Die Nennung von Produktnamen, Herstellern, Dienstleistern und Websites ist nur dann zulässig, wenn damit nicht vorrangig der Zweck der Werbung verfolgt wird. Wir behalten uns vor, Beiträge, die diese Regeln verletzen, zu löschen und Accounts zeitweilig oder auf Dauer zu sperren.

Trotz all dieser notwendigen Regeln: Diskutiere kontrovers, sage anderen deine Meinung, trage mit weiterführenden Informationen zum Wissensaustausch bei, aber bleibe dabei fair und respektiere die Meinung anderer. Wir wünschen Dir viel Spaß mit den Webangeboten von t3n und freuen uns auf spannende Beiträge.

Dein t3n-Team

5 Kommentare
Andreas Sauer
Andreas Sauer

Tolles Skript, Jochen. Schön, dass die Accessibility endlich auch in der T3N immer stärker in den Fokus rückt.

Ich versuche gerade ähnliches für einen Kunden um zu setzen und habe noch ein Problem: Die zweite Ebene der Menüpunkte soll vertikal unter den Buttons der ersten erscheinen und diese sollen jeweils die gleiche Breite haben, wie der Menüpunkt auf erster Ebene. Die Interner Explorer stellen das UL-Element aber allesamt mit falscher Breite dar.

Ich würde deshalb gerne die Breite des Bildes in die Zweite Ebene weiterreichen, also ungefähr

2.wrap = |

Die {TSFE:lastImgResourceInfo|0}-Angabe wird unten aber nicht mehr geparst und nicht durch die Breite des Bildes ersetzt.

Ich habe leider von TS noch nicht wirklich viel Ahnung, kannst du mir auf die Sprünge helfen?

Andreas Sauer
Andreas Sauer

Ach. Mist, Tags werden geschluckt, so sollte das aussehen:

2.wrap = <ul style=“width:{TSFE:lastImgResourceInfo|0}px; background-image: url(‚/|‘);“>|</ul>

Robert Heel
Robert Heel

Danke für das gute Script! Einen kleinen Bug habe ich entdeckt (welcher sporadisch Menüpunkte nicht anzeigt wenn man keinen „Rollover“ Hintergrund verwendet): Das „+[20.w]“ wird nicht benötigt.

Johanna Streich

Schade, super Umsetzung des Menüs, aber irgendwas mache ich falsch.

Zwar habe ich jetzt die verlinkten Grafiken, aber die Textlinks sind weiterhin darüber sichtbar.
Und meine bereits erstellen Überschriften Grafiken (funktionierte ganz ähnlich) gehen nicht mehr. Da wird nicht einmal mehr eine Grafik erstellt. Irgendwie hebt sich das durch das Menü auf. :-(

fragezeichen
fragezeichen

Für Anfänger nicht brauchbar. Was soll das lib. vor gtmenu????????????
Muss da nicht ein Marker sein? Ich kann das so nicht nachbauen.
Es wird kein a-Tag angezeigt, auch wenn ich einen Marker „gtmenu“ einführe.