Textelemente

Synonyme: Abschnittsüberschrift, Hauptüberschrift, Heading

Siehe auch: Schrift, Text, Beschriftung, Titel, Gruppe

Überschriften dienen der Gliederung von Textabschnitten. Sie beschreiben den Inhalt des jeweiligen Textabschnitts.

• JAWS: Überschrift Ebene [Zahl] [Beschriftung]
• NVDA: Überschrift Ebene [Zahl] [Beschriftung]
• Windows Sprachausgabe: Überschriftenebene [Zahl] [Beschriftung]

Überschriften werden mit den HTML-Elementen <h1>, <h2>, <h3>, <h4>, <h5> und <h6> ausgezeichnet. Dabei sollte Folgendes beachtet werden:

• Überschriften sollten knapp, eindeutig und aussagekräftig sein, weil sie die primäre Methode zur Navigation und dem Wahrnehmen der Seitenstruktur für Screenreader-Nutzende darstellen.
• Die Überschriften sollten hierarchisch korrekt verschachtelt werden, d. h. auf eine <h1> sollten <h2>-Überschriften folgen, deren Abschnitte wiederum <h3>-Überschriften enthalten können. Gemäß HTML-Spezifikation dürfen keine Überschriften-Ebenen übersprungen werden, so darf z. B. auf eine <h2> keine <h4>, <h5> oder <h6> folgen.
• Die Hauptüberschrift (<h1>) sollte den Zweck der jeweiligen Seite beschreiben (und z. B. nicht lediglich den Anwendungsnamen enthalten).

Überschriften können innerhalb des <hgroup>-Elements zusammen mit Absätzen (<p>-Element) gruppiert werden, um z. B. einen Untertitel oder eine alternative Überschrift anzugeben. Mit keinem der Screenreader für Windows ist diese Gruppierung wahrnehmbar, d. h. der Inhalt des <p>-Elements wird als normaler Text ausgegeben, weil das <hgroup>-Element gemäß den „HTML Accessibility API Mappings“ keine Semantik besitzt.

Weitere Informationen: 4.3.6 The h1, h2, h3, h4, h5, and h6 elements - HTML Standard (whatwg.org) , 4.3.11 Headings and outlines - HTML Standard (whatwg.org), Headings | Web Accessibility Initiative (WAI) | W3C

Wird die Überschrift nicht mit den HTML-Elementen umgesetzt, sollte u. a. Folgendes beachtet werden:

• Die Rolle wird mit role=heading übermittelt.
• Die Überschriften-Ebene wird mit aria-level übermittelt. Dabei sollten nur die Zahlen von 1 bis 6 verwendet werden.
  • Bei Zahlen größer als 6 gibt JAWS die Überschrift mit der Ebene 2 aus.
  • Bei Zahlen größer als 9 geben NVDA und Windows Sprachausgabe die Überschrift mit der Ebene 2 aus.
• Die Beschriftung sollte per Textinhalt erfolgen.

Weitere Informationen: heading role - Accessible Rich Internet Applications (WAI-ARIA) 1.2 (w3.org)

Synonyme: Bezeichnung, Formularfeldbeschriftung, Label, Name, Accessible Name

Siehe auch: Schrift, Text, Grafik, Formular, Gruppe, Beschreibung, Fehlermeldung, Pflichtfeldkennzeichnung

Beschriftungen dienen der Identifikation von Bedienelementen (siehe DIN EN ISO 9241-161: 8.21).

Eine Beschriftung besteht aus einem kurzen, beschreibenden Text oder einer aussagekräftigen Grafik bzw. aus einer Kombination von Text und Grafik. Die Beschriftung kann sich innerhalb des Elements oder neben dem Element befinden, welches beschriftet wird.

• 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 Beschriftung wird von den Screenreadern an erster Stelle, unmittelbar vor der Rolle, ausgegeben.
• Vor der Beschriftung wird lediglich eine Gruppenbeschriftung ausgegeben, sofern vorhanden.
• Beim Lesen mit dem virtuellen Cursor wird die Beschriftung je nach Bedienelement beim Element selbst ausgegeben oder an der Stelle, an der sie sich im Quellcode befindet. Damit auch beim Lesen mit dem virtuellen Cursor die Beschriftungen korrekt den Bedienelementen zugeordnet werden können, sollte sich die Beschriftung im Quellcode im Element (z. B. bei Links und Schaltern), direkt vor dem Element (bei Formularfeldern außer Radiobuttons und Checkboxen) oder direkt nach dem Element (bei Radiobuttons und Checkboxen) befinden.

