BITV

Wie versprochen, geht’s los!

Nach lesen der 8 Seiten (ich meine damit den BITV-Test ) stieg die Motivation weiter an. Eigentlich sind wir vom Ziel nur 2,5 Punkte (!!) entfernt. Bisher entstanden die 92,5 Punkte auch unter anderem durch gewissenhaftes Arbeiten (ich habe ein eigenes Layout benutzt und nicht das Basis-Layout von OpenSAGA), ansonsten hätte ich mich für diese Punktzahl nicht so anstrengen müssen .

Wie arbeitet man denn gewissenhaft? Nunja, man sollte schon die Schritte des BITV-Tests verinnerlicht haben. Mit OpenSAGA hat man zu dem  z. B. den Luxus Zusatzbiblotheken wie DSS nutzen zu können, die das Erstellen eines Layouts unheimlich vereinfachen und viele barrierefreie Helfer mitbringen.

Wie sieht so ein Helfer aus?

Ich schweife zwar ab, fände es aber interessant, das mal erwähnt zu haben. Ich will mal ein Beispiel nennen:

Nehmen wir mal den BITV Prüfschritt 1.4.3a:

“…für Schriftgrößen unter 24 px [...] prüfen, ob das Kontrastverhältnis bei 4,5:1 oder größer liegt”

Schauen Sie sich mal die Anleitung an, wie das zu Prüfen ist – oder wie dies überhaupt kontrolliert werden kann. Die Zusatzbibliothek DSS, die schon in OpenSAGA enthalten ist, sorgt beispielsweise automatisiert dafür, dass dieser Wert eingehalten wird. Aus zwei gegebenen Farben, wird diejenige ermittelt, die den besten Kontrast zur dritten aufweist. So wird sichergestellt, dass es keine Kontrastfehler gibt. Ich habe konsequent diese Funktion auf der gesamten Website genutzt – und habe im BITV-Test keine Abzüge für Kontrastfehler. Episch.

Start Teil 1 …

Nehmen wir uns den ersten fehlgeschlagenen Prüfschritt vor:

Prüfschritt 1.1.1b “Alternativtexte für Grafiken und Objekte” gab es nur ein “eher erfüllt” und einen Abzug von 0,75 Punkten.

Was ist schief gegangen? Die Website verwendet neben einer Slideshow auch Bannergrafiken. Die Bannergrafiken sind eng an die jeweilige View über ein <ui:compontent-setting> gekoppelt. Das heißt ganz einfach erklärt, die View teilt dem OpenSAGA-Haupttemplate mit, welches Bild angezeigt werden soll. Damals war es keine Option, an jedes <ui:compontent-setting> noch einen Alternativtext zu binden, der Aufwand der Pflege wäre zu hoch gewesen (ich habe weit über 40 Grafiken benutzt; Mensch, das Auge isst doch mit!).

Lösung:

Nach etwas stöbern im Handbuch war schnell ermittelt, dass OpenSAGA für solche fälle “Placeholder” zu Verfügung stellt. Da das Haupttemplate weiß, auf welcher View es sich befindet (Breadcrumb) kann hier einfach als Alt-Attribut der Placeholder ${title} angegeben werden.

<img src=”${request.contextPath}/app/res/media/teaser/${os:setting(‘headerImage’)}.jpg” alt=”${title}”/>

Fertig! Nun erhält die Grafik als Alternativtext die Titelbeschreibung bzw. den Brotkrumen des Views, natürlich mit voller i18n Unterstützung, wenn man will. Das passt sehr gut, da die Bannergrafiken eine Art Aufmerksamkeitserreger für die View sein sollen.

Der zweite fehlgeschlagene Prüfschritt, mit dem ich mich in diesem Teil beschäftigen will, besagt:

Prüfschritt 1.3.1a “HTML-Strukturelemente für Überschriften” gab es nur ein “eher erfüllt” und einen Abzug von 0,75 Punkten.

Neben ein paar kleinen Überschriften-Tags, die nicht korrekt nach BITV2 eingesetzt wurden, steht im Test unter diesem Punkt noch ein weiterer Kommentar, der Arbeitsaufwand erzeugen dürfte.

“Die Grafiken oben haben die Funktionen einer Überschrift, wurden aber nicht [...] ausgezeichnet”.

Damit dürften wohl die Bannergrafiken gemeint sein, die schon beim Alternativtext Probleme gemacht haben. Die Schrift ist in der Grafik eingebettet und ist kein HTML-Element:

Betritt Beispielsweise jemand mit einem Screenreader die Website, so werden ihm die auf dem im Bild enthaltenen Informationen vorenthalten. Dies muss geändert werden!

Lösung:

Hier gilt das gleiche, wie schon im vorherigen Prüfschritt: Der Aufwand der Pflege soll minimiert und am besten automatisiert erfolgen. Natürlich könnte man es sich jetzt leicht machen und auf die Grafiken verzichten – wir hatten zwar mit Abzügen gerechnet – aber ich möchte jeden Punkt herauskitzeln. Die Website soll weitestgehend ansprechend aussehen, ein Verzicht der Grafiken kommt nicht in Frage.

Da schon das vorher erwähnte Title-Attribut in der OpenSAGA-Templatedatei verrät, wo wir gerade sind, reicht es an der Stelle, diese Information hübsch in einem Container über die Grafik zu legen. Damit sind der Bezug und die Auszeichnung vollständig erhalten, auch für Screenreader. Im Branch ausprobiert, erhielt ich ein ansprechendes Ergebnis:

Wie der Grafik zu entnehmen ist, zeigt (1), wie die Bannerbilder bisher aussahen. Die neue Grafik, (2) lässt die eingebettete Schrift einfach weg. (3) zeigt einen aktuellen Screenshot: Hier wird der “${title}-Placeholder” über die Grafik gelegt und somit als HTML-Schrift eingebettet – Fertig.

Okay – somit hätten wir theoretische 1,5 Punkte mehr

Das soll es erst einmal für den ersten Teil gewesen sein. Ich freue mich über jedes Feedback oder Verbesserungsvorschläge!