TYPO3 Extension Tutorials Dokumentation von T3NET

TYPO3 Extension Tutorials das TYPO3 Extension Kurzanleitung Dokumentation von T3NET

Referenzen Image
Sie befinden sich hier : 
Dokumentation / Extension Tutorials / Barrierefreie Menüs

Barrierefreie Menüs mit TYPO3

Hier handelt es sich nicht um eine TYPO3 Extension, sondern lediglich um ein kleines PHP-Skript, welches eingebunden wird. Der Tip zu dieser sinnvollen Erweiterung stammt von Cyclops und ist aus diesem Thread im Diskussionsforum entstanden.

Die Vorgehensweise wird von Carla Froitzheim in diesem Artikel auf typo3.org beschrieben. Das PHP-Skript stammt von Jan Wischnat, ich habe es nur geringfügig geändert.

Weitere Informationen zu barrierefreien Navigationsmenüs finden Sie in deutscher Sprache in diesem Artikel bei einfach-fuer-alle.de.

1. Skript downloaden und einbinden

Das Skript dfn_iproc_tmenu.inc wird zunächst im Haupttemplate als Include-Datei eingebunden. Klicken Sie mit der rechten Maustaste auf den Link, wählen Sie Ziel speichern unter... und legen es zunächst auf Ihrer Festplatte ab. Danach laden Sie es bitte per FTP ins Verzeichnis fileadmin/scripts/ auf Ihren Webserver hoch.
Ergänzen Sie das Haupttemplate um folgende Zeile:

...
page = PAGE
page.typeNum = 0
page.config.doctype = xhtml_trans
page.config.xhtml_cleaning = all
page.config.index_enable = 1
page.includeLibs.dfn = fileadmin/scripts/dfn_iproc_tmenu.inc
...

2. Extension-Template ändern

Auf die gleiche Weise ergänzen Sie nun bitte das Extension-Template +ext col1_content:

...
    1 = TMENU
    1 {
      expAll = 0
      noBlur = 1
      wrap = <ul>|</ul>
      IProcFunc = user_IProc_dfn
      NO = 1
      NO.ATagTitle.field = abstract // description // title
      NO.allWrap = |<span class="hidden">.</span>
      NO.wrapItemAndSub = <li>|</li>
      NO.stdWrap.htmlSpecialChars = 1
      CUR < .NO
      CUR = 1
      CUR.allWrap = <strong>|<span class="hidden">.</span></strong>
      CUR.doNotLinkIt = 1
      CUR.stdWrap.htmlSpecialChars = 1
...

3. Zwischenergebnis

Wenn alles geklappt hat, erhalten wir nun ein Menü, das aussieht wie im Bild unten. Den Menüpunkten wird eine Nummerierung vorangestellt. Die Nummerierung befindet sich zwischen dfn Tags. Da wir die Nummerierung aber in grafischen Browsern nicht darstellen möchten, sondern diese von Screenreadern vorgelesen werden soll, verstecken wir Sie im nächsten Schritt wieder und zwar durch Anpassen unseres CSS-Codes.

barrierefreies Menü

4. CSS-Code anpassen

Öffnen Sie im Verzeichnis fileadmin/template/css/main/ die Datei content.css und fügen am Ende der Datei folgende Zeilen ein:

/*******************************************
* Styles barrierefreies Menü
********************************************/
@media screen, print
{
  #col1_content dfn, #col1_content .hidden {
    position: absolute;
    left: -1000em;
    width: 20em;
  }
}

5. Menüpunkte mit title-Attribut

Der Einsatz des title-Attributs wird unter anderem von der BITV empfohlen und von Webdesignern oft eingesetzt. Die Empfehlung muss aber lauten: Ist die Benennung eines Links und damit seines Zieles eindeutig, ist der Einsatz des title-Attributs nicht notwendig. Grafische Browser geben sowohl das title-Attribut (als Tooltip) wie auch den eigentlichen Link-Namen aus. Daher macht es wenig Sinn, hier einfach mit Wiederholungen zu arbeiten. Zum einen stellen sie keine aussagekräftigen Zusatzinformationen zur Verfügung, zum anderen nervt es in Screenreadern. Stellen Sie sich vor, sie bekämen bei jedem Link, den Sie ansteuern, etwas vorgelesen wie: "Anleitung Anleitung". Nicht besonders gut.

Link mit title-Attribut

Subtitle

Aus diesem Grund benutzen wir in diesem Template den Untertitel (subtitle) einer Seite um den Inhalt des title-Attributs automatisch zu erzeugen. Ist der Unterttitel leer (d.h. die Bennung des Links ist eindeutig) bleibt auch das title-Attribut leer. Sie können den Untertitel eingeben, indem Sie auf Seitentitel bearbeiten klicken.

title-Attribut im TYPO3-BackEnd eingeben
Design 1
Design 2
Bookmark this page