In HTML hängt die Beschriftungsmethode vom Elementtyp ab:

• Links, Schalter (die mit dem <button>-Element ausgezeichnet sind), werden über ihren Textinhalt oder den Alternativtext der Grafik beschriftet,
• Schalter (die mit dem <input>-Element ausgezeichnet sind), werden über das value-Attribut beschriftet.
• Formularelemente werden mit dem <label>-Element beschriftet.
• Formularfeldgruppen (<fieldset>) werden mit dem <legend>-Element beschriftet.
• Grafiken (<img>) werden mit dem alt-Attribut beschriftet.
• Abbildungen (<figure>) werden mit dem
• Tabellen werden mit dem <caption>-Element beschriftet.
• iFrames und Regionen (z. B. <nav> und <section>) werden mit dem title-Attribut beschriftet. Einige Elemente dürfen nicht beschriftet werden (z. B. <div> oder <span>).

Weitere Informationen: 4.10.4 The label element - HTML Standard (whatwg.org), Providing Accessible Names and Descriptions | APG | WAI | W3C, Labeling Controls | Web Accessibility Initiative (WAI) | W3C, 4. Accessible Name and Description Computation - HTML Accessibility API Mappings 1.0 (w3.org)

In ARIA können Beschriftungen mit den Attributen aria-labelledby und aria-label übermittelt werden.

• Per aria-labelledby kann auf die IDs von sichtbaren oder unsichtbaren Beschriftungen verwiesen werden.
• Mit aria-label kann die Beschriftung direkt in Textform angegeben werden.
• Einige Elemente, die mit ARIA-Rollen ausgezeichnet sind, können außerdem über ihren Textinhalt beschriftet werden. Dies gilt u. a. für die Rollen button, link, checkbox, radio, option und tab. In der ARIA-Spezifikation sind diese Elemente mit „Name From: content“ gekennzeichnet.
• Einige Elemente, die mit ARIA-Rollen ausgezeichnet sind, müssen explizit (d. h. in der Regel mit aria-label oder aria-labelledby) beschriftet werden. Eine Beschriftung über den Textinhalt ist nicht möglich. Dies gilt u. a. für die Rollen: listbox, combobox, dialog, form, application, grid. In der ARIA-Spezifikation sind Elemente, die beschriftet werden müssen, mit „Accessible Name Required: True“ gekennzeichnet. Ob ein Element explizit beschriftet werden kann, ist in der ARIA-Spezifikation am „Name From: author“ ersichtlich.
• Darüber hinaus kann eine Beschriftung mit role=caption ausgezeichnet werden und dient dann als Beschriftung von Tabellen (role=grid, role=table, role=treegrid) und Abbildungen (role=figure), sofern die Beschriftung das erste (oder bei role=figure auch letzte) Kindelement des zu beschriftenden Elements ist. Unabhängig von der Auszeichnung mit role=caption soll per aria-labelledby auf die Beschriftung verwiesen werden.
• Einige ARIA-Rollen dürfen nicht beschriftet werden, z. B. generic, paragraph, presentation, code, insertion, deletion, emphasis, strong, subscript und superscript. In der ARIA-Spezifikation sind diese Elemente mit „Name From: prohibited“ gekennzeichnet. Elemente mit diesen Rollen dürfen allerdings Text enthalten.
• Es ist zulässig, per aria-labelledby auf ausgeblendete Elemente, die z. B. mit display:none oder hidden ausgezeichnet wurden, zu verweisen. Die Inhalte der ausgeblendeten Elemente dienen als Beschriftung des Elements mit aria-labelledby. Es empfiehlt sich in solchen Fällen jedoch, aria-label zu verwenden.

