Zentrale Anlaufstelle Barrierefrei

Jedes Bild muss mit einem ALT-Attribut versehen sein. Das ALT-Attribut muss den sichtbaren Inhalt des Bildes oder der Grafik beschreiben. Ohne Alternativtext steht der Inhalt eines Bildes den Benutzer*innen von Screenreadern nicht zur Verfügung, das Bild ist nicht vorhanden.

Immer wenn ein Bild 'image' im Roxen eingebunden wird, muss ein alternativer Text angegeben werden. Dafür muss dieses Feld in folgenden Komponenten verpflichtend ausgefüllt werden.

• Cover Slide (für jedes Slide muss ein eigener ALT-Titel hinterlegt werden
• Gallery > Gallery Item
• Highlight Links Item
• Section > Section Teaser
• Text and picture
• Video > Preview image alt text

Formulare über html-Code einbinden

Formulare in Roxen müssen bisher noch über die RXML-Komponente als html-Code eingegeben werden.

Formulare barrierefrei zu gestalten, ist nicht einfach. Dafür haben wir eine barrierefreie Vorlage erstellt, die ganz oder in ihren einzelnen Feldtypen kopiert werden kann. So gehen Sie auf Nummer Sicher, dass die einzelnen Felder auch korrekt durch einen Screenreader vorgelesen werden.

Zudem finden Sie hier weitere ausführliche technische Informationen zur Umsetzung barrierefreier Formulare.

Nutzung der Table Komponente

Tabellen sollten generell nicht zum Layout einer Seite verwendet werden. Datentabellen hingegen müssen korrekt aufgebaut werden, so dass Screenreader die Tabellen in der richtigen Reihenfolge mit Überschriften und Zuordnungen vorlesen.

Visuell orientierte Personen nutzen für die Orientierung in einer Datentabelle neben den Überschriften wenn nötig auch den Wertebereich. Es ist für sie daher relativ leicht möglich, strukturelle Mängel, zum Beispiel Wechsel in der Bedeutung von Zeilen oder Spalten zu erkennen und mit ihnen umzugehen.

Sehbehinderte und blinde Benutzer*innen erschließen sich das Angebot von Datentabellen dagegen eher analytisch. Sie entwickeln ausgehend von den Überschriften und anderen im Kontext verfügbaren Informationen eine Vorstellung vom Aufbau der Tabelle. Diese Vorstellung ist die Grundlage für den Zugriff auf die angebotenen Daten.

Damit das möglich ist und funktioniert, müssen zwei Bedingungen erfüllt sein:

Die Tabelle muss eine klare Struktur haben, die Bedeutung der Zeilen und Spalten muss fassbar sein und sie muss möglichst gut den Überschriften oder unterstützenden Kontextinformationen zu entnehmen sein.

Die Überschriften müssen auffindbar sein und es muss klar sein, auf welche Daten sie sich beziehen, sie müssen also korrekt ausgezeichnet sein.

Die klare Struktur ist die Grundlage der Barrierefreiheit von Datentabellen. Es ist nicht möglich, eine mangelhaft strukturierte Datentabelle durch spezielle Auszeichnung barrierefrei zugänglich zu machen. Auf Grundlage einer klaren, nachvollziehbaren Struktur ist die korrekte Auszeichnung aber nützlich und wichtig. Mögliche Anwendungen der Auszeichnung von Tabellenüberschriften:

• Der Screenreader informiert über die Position und Anzahl der Überschriftenreihen.
• Der Screenreader liest die (neue) Zeilen- oder Spaltenüberschrift vor, wenn der*die Benutzer*in die Tabellenzeile oder die Tabellenspalte wechselt.
• Überschriften werden in einer für den*die Benutzer*in besser geeigneten Form hervorgehoben.

Link: Weiterführende Informationen zur richtigen Umsetzung von Tabellen

 

Hinweis zur Nutzung der Table Komponente:
Gehen Sie in den Source-Code der Tabelle und passen Sie diesen an, hier ein HTML-Beispiel:

Tabellen werden in HTML durch das <table>-Tag erzeugt. Innerhalb der Tabelle wird jede Tabellen-Zeile durch <tr> und </tr>-Tags (table row) umschlossen. In die Tabellenzeilen werden die einzelnen Tabellenzellen entweder durch <th>-Tags oder durch <td>-Tags eingefügt. Die td-Elemente stehen dabei für Datenzellen (table data) und die th-Elemente für Kopfzellen (table header).

Da es für Nutzerinnen und Nutzern von Screenreadern schwer ist Inhalte, Strukturen, Datenmuster und Tendenzen in Datentabellen zu erschließen, ist für eine Tabelle eine kurze Zusammenfassung anzubieten. In HTML ist dafür das summary-Attribut vorgesehen.

Jede Datentabelle muss beschriftet werden. Für Tabellen existiert dazu in HTML das caption-Element. Der Inhalt des caption-Elements kann von einem Screenreader mit der Tabelle in Verbindung gesetzt werden.

 

Wie oben in dem Screenshot zu sehen, können Sie mir Rechtsklick auf die Tabelle die Properties aufrufen und damit die Kopfzeilen, Caption und Summary festlegen oder aber über den Source auf direkt einen HTML-Code wie diesen eingeben.

HTML-Code:

<table border="1" cellpadding="3" cellspacing="0" summary="Die Tabelle ordnet Äpfel und Birnen als Kernobstgewächse ihrer Form, Gattung und der Anzahl der Arten nach an.">
<caption>
Vergleich Äpfel und Birnen
</caption>
<tr>
<td></td>
<th>Apfel</th>
<th>Birne</th>
</tr>
<tr>
<th>Form</th>
<td>Rundlich</td>
<td>Birnenförmig</td>
</tr>
<tr>
<th>Gattung</th>
<td>Kernobstgewächse</td>
<td>Kernobstgewächse</td>
</tr>
<tr>
<th>Arten</th>
<td>ca. 50</td>
<td>ca. 5000</td>
</tr>
</table>