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:

Hauptmenü mit dem ausgewählten Eintrag 'Blog'

Hauptmenü mit Maus über dem Eintrag 'Barrierearme PDF'.

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:

Hauptmenü mit dem umrahmten Eintrag 'Barrierearme PDF'.

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.

Mehrzeilige Kategorien im Internet Explorer.Abgeschnittene Darstellung mehrzeiliger Kategorien im Firefox.

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.

Baujahr 1970. Schütze. Kind der 80er und 90er. Isst gern und viel. Kann immer und überall Fernsehen/Videos konsumieren. Kann stundenlang die Natur im Stillen beobachten – kommt viel zu selten dazu. Mal sehr laut, manchmal sehr leise. "Wer sich nicht wehrt, hat schon verloren" · "Wehret den Anfängen!" · "Für den Sieg des Bösen genügt es, wenn die Menschen guten Willens nichts tun." Gegen Faschismus, Rassismus, Ungerechtigkeit und Dummheit. Lebenwesen, das gern und viel selbst denkt!

6 Comments

  1. Hi,
    ich hätte nicht gedacht, daß sich mal jemand die Mühe macht, mein Theme (bzw. wenigstens eines der enthaltenen Schemes) so detailliert auseinander zu nehmen 😉
    Ich muss allerdings bezüglich des unterschiedlichen Verhaltens des Maus- bzw. Tab-Focus widersprechen – das ist kein Themefehler, sondern da musst du dich bei den Browserherstellern bedanken, die es bis heute nicht geschafft haben, auch ein Fokussieren eines Links per TAB-Taste als “hover” anzuerkennen und entsprechend hinterlegte Stylesheet-Regeln auszuwerten.

    Was LightboxJS v2 angeht – das issn Bug im Script, den ich nicht verbrochen habe, sorry 😉 Erachte ich allerdings auch nicht als weiter schlimm, da sich Barrierefreiheit und solch massiver Einsatz von Javascript eigentlich nicht sinnvoll ergänzen können. Deshalb war mir die volle Funktionsfähigkeit im Sinne eines klassischen Themes bei abgeschaltetem Javascript wichtiger als irgendeine krude Lösung zu suchen, wie dieser Bug im LightboxJS-Script behoben werden könnte.

    Deine anderen Kritikpunkte beziehen sich ausschließlich aufs Basic-Scheme und sind daher nicht allgemeingültig für Binary Blue. Streng genommen sind auch das aber wieder lediglich Unterschiede in den verschiedenen Browser-Engines, und streng genommen ist hier das Verhalten des Firefox das korrekte und MSIE macht den Fehler, die Boxen zu vergrößern (was mich insofern irritiert, da Firefox keine HEIGHT-Regeln zu berücksichtigen hätte und daher die Umbrüche genauso vornehmen können müßte).

    Da ich mir der Problematik natürlich bewusst bin, daß es zum derzeitigen Zeitpunkt fast nicht möglich ist, eine wirklich barrierefreie Themesuite zu kreieren, schreibe ich auf der Featureliste daher ja auch ganz bewusst nur von weitgehender Barrierefreiheit – besser wäre hier von Barreierearmut die Rede – aber da ich das Ganze in meiner Freizeit treibe und dazu noch kostenlos, wird mir das wohl niemand vorwerfen wollen, gell? 😉

  2. ich habe deinen kritikpunkt bezüglich des onFocus auf den topmenü-links mal untersucht und in alle sechs basis-schemes nun zusätzliche regeln fürs onFocus eingebaut – wird in der nächsten version also drin sein.

  3. Hallo CountZero! [wink]

    Ich hätte nie gedacht, daß jemand wie du sich für meine Anmerkungen interessiert! 😉

    Ich habe dein Theme tatsächlich deshalb ausgewählt, weil es meinem Verständnis von Barrierefreiheit am nächsten kam! Und im Laufe der Zeit sind mir dann einige Stolperfallen darin aufgefallen.

    Beim Thema Barrierefreiheit sind wir uns ja zudem einig: Absolute Barrierefreiheit gibt es nicht, man müßte also in diesem Zusammenhang strenggenommen von Barrierearmut sprechen.
    Wer jedoch — wie ich — einen besonders geschärften Blick für sowas hat und auch andere Dokumentenformate daraufhin untersucht (ich sach nur PDF), dem wird relativ schnell klar, daß (X)HTML wesentlich barriereärmer gestaltet werden kann als alles andere!

    Ich möchte an dieser Stelle noch einmal ganz deutlich sagen: Du hast einen hervorragenden Job gemacht — ob nun in der Freizeit oder nicht!

  4. danke für die blumen 😉
    bezüglich LightboxJS habe ich in der zwischenzeit ebenfalls nachgeforscht, es gibt hier eine neue Version 2.02 – die habe ich experimentell heute nacht noch bei mir auf der seite eingebunden, sie wird in der nächsten öffentlich zugänglichen version also ebenfalls integriert sein – wichtigste neuerung darin: komplette tastatursteuerung über (p)revious image, (n)ext image und (c)lose lightbo(x).

    deinen lösungsvorschlag für das höhen-problem bei den kategorien untersuche ich in den nächsten tagen mal genauer, wenn das als allgemeintaugliche lösung funktioniert, bau ich das natürlich ebenfalls noch ein.

    wäre doch gelacht, wenn ich Binary Blue nicht so nah wie irgendmöglich an die barrierefreiheit annähern könnte, zumal sich mit dir ja offenbar jemand damit auseinander gesetzt hat, der deutlich tiefer in dieser materie steckt als ich 😉

  5. Das die neue tastaturbedienbare Version von LightboxJS in die neue Version des Themes einfließen wird finde ich einfach nur: Geil!

    Die Idee mit … overflow: auto; … ist nicht auf meinem Mist gewachsen, dafür bin ich noch zu sehr CSS-Laie; ich habe das Ganze einem Beitrag bei Einfach für Alle entnommen, die das Ganze aber auch nur recherchiert haben.

  6. Pingback: Nikos [We]bLog

Leave a Comment

Deine E-Mail-Adresse wird nicht veröffentlicht. Erforderliche Felder sind mit * markiert.

vier × zwei =

Diese Website verwendet Akismet, um Spam zu reduzieren. Erfahre mehr darüber, wie deine Kommentardaten verarbeitet werden.