Weitere Informationen: aria-label property - Accessible Rich Internet Applications (WAI-ARIA) 1.2 (w3.org), aria-labelledby property - Accessible Rich Internet Applications (WAI-ARIA) 1.2 (w3.org), caption role - Accessible Rich Internet Applications (WAI-ARIA) 1.2 (w3.org)

• Jedes Bedienelement muss eine Beschriftung besitzen, die als Accessible Name an die Accessibility API übermittelt wird. Dies gilt auch, wenn das Element keine visuell sichtbare Beschriftung besitzt.
• Die Beschriftung sollte knapp und aussagekräftig sein.
• Der Accessible Name sollte keinen Sprachwechsel und keine strukturierten Inhalte enthalten, weil dies mit der Assistenztechnologie nicht wahrnehmbar ist.
• Für jedes Element kann nur mit einer Methode eine Beschriftung an die Accessibility API übermittelt werden. Werden mehrere Methoden verwendet, wird lediglich die Beschriftung als Accessible Name verwendet, deren Methode die höchste Priorität besitzt. Die Priorität der Methoden ist wie folgt definiert:
  • aria-labelledby,
  • aria-label,
  • HTML-Beschriftungsmethoden (wie <label>, <caption>, value, alt, sofern für das Element zutreffend),
  • Textinhalt (sofern für das Element zulässig),
  • title,
  • placeholder (nur bei Eingabefeldern).
• Elemente sollten nicht per title- oder placeholder-Attribut beschriftet werden, weil diese beiden Attribute, die eigentlich für die Übermittlung einer Beschreibung bzw. eines Eingabehinweises gedacht sind, nur als Beschriftung verwendet werden, wenn es keine richtige Beschriftung gibt. Es handelt sich dabei um einen Reparaturmechanismus, der sicherstellen soll, dass ein Element nicht ohne Beschriftung ausgegeben wird. Wenn die Beschriftung eines Bedienelements explizit über ein Attribut erfolgt (z. B. aria-label, aria-labelledby, id, auf die per <label for> verwiesen wird), dann muss sich das Attribut an dem Element befinden, welches den Tastaturfokus erhält und die Rolle des zu beschriftenden Elements besitzt. Das Bedienelement kann nicht per Attribut beschriftet 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 Beschriftung berücksichtigt. Soll dies vermieden werden, sollten sie mit aria-hidden=true ausgezeichnet werden.
• Wird per aria-labelledby auf ein Formularfeld verwiesen, so wird der Wert des Formularfeldes (nicht jedoch dessen Beschriftung) bei der Ermittlung der Beschriftung des Elements mit aria-labelledby berücksichtigt.
• ARIA-Elemente müssen in der Regel mit einer ARIA-Methode (z. B. aria-label oder aria-labelledby) oder über ihren Textinhalt (sofern für die entsprechende Rolle zulässig) beschriftet werden. So kann z. B. eine ARIA-Checkbox nicht mit dem <label>-Element und eine ARIA-Grafik nicht mit dem alt-Attribut beschriftet werden. Eine Ausnahme stellen ARIA-Elemente dar, deren zugrundeliegenden HTML-Elemente die entsprechende HTML-Beschriftungsmethode erlauben. So kann ein kombiniertes Eingabefeld (<input role=combobox>) mit dem <label>-Element beschriftet werden, weil das HTML-Element <input> mit dem <label>-Element beschriftet werden kann.
• Die sichtbare Beschriftung sollte nicht mit aria-hidden=true ausgezeichnet werden, selbst wenn ein Accessible Name vorhanden ist, damit die Sprachausgabe auch bei Mausbedienung funktioniert.
• Die sichtbare Beschriftung sollte als Accessible Name verwendet werden, um eine mehrfache Ausgabe der Beschriftung mit der Sprachausgabe zu vermeiden.
• Bei Formularfeldern sollte sich der Accessible Name im Quellcode unmittelbar vor dem Element befinden, außer bei Radiobuttons und Checkboxen, bei denen sich der Accessible Name im Quellcode unmittelbar dahinter befinden sollte. Das ist wichtig, damit auch beim Lesen mit dem virtuellen Cursor des Screenreaders die Beschriftung korrekt den Formularfeldern zugeordnet werden kann.
• Je nach Elementtyp ist der Textinhalt von Elementen auch mit dem virtuellen Cursor des Screenreaders nicht wahrnehmbar, wenn diese explizit beschriftet sind (z. B. mit aria-label oder aria-labelledby).
  • Bei Bedienelementen (wie z. B. Links und Schalter) sollte der Textinhalt als Beschriftung verwendet werden. Andernfalls muss sichergestellt sein, dass alle Informationen, die im Textinhalt stehen, auch im Accessible Name vorhanden sind.
  • Bei gruppierenden Elementen (wie Formularfeldgruppen, Regionen, Listen oder Tabellen) ist deren Inhalt mit dem virtuellen Cursor wahrnehmbar, selbst wenn diese explizit beschriftet sind. Diese Elemente sollten somit explizit beschriftet werden, damit deren Zweck erkennbar ist.
