Beschreibung - Barrierefreie Gestaltung von User Interface-Elementen

Synonyme: Hinweis, Hilfe, Bedienhinweis, Eingabehinweis, Instruktion, Description, Accessible Description

Siehe auch: Schrift, Text, Beschriftung, Fehlermeldung, Pflichtfeldkennzeichnung, Tooltip, Hilfe und Support

Eine Beschreibung enthält zusätzliche Informationen zur Bedienung der Anwendung (siehe DIN EN ISO 9241-161: 8.19).

Beschreibungen können sich auf ein Bedienelement, einen Bereich, eine Maske oder die gesamte Anwendung beziehen. Eine Beschreibung besteht aus einem erläuternden Text, einer Grafik oder aus einer Kombination von Text und Grafik.

Beschreibungen können

dauerhaft sichtbar sein,
bei der Bedienung dynamisch ein- und ausgeblendet werden (z. B. beim Hovern mit einem Zeigeinstrument oder bei Fokuserhalt mit der Tastatur bzw. nach Aktivierung eines Bedienelements).

Darstellung

Nr.	Eigenschaft	Beschreibung	Klassifizierung	Referenz
246	Kontrast	Textliche Beschreibungen müssen zum Hintergrund ein Kontrastverhältnis von mindestens 4,5:1 aufweisen. Hinweis: Bei großer Schrift (ab 24 px bzw. ab 18,7 px bei fettem Schriftschnitt) ist ein Kontrastverhältnis von mindestens 3:1 ausreichend.	Muss	EN 301 549: 9.1.4.3, 11.1.4.3
247	Kontrast	Textliche Beschreibungen sollen ein Kontrastverhältnis von mindestens 7:1 aufweisen. Hinweis: Bei großer Schrift (ab 24 px bzw. ab 18,7 px bei fettem Schriftschnitt) ist ein Kontrastverhältnis von mindestens 4,5:1 ausreichend.	Soll	WCAG 2.1: 1.4.6 (AAA)
248	Kontrast	Grafische Beschreibungen müssen ein Kontrastverhältnis von mindestens 3:1 aufweisen. Dies gilt für den Kontrast zum Hintergrund sowie für alle inhaltstragenden Bereiche innerhalb der Grafik.	Muss	EN 301 549: 9.1.4.11, 11.1.4.11
249	Vergrößerung	Die Beschreibung muss bis auf 200% skaliert werden können. Bei der Skalierung muss die Beschreibung vollständig sichtbar bleiben und darf nicht andere Seitenbereiche verdecken oder von diesen verdeckt werden.	Muss	EN 301 549: 9.1.4.4, 11.1.4.4
250	Vergrößerung	Die Beschreibung muss bei 320px Bildschirmbreite vollständig und ohne horizontales Scrollen angezeigt werden.	Muss	EN 301 549: 9.1.4.10, 11.1.4.10
251	Verständlichkeit	Wenn für das Verständnis der Bedienung zusätzliche Hinweise notwendig sind, dann müssen Beschreibungen mit Bedienhinweisen angezeigt werden. Hinweis: Beschreibungen sind nicht notwendig, wenn die Beschriftungen der Bedienelemente ausreichend sind. Beschreibungen können notwendig sein, wenn z. B. bei einem Eingabefeld ein bestimmtes Eingabeformat erforderlich ist.	Muss	EN 301 549: 9.3.3.2, 11.3.3.2
252	Verständlichkeit	Die Beschreibung soll in der Anwendungssprache formuliert sein.	Soll	EN 301 549: 9.3.1.2
253	Verweis auf sensorische Merkmale	Informationen in der Beschreibung, die sich auf Elemente der Anwendung beziehen, dürfen nicht ausschließlich auf deren sensorische Merkmale Bezug nehmen. Hinweis: So soll z. B. ein Schalter nicht über sein Aussehen oder seine Position beschrieben werden, sondern über seine Beschriftung.	Muss	EN 301 549: 9.1.3.3, 11.1.3.3
254	Position	Die Beschreibungen sollen so positioniert sein, dass sie den Elementen oder Bereichen, auf die sie sich beziehen, eindeutig zuordenbar sind. Hinweis: Beschreibungen zu einem Formularfeld können z. B. rechts oder unterhalb des Feldes angezeigt werden.	Soll	DIN EN ISO 9241-125: 5.1.1, 5.1.14
255	Animation	Die Beschreibung darf nicht blitzen, blinken oder auf eine andere Art und Weise visuell verändert werden (siehe Animation).	Muss	EN 301 549: EN 301 549: 9.2.3.1, 11.2.3.1, 9.2.2.2, 11.2.2.2
256	Fokussichtbarkeit	Erhält die Beschreibung den Tastaturfokus, dann muss der Fokusindikator sichtbar sein (siehe Fokusindikator).	Muss	EN 301 549: 9.2.4.7, 11.2.4.7

