Beim Thema Barrierefreiheit und TYPO3 scheiden sich oft die Geister. Die Einen, die sich intensiv mit TYPO3 beschäftigen, wissen, dass man mit TYPO3 grundsätzlich jede Frontend-Ausgabe der Website barrierefrei gestalten kann, da TYPO3 sehr flexibel konfigurierbar ist, selbst für Grundelemente. Zudem werden auch ein Großteil der behördlichen Webseiten, die per Gesetz dazu verpflichtet sind eine barrierefreie Website zu betreiben, mit TYPO3 als CMS betrieben.

Die Anderen die sich intensiver mit Barrierefreiheit beschäftigen, stößt TYPO3 doch hin und wieder unangenehm auf, da es in manchen Grundkonfigurationen nicht so barrierefrei daherkommt (Stichwort onfocus=“blurLink(this);“) und sich auch genügend schlechte Beispiele dazu im Web tummeln. Aber von welchem CMS gibt es das nicht…

Mit dem Erscheinen der TYPO3 Version 4.7 werden umfangreiche Änderungen zur Barrierefreiheit in den Core einfließen, wie man im Artikel von Peter lesen konnte.

Dabei kommt man mit ein paar Snippets und Regeln im Hinterkopf zum Thema Barrierefreiheit schon recht weit. Ein sauberes (valides) Basis-HTML ist schon mal Grundvoraussetzung. Zudem sollte man bedenken das die Website auch ohne Javascript funktionieren sollte, Javascript-Spielereien also hauptsächlich on-top kommen. Das ist natürlich alles nichts Neues, aber man muss auch danach handeln. Sogenannte Skip-Links, die versteckt sind und nur per Tastertur (:focus) erreicht werden können, sind auch bekannt, werden aber auch selten integriert. Eine einfache Variante:

page.1 = TEXT
page.1 {
  value (
    <a href="#search" class="ym-skip">Direkt zur Suche</a>
    <span class="ym-hideme">.</span>
    <a href="#content" class="ym-skip">Direkt zum Inhalt</a>
    <span class="ym-hideme">.</span>
    <a href="#navigation" class="ym-skip">Direkt zur Navigation</a>
    <span class="ym-hideme">.</span>
  )
}

Das (aus YAML 4 entnommene) CSS für die Grundfunktionalität:

.ym-skip, .ym-hideme {
    left: -32768px;
    position: absolute;
    top: -32768px;
}
.ym-skip:focus, .ym-skip:active {
    left: 0;
    position: static;
    top: 0;
}

:focus

In dem Zusammenhang ist die Browser-Default-Regel für :focus zu erwähnen. Es wird bei fokusieren von Links eine gepunktete Outline um den Link gesetzt um den aktiven (fokusierten) Link hervorzuheben. Einige ältere CSS-Reset-Sytlesheets verwenden einen Reset für die Focus-Outline (:focus {ouline: none}) und in TYPO3 hält sich die angesprochene JS-Funktion blurLink() eisern. Das ist sehr schlecht für die Tastaturbedienung und ist zu vermeiden. Auch nicht neu, sollte man nur immer beherzigen.

Barrierefreie Menüs

Ein barrierefreies Menü ist natürlich ebenfalls Pflicht. Im TYPO3 Kochbuch-Klassiker ist ein barrierefreies Typoscript-Snippet vorgestellt, dass das Menü inkl. Untermenüs durchnummeriert. Das etwas lange Typoscript kann man hier laden. Was man allerdings nicht machen sollte, sind accesskey-Atrribute einbinden, warum wird bei einfach-fuer-alle.de einleuchtend erklärt. Wichtig ist, den aktiven Menüpunkt kenntlich zu machen und nicht zu verlinken (keine Links auf sich selbst), z.B. so:

...
  CUR = 1
  CUR < .NO
  CUR {
    doNotLinkIt = 1
    wrapItemAndSub = <li class="cur">|</li>
    linkWrap = <strong>Aktive Seite: |</strong>
  }
...

Breadcrumb

Was bei Projekten häufiger vergessen wird, ist für alle Seiten die richtige Breadcrumb-Navigation auszugeben. Da Single-Ansichten wie bei tt_news faktisch (im Normalfall) auf einer Page-ID, also auf einer Seite stattfinden, müssen dem Nutzer trotzdem über den angepassten <title> und der angepassten Rootline vorgegaukelt werden es sind unterschiedliche Einzelseiten.

Das kann man für tt_news z.B über ein RECORDS-Objekt einbinden, das der normalen Breadcrumb angefügt wird:

[globalVar = GP:tx_ttnews|tt_news > 0]
lib.rootline.20 = RECORDS
lib.rootline.20 {
  dontCheckPid = 1
  tables = tt_news
  source.data = GP:tx_ttnews|tt_news
  conf.tt_news = TEXT
  conf.tt_news.field = title
  conf.tt_news.wrap = <strong>|</strong>
}
[end]

geht natürlich auch für andere Extension, z.B. Cal:

[globalVar = GP:tx_cal_controller|uid > 0]
lib.rootline.20 = RECORDS
lib.rootline.20 {
  dontCheckPid = 1
  tables = tx_cal_event
  source.data = GP:tx_cal_controller|uid
  conf.tx_cal_event = TEXT
  conf.tx_cal_event.field = title
  conf.tx_cal_event.wrap = <strong>|</strong>
}
[end]

Extensions

Wenn man mit TYPO3-Boardmitteln nicht mehr weiter kommt, kann man für bestimmte Aufgaben eine der vielen Extensions einsetzen, die die Barrierefreiheit unterstützen. Eine sehr gute Extension ist A21 Glossary. Diese Extension rendert die jeweiligen HTML-Tags für Abkürzungen oder zeichnet Sprachwechsel im Text aus. Zudem wird die Extension noch aktiv weiterentwickelt.

Zu guter Letzt sind Formulare immer ein besonderen Augenmerkt wert. Neben der zugänglichen Strukturierung von Formularelementen ist auch auf die klare Gestaltung der Fehlermeldungen zu achten (hier klammer ich mal die Browservalidierung der neuen HTML5-Elemente noch aus). Das neue Form-Modul leistet hier schon gute Dienste. Mehr dazu ist ja vielleicht in einem anderem Türchen versteckt… 😉