Die Funktionsweise des Attributs role=“presentation“

Das Attribut role=“presentation“ wird im Gegensatz zum Namen der Rolle nicht dazu verwendet, um Inhalte wie Skizzen, Schemas und andere rein visuelle Darstellungen Screenreader-Anwender:innen zu präsentieren. Im Gegenteil: Damit werden Inhalte versteckt, bei denen es sich um rein visuelle Zusatzinhalte handelt, z. B. eine zusätzliche visuelle Darstellung eines auf der Seite beschriebenen Sachverhaltes. Screenreader ignorieren diese Inhalte, da es für Screenreader-Anwender:innen eine Verdoppelung des bereits in Textform vorhandenen Inhalts darstellen würde.

Was ist mit dem Attribut aria-hiddden=““ ?

Sie fragen sich sicher, wie sich die beiden Attribute unterscheiden und ob beide Attribute gebraucht werden.

Sowohl role=“presentation“ als auch aria-hidden=“true“ entfernen programmatisch Elemente aus dem Accessibility Tree.
role=“presentation“ entfernt nur die Semantik: Eine Auflistung zum Beispiel, die korrekt als Liste formatiert wurde, wird durch den Einsatz von role=“presentation“ von Screenreadern nur noch als untereinander stehende Links vorgelesen.

Beispiel-Code

<ul>
<li>WCAG 1.0 </li>
<li> WCAG 2.0</li>
<li>WCAG 2.2 </li>
</ul> 
<ul role="presentation">
<li>WCAG 1.0 </li>
<li> WCAG 2.0</li>
<li>WCAG 2.2 </li>
</ul> 

Code-Beispiel mit role=“presentation“

Ein sinnvoller Einsatz der Eigenschaft von role=“presentation“ wäre z. B. das Verbergen einer Darstellung mit Layouttabellen vor Screenreadern, um blinden Anwender:innen, nur die relevanten Inhalte ohne die unnötige Layouttabellen-Semantik bereitzustellen.

aria-hidden=“true“ entfernt hingegen das Element selbst aus dem Accessibility Tree. So wird beispielsweise eine Grafik durch den Einsatz von aria-hidden=“true“ durch Screenreader komplett ignoriert, was bei rein dekorativen Elementen durchaus wünschenswert sein kann.

<img scr="pfad/grafik.jpg alt="Alternativtext">
<img scr="pfad/grafik.jpg alt="Alternativtext" aria-hidden="true">

Code-Beispiel mit aria-hidden

Nächstes grosses Missverständnis

Das eben Gesagte darf nicht so verstanden werden, dass grundsätzlich alle rein visuellen Darstellungen vor Screenreader-Anwender:innen verborgen werden sollen. Auch blinde Menschen müssen Zugang zu relevanten Informationen in visueller Form erhalten, daher dürfen nur visuelle Inhalte vor Screenreader-Anwender:innen versteckt werden, die zusätzlich als rein visuelle Alternative zu einem in Textform bereits auf der Seite beschriebenen Sachverhalt dienen. Visuelle Darstellungen, die als alleiniges Mittel einen Sachverhalt vermitteln, müssen selbstverständlich für Screenreader-Anwender:innen zugänglich gemacht werden. Dasselbe gilt für nicht Standard-HTML, interaktive UI-Komponenten wie Sliders, Filters usw.