Bedienung

Nr.	Eigenschaft	Beschreibung	Klassifizierung	Referenz
257	Tastaturbedienung	In Anwendungen, die den virtuellen Cursor nicht unterstützen, müssen die Beschreibungen den Tastaturfokus erhalten, sofern die Beschreibung nicht mit einem tastaturfokussierbaren Element verknüpft ist. Hinweis: Wenn die Anwendung viele Beschreibungen enthält, die den Tastaturfokus erhalten, soll es einen Bedienmodus geben, bei dem nur interaktive Elemente den Fokus erhalten, um unnötige Navigationsschritte für sehende Tastaturnutzende zu vermeiden.	Muss	EN 301 549: 9.1.3.1, 11.1.3.1
258	Tastaturbedienung	Sofern die Beschreibung nicht dauerhaft sichtbar ist, muss sie auch mit der Tastatur eingeblendet werden können. Hinweis: Das gilt unabhängig davon, wie die Beschreibung eingeblendet wird. Häufige Varianten sind: Schalter zum Einblenden eines Bereichs mit der Beschreibung, Schalter zum Einblenden eines Tooltips mit der Beschreibung, Bereich oder Tooltip, der beim Hovern mit einem Zeigeinstrument oder beim Fokussieren eingeblendet wird, Einblenden per Tastaturkürzel.	Muss	EN 301 549: 9.2.1.1, 11.2.1.1
259	Tastaturbedienung	Enthält die Beschreibung Bedienelemente, so müssen diese mit der Tastatur bedienbar sein. Hinweis: Dies gilt auch, wenn die Beschreibung in einem Tooltip angezeigt wird.	Muss	EN 301 549: 9.2.1.1, 11.2.1.1
260	Tastaturbedienung	Wird eine Beschreibung in einem automatisch eingeblendeten Tooltip angezeigt, so muss Folgendes erfüllt sein: Der Tooltip muss mit der Tastatur geschlossen werden können, ohne den Tastaturfokus wegzubewegen (z. B. mit ESC). Der Tooltip muss so lange angezeigt werden, bis er explizit ausgeblendet wird (z. B. durch Wegbewegen des Tastaturfokus). Hinweis: Davon ausgenommen sind Tooltips, deren Einblenden standardmäßig durch die Plattform-Software erfolgt.	Muss	EN 301 549: 9.1.4.13, 11.1.4.13
261	Zeigeinstrumentbedienung	Wird eine Beschreibung in einem automatisch eingeblendeten Tooltip angezeigt, so muss Folgendes erfüllt sein: Der Tooltip muss mit dem Zeigeinstrument geschlossen werden können, ohne dieses wegzubewegen (z. B. mit ESC). Der Tooltip muss mit dem Zeigeinstrument überfahren werden können, ohne dabei ausgeblendet zu werden. Der Tooltip muss so lange angezeigt werden, bis er explizit ausgeblendet wird (z. B. durch Wegbewegen des Zeigeinstruments). Hinweis: Davon ausgenommen sind Tooltips, deren Einblenden standardmäßig durch die Plattform-Software erfolgt.	Muss	EN 301 549: 9.1.4.13, 11.1.4.13

