Du hast deinen AdBlocker an?

Es wäre ein Traum, wenn du ihn für t3n.de deaktivierst. Wir zeigen dir gerne, wie das geht. Und natürlich erklären wir dir auch, warum uns das so wichtig ist. Digitales High-five, deine t3n-Redaktion

t3n 13

Ein barrierefreies grafisches Menü mit TypoScript: GTMENU

    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

5 Reaktionen
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.

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. :-(

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.

Andreas Sauer

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

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

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?

Du musst angemeldet sein, um einen Kommentar schreiben zu können.

Jetzt anmelden