WordPress + Binary Blue Theme = Barrierefreiheit?

Ich nutze WordPress deshalb so gern, weil ich mich seit Mitte 2002 mit der Barrierefreheit von elektronischen Medien, insbesondere von Internetseiten, beschäftige – hauptsächlich beruflich.

Mehr durch Zufall als durch intensive Suche bin ich auf das Binary Blue Theme von Carsten Albrecht (aka 4Null4) gestoßen. Die aktuelle Version dieses Themes ist die Version 1.3.0

Die Gründe für das Binary Blue Theme waren: programmiert gemäß der Standards des W3C, kommt vollständig ohne Tabellenlayout aus, ist Widget-kompatibel und besitzt eine klare optische Darstellung.

Ein viel wichtigerer Grund ist die Beachtung der Barrierefreien Informationstechnik-Verordnung (BITV), der deutschen Form der WCAG der WAI-Gruppe des W3C. So heißt es zumindest in der Feature-Übersicht zum Binary Blue Theme.

Doch in den vergangenen Wochen muß ich leider einsehen, daß es einige problematische wenn nicht sogar kritische Dinge gibt:

Unzureichender Kontrast

Während der Kontrast im Hauptmenü gut ist, ändert sich dies, wenn mit der Maus ein Hauptmenüpunkt ausgewählt wird:

Beim Vergleich der Kontrastwerte mit dem Colour Contrast Analyser stellt man fest:

• Vordergrundfarbe: #CCCCCC
• [dunkelste] Hintergrundfarbe:#7D7D7D
• Errechneter Kontrastwert: 79

Optimalerweise würde der Kontrastwert bei 125 oder höher liegen, doch mit weit unter 100 ist er einfach zu schlecht; auch dann, wenn man berücksichtigt, daß es nicht wirklich zuverlässig möglich ist, einen ausreichenden Kontrastwert rechnerisch zu bestimmen.

Tastaturfokus ≠ Mausfokus

Die Änderungen in der Vorder- und Hintergrundfarbe, welche das Überfahren eines Hauptmenüpunkts mit der Maus hervorrufen, werden bei reiner Tastaturnutzung leider nicht äquivalent nachvollzogen. Bei Tastaturnutzung (beim sog. „Tabben“ durch eine Internetseite) erhält man nur den üblichen (Browser-generierten) gepunkteten Rahmen um den gerade erreichten Link:

Notwendig wäre hier aber ein identisches Verhalten, unabhängig davon, ob man nun einen Link mit der Maus oder mit der Tastatur ansteuert.

Fehlerhafte Darstellung im Firefox

Anzeige der Kategorien

Werden einem Blog-Eintrag mehrere Kategorien zugeordnet, so daß der gesamte Text nicht mehr in eine Textzeile paßt, bricht die Darstellung im Internet Explorer um, so daß es zu insgesamt 2 (oder mehr) Zeilen kommt.

Im Firefox bricht die Textdarstellung ebenfalls auf mehrere Zeilen um, jedoch wird bereits der größte Teil der 2. Zeile von anderen Elementen der Seite „überlagert“, so daß der Inhalt ab der 2. Zeile unlesbar wird.

Ursachenforschung

Mit der Web Developer Toolbar für Firefox kann man relativ schnell den entsprechenden DIV finden, welcher für dieses Verhalten ursächlich verantwortlich ist:
In der entsprechenden CSS-Datei gibt es die folgende Definition:

.chapter .commentFooter, .inlineCommentClose {
  …
  height: 15px;
}

Während der Internet Explorer diese Höhenangabe ignoriert, sofern Kindelemente in ihrer Höhe über diesen Grenzwert hinauswachsen, verhält sich Firefox (und z.B. auch Opera) an dieser Stelle standardkonform, was bedeutet: alles was höher ist, „springt“ aus dem Elternelement.

Lösungsvorschlag

Folgenden Code in die entsprechende CSS-Datei einbauen und schon klappt’s auch mit dem Firefox:

.chapter .commentFooter { height: auto; overflow: auto; }

Anzeige des Hauptmenüs

Leider gibt es auch ein Anzeigeproblem für das Hauptmenü:
Sobald das Hauptmenü mit immer mehr (Haupt-)Einträgen gefüllt wird, kommt es zwangsläufig zu einer „Überfüllung“, so daß nicht mehr alle Einträge in nur eine Zeile passen.

• Im Internet Explorer ist das Ganze kein Problem: Das Hauptmenü bricht um, es entsteht ein mehrzeiliges Hauptmenü.
• Im Firefox hingegen, bricht das Hauptmenü nicht um, die „überzähligen“ Menüpunkte gehen (optisch) verloren!

Probleme mit dem integrierten Lightbox 2 Plugin

Das Lightbox 2 Plugin bietet sehr gute optische Effekte vor allem für die Anzeige von Thumbnails sowie den damit verbundenen Bildern in Orginalgröße. Allerdings scheint die Integration dieses Plugins in das Binary Blue Theme nicht vollständig konsistent gelungen zu sein:

Tastaturbedienung

Während man beim ursprünglichen Lightbox 2 Plugin die geöffneten Fenster der Orginalbilder (in voller Größe) sowohl mit der Maus als auch durch das Drücken der Taste ‚x' schließen kann, funktioniert dies bei Binary Blue Theme leider nicht. Das Schließen des entsprechenden Fensters kann nur per Maus erfolgen.

JavaScript Probleme

Während das integrierte Plugin wunderbar bei Blog-Einträgen funktioniert, die entweder den vollständigen Blogeintrag auf der Startseite liefern oder die entsprechenden Bilder in der Kurzfassung enthalten, geht das Ganze schief, sobald die Bilder erst in der Volldarstellung zur Verfügung stehen.
Dieses Problem ist kein wirkliches Problem, sondern ein Feature: Es soll verhindern, daß hierdurch die Darstellung des jeweiligen Blogeintrags unnötig verzögert wird. Im Forum von 4Null4 wird eine Lösungsmöglichkeit vorgestellt.

Schlagwörter: WordPress