Programmierung/Schnittstellen

Nr.	Eigenschaft	Beschreibung	Klassifizierung	Referenz
262	Rolle	Sofern die Beschreibung den Tastaturfokus erhält, muss eine entsprechende Rolle (z. B. „Text“) an die Accessibility API übermittelt werden (siehe Accessibility API).	Muss	EN 301 549: 9.4.1.2, 11.4.1.2, 11.5.2.5
263	Desktop: Beschreibung	Jede visuell vorhandene Beschreibung, die sich auf ein tastaturfokussierbares Bedienelement bezieht, muss als Accessible Description dieses Elements an die Accessibility API übermittelt werden. Hinweis: Dabei spielt es keine Rolle, ob diese Beschreibung dauerhaft sichtbar ist oder lediglich beim Hovern mit einem Zeigeinstrument oder bei Erhalten des Tasturfokuseingeblendet wird.	Muss	EN 301 549: 9.1.3.1, 11.1.3.1, 11.5.2.5
263	Beschreibung	Sofern die Beschreibung lang ist oder strukturierten Inhalt enthält, soll die Beschreibung den Tastaturfokus erhalten und deren Inhalt mit dem virtuellen Cursor gelesen werden können.	Soll	EN 301 549: 9.1.3.1, 11.1.3.1
264	Grafik	Enthält die Beschreibung eine inhaltstragende Grafik, so muss deren äquivalente Textalternative an die Accessibility API übermittelt werden.	Muss	EN 301 549: 9.1.1.1, 11.1.1.1

Praxistipp Beschreibungen in Web-Anwendungen

Screenreader-Ausgabe

JAWS: [Beschriftung] [Rolle] [Pflichtfeldhinweis] [Validierungshinweis] [Wert] [Beschreibung] [Fehlermeldung] [Bedienhinweis des Screenreaders] [Hinweis auf Tastaturkürzel]
NVDA: [Beschriftung] [Rolle] [Pflichtfeldhinweis] [Validierungshinweis] [Beschreibung] [Hinweis auf Tastaturkürzel] [Wert]
Windows Sprachausgabe: [Beschriftung] [Rolle] [Wert] [Pflichtfeldhinweis] [Validierungshinweis] [Hinweis auf Tastaturkürzel]

Hinweise:

Die Beschreibung wird von JAWS und NVDA eher am Ende, in jedem Fall nach der Beschriftung und Rolle ausgegeben.
Die Beschreibung wird von der Windows Sprachausgabe nicht ausgegeben.
JAWS und NVDA können so konfiguriert werden, dass keine Ausgabe der Beschreibung erfolgt. Diese Funktion wird von erfahrenen Screenreadernutzenden verwendet, um die Inhalte effizienter wahrnehmen zu können. Deshalb sollten nur zusätzliche Informationen in der Beschreibung enthalten sein.
Beim Lesen mit dem virtuellen Cursor werden Beschreibungen vom Screenreader in der Regel nicht ausgegeben. Die Ausgabe der Beschreibungen erfolgt nur bei TAB-Navigation. Deshalb sollten nur zusätzliche Informationen in der Beschreibung enthalten sein und die Beschreibung nur bei Bedienelementen, die den Tastaturfokus erhalten können, verwendet werden.

HTML

In HTML können die meisten Bedienelemente nur über das title-Attribut mit einer Beschreibung versehen werden. Das title-Attribut ist jedoch aus folgenden Gründen nicht barrierefrei:

