Wie schon gestern erwähnt, befinde ich mich noch immer im Flieger. Eine Stunde Flugzeit habe ich noch vor mir. Zeit also, in einem weitern Beitrag ein Thema anzusprechen, dass mir besonders am Herzen liegt, auch wenn ich leider viel zu selten darauf achten und Zeit investieren kann. Es geht um das Thema Accessibility.

Zu diesem Thema will ich eigentlich schon seit längerem mal eine ganze Artikelreihe machen, denn es würde auf jeden Fall den Rahmen von einem Artikel sprengen und so viele Informationen kann man auch nicht wirklich aufnehmen. Daher möchte ich heute das Thema von vor 5min von gestern aufgreifen. Ihr seht es schon am Text, es geht noch einmal um das Durchstreichen von Text.

Probleme für die Accessibility

„Ihr seht es schon am Text“ war hier genau das richtige Stichwort. Für einen sehenden Nutzer ist es sehr einfach, einen durchgestrichenen Text zu ignorieren beziehungsweise ihm Bedeutung zukommen zu lassen. Jene Nutzer, die aber auf Screen-Reader angewiesen sind, haben diese Möglichkeit nicht. Aktuell ist mir nicht bekannt, welche Screen-Reader auf einen <del> Tag reagieren und den Text dabei nicht vorlesen oder einen Hinweis geben. Das Problem lässt sich aber auch auf andere Weise technisch lösen und genau das möchte ich euch als einen ersten kleinen Ausflug in die Welt der Accessibility heute kurz erklären.

Die WAI-ARIA-Attribute

Von der Web Accessibility Initiative gibt es die sogenannte Accessible Rich Internet Applications Initiative. Diese beschreibt Methoden, um eine Internetanwendung (oder einfache Webseite) besser für Nutzer von „Assistive Technologies“ nutzbar zu machen. Hierunter fallen auch einige Attribute, die auf den meisten HTML Tags verwendet werden können.

Um also beispielsweise das Problem mit dem <del> Tag zu lösen, könntet ihr euch entscheiden, den Text einfach nicht vorlesen zu lassen. Hierzu gibt es ein Attribut mit dem Namen „aria-hidden“, dass ihr einfach hinzufügt:

<del aria-hidden="true">Text, der nicht vorgelesen werden soll.</del>

Jeder „sehende Nutzer“ wird den Text ganz normal lesen können. Ein Nutzer eines Screen-Reader bekommt den Text aber nicht vorgelesen.

Im Core von WordPress und den Default-Themes finden sich einige solcher Attribute. So habe ich beispielsweise einen Patch für den Core geschrieben, der die Accessibility des „Weiterlesen-Tag“ verbessert. Der generierte HTML-Code sieht in etwa wie folgt aus:

<a href="http://example.com/blogbeitrag-abc#more-39" class="more-link">
    <span aria-label="Blogbeitrag ABC weiterlesen">(mehr&nbsp;…)</span>
</a>

In diesem Fall wurde also kein Text weggelassen, sondern es wurde durch einen anderen ersetzt. Statt des Textes „(mehr&nbsp;…)“ wird also der Inhalt des „aria-label“ Attributs vorgelesen. Hat eine Seite viele solcher Weiterlesen-Links (was beispielsweise bei Kategorie-Archiven oder der Startseite der Fall ist), kann ein Nutzer eines Screen-Readers sehr schnell erkennen, was sich hinter dem entsprechenden Link verbirgt und zu welchen Artikel er nach einem Klick auf den Link erhält.

Fazit

Viel mehr möchte ich euch heute noch nicht „zumuten“ 😉 Ich hoffe, ich konnte euch aber zeigen, mit welchen sehr einfachen Mitteln ihr die Accessibility eurer Website erheblich für Nutzer von Screen-Readern verbessern könnt.

Ich würde mich freuen, wenn ihr ein paar Minuten (oder Stunden) Zeit opfert und euch mal ein bisschen in die Dokumentation von WAI-ARIA einlest. Dort gibt es viele interessante Tipps und sehr viele davon sind wirklich einfach umzusetzen. Und wenn ihr Plugins oder Themes programmiert, dann nehmt diese Möglichkeiten in euren normalen Workflow auf.