• Elemente sollten nicht per title- oder placeholder-Attribut beschriftet werden, weil diese beiden Attribute, die eigentlich für die Übermittlung einer Beschreibung bzw. eines Eingabehinweises gedacht sind, nur als Beschriftung verwendet werden, wenn es keine richtige Beschriftung gibt. Es handelt sich dabei um einen Reparaturmechanismus, der sicherstellen soll, dass ein Element nicht ohne Beschriftung ausgegeben wird.
• Wenn die Beschriftung eines Bedienelements explizit über ein Attribut erfolgt (z. B. aria-label, aria-labelledby, id, auf die per <label for> verwiesen wird), dann muss sich das Attribut an dem Element befinden, welches den Tastaturfokus erhält und die Rolle des zu beschriftenden Elements besitzt. Das Bedienelement kann nicht per Attribut beschriftet 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 Beschriftung berücksichtigt. Soll dies vermieden werden, sollten sie mit aria-hidden=true ausgezeichnet werden.
• Wird per aria-labelledby auf ein Formularfeld verwiesen, so wird der Wert des Formularfeldes (nicht jedoch dessen Beschriftung) bei der Ermittlung der Beschriftung des Elements mit aria-labelledby berücksichtigt.
• ARIA-Elemente müssen in der Regel mit einer ARIA-Methode (z. B. aria-label oder aria-labelledby) oder über ihren Textinhalt (sofern für die entsprechende Rolle zulässig) beschriftet werden. So kann z. B. eine ARIA-Checkbox nicht mit dem <label>-Element und eine ARIA-Grafik nicht mit dem alt-Attribut beschriftet werden. Eine Ausnahme stellen ARIA-Elemente dar, deren zugrundeliegenden HTML-Elemente die entsprechende HTML-Beschriftungsmethode erlauben. So kann ein kombiniertes Eingabefeld (<input role=combobox>) mit dem <label>-Element beschriftet werden, weil das HTML-Element <input> mit dem <label>-Element beschriftet werden kann.
• Die sichtbare Beschriftung sollte nicht mit aria-hidden=true ausgezeichnet werden, selbst wenn ein Accessible Name vorhanden ist, damit die Sprachausgabe auch bei Mausbedienung funktioniert.
• Die sichtbare Beschriftung sollte als Accessible Name verwendet werden, um eine mehrfache Ausgabe der Beschriftung mit der Sprachausgabe zu vermeiden.
• Bei Formularfeldern sollte sich der Accessible Name im Quellcode unmittelbar vor dem Element befinden, außer bei Radiobuttons und Checkboxen, bei denen sich der Accessible Name im Quellcode unmittelbar dahinter befinden sollte. Das ist wichtig, damit auch beim Lesen mit dem virtuellen Cursor des Screenreaders die Beschriftung korrekt den Formularfeldern zugeordnet werden kann.
• Je nach Elementtyp ist der Textinhalt von Elementen auch mit dem virtuellen Cursor des Screenreaders nicht wahrnehmbar, wenn diese explizit beschriftet sind (z. B. mit aria-label oder aria-labelledby).
  • Bei Bedienelementen (wie z. B. Links und Schalter) sollte der Textinhalt als Beschriftung verwendet werden. Andernfalls muss sichergestellt sein, dass alle Informationen, die im Textinhalt stehen, auch im Accessible Name vorhanden sind.
  • Bei gruppierenden Elementen (wie Formularfeldgruppen, Regionen, Listen oder Tabellen) ist deren Inhalt mit dem virtuellen Cursor wahrnehmbar, selbst wenn diese explizit beschriftet sind. Diese Elemente sollten somit explizit beschriftet werden, damit deren Zweck erkennbar ist.

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).