Bei Verwendung des Browserzooms wird der Tooltip, der durch das title-Attribut angezeigt wird, nicht skaliert.
Bei Tastaturnavigation wird der Tooltip (außer im Browser Edge) nicht eingeblendet und ist somit für sehende Tastaturnutzende nicht wahrnehmbar.
Die Tooltips können nicht mit der Maus überfahren werden.
Die Tooltips können in einigen Browsern (z. B. Firefox) nicht ausgeblendet werden, ohne den Fokus wegzubewegen.
Auf Mobilgeräten können die Tooltips nicht oder nur schwer angezeigt werden. Aus diesen Gründen sollte das title-Attribut vermieden werden.

In HTML können wenige Elemente zusätzlich zum title-Attribut mit einer weiteren Methode mit einer Beschreibung versehen werden:

Schalter, die mit dem <input type=button|reset|submit>-Element ausgezeichnet sind, über das value-Attribut, sofern dieses nicht bereits für den Accessible Name verwendet wird,
Schalter, die mit dem <summary>-Element ausgezeichnet sind, über ihren Textinhalt, sofern dieser nicht bereits für den Accessible Name verwendet wird,
Tabellen über das <caption>-Element, sofern dieses nicht bereits für den Accessible Name verwendet wird. Damit soll allerdings lediglich sichergestellt werden, dass die sichtbare Beschriftung mit der assistiven Technologie zumindest als Beschreibung wahrnehmbar ist, wenn diese nicht als Beschriftung (Accessible Name) ausgegeben wird. Da jedoch die sichtbare Beschriftung mit dem Accessible Name übereinstimmen oder zumindest in diesem enthalten sein muss (EN 301 549: 9.2.5.3), sollte keine der drei Methoden zur Auszeichnung einer Beschreibung verwendet werden.

Weitere Informationen: 3.2.6.1 The title attribute - HTML Standard (whatwg.org) (Externer Link), Providing Accessible Names and Descriptions | APG | WAI | W3C, 4. Accessible Name and Description Computation - HTML Accessibility API Mappings 1.0 (w3.org)

ARIA

In ARIA können Beschreibungen mit den Attributen aria-describedby und aria-description übermittelt werden.

Per aria-describedby kann auf die IDs von sichtbaren oder unsichtbaren Beschreibungen verwiesen werden.
Mit aria-description kann die Beschreibung direkt in Textform angegeben werden. Das Attribut wird erst mit ARIA 1.3 definiert und wird somit von älterer Assistenztechnologie noch nicht unterstützt.
Es ist zulässig, per aria-describedby auf ausgeblendete Elemente, die z. B. mit display:none oder hidden ausgezeichnet wurden, zu verweisen. Die Inhalte der ausgeblendeten Elemente dienen als Beschreibung des Elements mit aria-describedby. Es empfiehlt sich in solchen Fällen jedoch, aria-description zu verwenden.

Mit weiteren ARIA-Attributen können Informationen an die Accessibility API übermittelt werden, die beschreibenden Charakter haben, aber keine Beschreibung (Accessible Description) darstellen:

Fehlermeldungen mit aria-errormessage,
Platzhalter mit aria-placeholder,
Informationen zu Tastaturkürzel mit aria-keyshortcuts,
Hinweis auf eine ausführliche Beschreibung mit aria-details.

Achtung: Obwohl das ARIA-Attribut aria-roledescription so bezeichnet ist, als ob mit ihm die Rolle des Elements beschrieben werden könnte, ist dies nicht der Fall. Mit aria-roledescription wird die Rolle des Elements überschrieben, weshalb das Attribut mit Vorsicht zu verwenden ist.

Weitere Informationen: aria-describedby property - Accessible Rich Internet Applications (WAI-ARIA) 1.2 (w3.org) (Externer Link), aria-description property - Accessible Rich Internet Applications (WAI-ARIA) 1.3 (w3c.github.io) (Externer Link)

Allgemeine Hinweise

Eine Beschreibung, die programmatisch als Accessible Description übermittelt wird, kann zwar ausführlicher sein als die Beschriftung, sollte jedoch ebenfalls knapp und aussagekräftig sein. Die Beschreibung sollte nicht redundant zur Beschriftung sein.
Außerdem sollte die Accessible Description keine Sprachwechsel und keine strukturierten Inhalte enthalten, weil dies mit der Assistenztechnologie nicht wahrnehmbar ist.
Längere Beschreibungen oder Beschreibungen mit Sprachwechsel oder strukturierten Inhalten sollten so umgesetzt werden, dass sie mit dem virtuellen Cursor des Screenreaders gelesen werden können, d. h. in Textform vorhanden sein. Vom jeweiligen Bedienelement kann per aria-details verwiesen oder in einer kurzen Accessible Description auf die ausführliche Beschreibung hingewiesen werden.
Für jedes Element kann nur mit einer Methode eine Beschreibung an die Accessibility API übermittelt werden. Werden mehrere Methoden verwendet, wird lediglich die Beschreibung als Accessible Description verwendet, deren Methode die höchste Priorität besitzt. Die Priorität der Methoden ist wie folgt definiert:
1. aria-describedby,
2. aria-description,
3. sichtbare Beschriftung bei Schaltern und Tabellen, sofern nicht für den Accessible Name verwendet (siehe oben),
4. title.
Wenn die Beschreibung eines Bedienelements explizit über ein Attribut erfolgt (z. B. aria-description, aria-describedby, title), dann muss sich das Attribut an dem Element befinden, welches den Tastaturfokus erhält und die Rolle des zu beschreibenden Elements besitzt. Das Bedienelement kann nicht per Attribut beschrieben werden, wenn sich das Attribut an einem übergeordneten oder untergeordneten Element befindet.
Textinhalte, die über die CSS-Selektoren before oder after als Pseudoelemente dargestellt werden, werden bei der Ermittlung der Beschreibung berücksichtigt. Soll dies vermieden werden, sollten sie mit aria-hidden=true ausgezeichnet werden.
Wird per aria-describedby auf ein Formularfeld verwiesen, so wird der Wert des Formularfeldes (nicht jedoch dessen Beschriftung) bei der Ermittlung der Beschreibung des Elements mit aria-describedby berücksichtigt.
Die sichtbare Beschreibung sollte nicht mit aria-hidden=true ausgezeichnet werden, selbst wenn eine Accessible Description vorhanden ist, damit die Sprachausgabe auch bei Mausbedienung funktioniert.
Die sichtbare Beschriftung sollte als Accessible Description verwendet werden, um eine mehrfache Ausgabe der Beschreibung mit der Sprachausgabe zu vermeiden.
Um eine sinnvolle Lesereihenfolge mit dem virtuellen Cursor des Screenreaders zu gewährleisten, sollten sich Beschreibungen im Quellcode beim oder in dem Element befinden, welches beschrieben wird, z. B.
- Eingabehinweise in einem Formular als Kindelement am Anfang des <form>-Elements,
- Eingabehinweise eines Formularfelds unmittelbar vor oder nach dem Formularfeld, jedoch in jedem Fall nach der Beschriftung des Feldes.
Die Attribute title, aria-describedby und aria-description sind globale Attribute. d. h. sie können bei jedem HTML-Element bzw. bei jeder ARIA-Rolle verwendet werden. Es ist jedoch zu beachten, dass die Accessible Description von den meisten Screenreadern nicht beim Lesen mit dem virtuellen Cursor ausgegeben wird, so dass diese drei Attribute nur bei Bedienelementen, die den Tastaturfokus erhalten, verwendet werden sollten. Unproblematisch ist die Verwendung von aria-describedby bei weiteren Elementen, sofern der Beschreibungstext, auf den das Attribut verweist, auch mit dem virtuellen Cursor lesbar ist, d. h. nicht ausgeblendet wurde (z. B. mit hidden oder aria-hidden=true).

Datum:: 04.07.2023
Lizenz:: CC-BY-SA 4.0