• 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.

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), Providing Accessible Names and Descriptions | APG | WAI | W3C, 4. Accessible Name and Description Computation - HTML Accessibility API Mappings 1.0 (w3.org)

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), aria-description property - Accessible Rich Internet Applications (WAI-ARIA) 1.3 (w3c.github.io)

• 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.

1. Eingabehinweise in einem Formular als Kindelement am Anfang des <form>-Elements,
2. 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).

Synonyme: Fließtext

Siehe auch: Schrift, [Beschriftung] (https://handreichungen.bfit-bund.de/barrierefreie-uie/0.2/textelemente.html#beschriftung), Beschreibung, Fehlermeldung, Grafik

Text dient der Vermittlung von Informationen in Schriftform. Text kann u.a. Überschriften, Links, Listen und Grafiken enthalten.

Längere Texte (Richtwert: 80 bis 400 Zeichen) ohne Textstruktur (d.h. nur Fließtext ohne Listen, Tabellen, Überschriften etc.) sollen Anwendungen, die den virtuellen Cursor nicht unterstützen,

• in mehreren TAB-Schritten den Fokus erhalten (je TAB-Schritt rund 80 Zeichen) oder
• so ausgezeichnet werden, dass sie mit dem virtuellen Cursor gelesen werden können, oder
• in einem verlinkten Dokument angeboten werden, welches mit dem virtuellen Cursor gelesen werden kann (z.B. HTML, PDF, RTF).

Lange Texte (ab ca. 400 Zeichen) oder Texte mit Struktur (z.B. Listen, Tabellen, Überschriften) sollen

• so ausgezeichnet werden, dass sie mit dem virtuellen Cursor gelesen werden können, oder
• in einem verlinkten Dokument angeboten werden, welches mit dem virtuellen Cursor gelesen werden kann (z.B. HTML, PDF, RTF).

Anwendungen mit vielen TAB-Schritten auf Texten und sonstigen nicht bedienbaren Elementen sollen einen Modus zum Deaktivieren dieser unnötigen Navigationsschritte für sehende Tastaturnutzende enthalten. Dieser Modus und dessen Aktivierung soll in den Hinweisen zur Barrierefreiheit beschrieben werden.

Wenn das Kopieren von einzelnen Textinhalten im Anwendungskontext relevant sein kann, dann soll dies auch mit der Tastatur möglich sein. Folgende Anforderungen sind dann für die Textinhalte zu erfüllen:

• die Textinhalte sind mit der Tastatur fokussierbar,
• innerhalb des Texts ist der Textcursor sichtbar,
• innerhalb des Texts kann mit den Pfeiltasten navigiert werden, um den Startpunkt der Markierung zu bestimmen,
• der Text kann mit UMSCHALT+Pfeiltasten markiert werden,
• der markierte Text kann mit STRG+C kopiert (ggf. auch über das Kontextmenü) und befindet sich nach dem Kopieren in der Windows-Zwischenablage.

Um das zu erreichen, können schreibgeschützte Eingabefelder verwendet werden.

Sofern lediglich der gesamte Inhalt eines Textabschnitts kopierbar sein muss, kann alternativ auch ein Schalter zum Kopieren des Textinhalts implementiert werden. Die Aktivierung des Schalters soll bewirken, dass der zugehörige Text in die Zwischenablage kopiert wird.

Anwendungen mit vielen TAB-Schritten auf kopierbaren Texten sollen einen Modus zum Deaktivieren dieser Navigationsschritte enthalten. Dieser Modus und dessen Aktivierung soll in den Hinweisen zur Barrierefreiheit beschrieben werden.

Informationen zu diesem Artikel

Datum:

21.04.2023

Lizenz:

CC-BY-SA 4.0