Barrierefreie HTML-Überschriften-Auszeichnung

Do headings introduced to meet SC 2.4.10 (AAA) need to be marked up With an h<n> tag too?

On this page, HTML heading markup h<n> tags are used for the titles of each scenario I / Ii / III and for each of the two ARIA1 and ARIA2 techniques. This is good enough to comply with SC 1.3.1 (A) for the three scenarios illustrated below. In Scenario I, these are the only headings.

In den Szenarien II und III verfügt jeder Unterabschnitt der Techniken ARIA1 und ARIA2 zusätzlich über eine Überschrift (im Text): „Anwendbarkeit“, „Hinweise zur Unterstützung durch Benutzeragenten und assistive Technologien“ und „Beschreibung“. Diese sind jeweils mit A, B bzw. C nummeriert.

Beachten Sie, dass der Darstellungsstil (Schriftart, Schriftgröße) der Titel aller Unterabschnitte zwar nicht besonders hervorgehoben ist, diese jedoch als Überschriften dienen. Diese Titel erleichtern allen das Verständnis und kommen auch Nutzern von Screenreadern zugute. Allein durch die Einführung dieser Überschriften wird somit sichergestellt, dass der Inhalt die Anforderung SC 2.4.10 (AAA) erfüllt.

2.4.10 Abschnittsüberschriften: Abschnittsüberschriften dienen der Gliederung des Inhalts. (Stufe AAA)

SC 2.4.10 (AAA) stellt klar, dass der Begriff „Überschrift“ im allgemeinen Sinne verwendet wird und Titel sowie andere Möglichkeiten umfasst, verschiedenen Arten von Inhalten eine Überschrift hinzuzufügen. WCAG 2 definiert den Begriff „Überschrift“ oder „Abschnittsüberschrift“ nicht.

Geben diese Titel auch die Struktur und die Informationsbeziehungen wieder, wie dies in SC 1.3.1 (A) gefordert wird?

1.3.1 Informationen und Beziehungen: Informationen, Strukturen und Beziehungen, die durch die Darstellung vermittelt werden, können programmgesteuert ermittelt werden oder sind im Text verfügbar. (Stufe A)

Die Überschriften der Unterabschnitte sind nicht besonders hervorgehoben und verstoßen daher nicht gegen F2: „Verwendung von Änderungen in der Textdarstellung zur Vermittlung von Informationen ohne Verwendung der entsprechenden Markups oder Textelemente“. Somit erfüllen sie die Anforderung SC 1.3.1 (A).

In Szenario III sind alle Unterabschnitte mit den Überschriften „Anwendbarkeit“, „Hinweise zur Unterstützung durch Benutzeragenten und assistive Technologien“ und „Beschreibung“ Listenelemente und machen somit Informationsbeziehungen und Struktur programmgesteuert zugänglich. Auch in Szenario II befinden sie sich innerhalb des P-Tags des zugehörigen Inhalts und erfüllen somit SC 1.3.1.

Natürlich liegt es im Ermessen des Autors, zu entscheiden, ob die Überschriften der Unterabschnitte gestalterisch hervorgehoben werden sollen oder nicht. Wenn sie hervorgehoben sind, sollten sie den F2-Test bestehen.

ARIA role=“heading“ kommt zur Hilfe:

Die Überschriften der Unterabschnitte sehen sowohl bei ARIA1 als auch bei ARIA2 optisch gleich aus, sind jedoch für Nutzer von Screenreadern unterschiedlich. Nur zur Veranschaulichung: Die Überschriften unter ARIA2 sind mit der ARIA-Rolle „role=‘heading’“ markiert. Auch ohne eine „aria-level“-Angabe helfen diese Überschriften Nutzern von Bildschirmleseprogrammen, Inhalte zu finden und effizient zu navigieren. JAWS weist diesen Überschriften ebenfalls eine Überschriftenebene zu (in diesem Fall offenbar fälschlicherweise), während NVDA und VoiceOver (unter iOS) sie lediglich als Überschriften anzeigen. (Freedom Scientific wurde darauf hingewiesen.)

Szenario I: Inhalte zu den einzelnen Techniken werden ohne sichtbare Überschriften dargestellt

ARIA1: Verwendung der Eigenschaft „aria-describedby“ zur Bereitstellung einer beschreibenden Bezeichnung für Steuerelemente der Benutzeroberfläche

Diese Technik gilt für:

• SC 1.3.1: Informationen und Beziehungen
• SC 3.3.2: Beschriftungen oder Anweisungen

Siehe Hinweise zur User-Agent-Unterstützung für ARIA1.

Mit dieser Technik soll veranschaulicht werden, wie die WAI-ARIA-Eigenschaft „aria-describedby“ verwendet wird, um programmgesteuerte, beschreibende Informationen zu einem Element der Benutzeroberfläche bereitzustellen. Die Eigenschaft „aria-describedby“ kann verwendet werden, um…

ARIA2: Kennzeichnung eines Pflichtfelds mit der Eigenschaft „aria-required“

Diese Technik gilt für:

• SC 1.3.1: Informationen und Beziehungen

Siehe Hinweise zur User-Agent-Unterstützung für ARIA2.

Das Ziel dieser Technik besteht darin, auf programmgesteuerte Weise anzugeben, dass das Ausfüllen eines Benutzereingabefeldes für die erfolgreiche Übermittlung eines Formulars zwingend erforderlich ist, wenn ein entsprechender visueller Hinweis vorliegt. Die Tatsache, dass das Element ein Pflichtfeld ist, wird häufig visuell dargestellt (über ein Text- oder Nicht-Text-Symbol, über einen Text, der auf die Eingabepflicht hinweist, oder über Farbe bzw. Formatierung) …

Szenario II: Inhalte für jede Technik innerhalb eines P-Elements und sichtbare Überschriften, um die Anforderung SC 2.4.4 zu erfüllen

ARIA1: Verwendung der Eigenschaft „aria-describedby“ zur Bereitstellung einer beschreibenden Bezeichnung für Steuerelemente der Benutzeroberfläche

A. Anwendungsbereich:
Diese Technik gilt für:

• SC 1.3.1: Informationen und Beziehungen
• SC 3.3.2: Beschriftungen oder Anweisungen

B. Hinweise zur Unterstützung durch User Agents und assistive Technologien:
Siehe Hinweise zur Unterstützung durch User Agents für ARIA1.

C. Beschreibung:
Der Zweck dieser Technik besteht darin, zu veranschaulichen, wie die WAI-ARIA-Eigenschaft „aria-describedby“ verwendet wird, um programmgesteuerte, beschreibende Informationen zu einem Element der Benutzeroberfläche bereitzustellen. Die Eigenschaft „aria-describedby“ kann verwendet werden, um…

ARIA2: Kennzeichnung eines Pflichtfelds mit der Eigenschaft „aria-required“

A. Anwendungsbereich:
Diese Technik gilt für:

• SC 1.3.1: Informationen und Beziehungen

B. Hinweise zur Unterstützung durch User Agents und assistive Technologien:
Siehe Hinweise zur Unterstützung durch User Agents für ARIA2.

C. Beschreibung:
Das Ziel dieser Technik besteht darin, auf programmgesteuerte Weise anzuzeigen, dass das Ausfüllen eines Benutzereingabefeldes für die erfolgreiche Übermittlung eines Formulars zwingend erforderlich ist, wenn ein entsprechender visueller Hinweis vorliegt. Die Tatsache, dass das Element ein Pflichtfeld ist, wird häufig visuell dargestellt (über ein Text- oder Nicht-Text-Symbol, über einen Text, der auf die Eingabepflicht hinweist, oder über Farbe bzw. Formatierung) …

Szenario III: Inhalte zu jeder Technik innerhalb einer Liste und sichtbare Überschriften, um die Anforderung SC 2.4.10 zu erfüllen

ARIA1: Verwendung der Eigenschaft „aria-describedby“ zur Bereitstellung einer beschreibenden Bezeichnung für Steuerelemente der Benutzeroberfläche

1. Anwendbarkeit
   Diese Technik gilt für:
   • SC 1.3.1: Informationen und Beziehungen
   • SC 3.3.2: Beschriftungen oder Anweisungen
2. Hinweise zur Unterstützung durch User Agents und assistive Technologien
   Siehe Hinweise zur Unterstützung durch User Agents für ARIA1.
3. Beschreibung
   Der Zweck dieser Technik besteht darin, zu veranschaulichen, wie die WAI-ARIA-Eigenschaft „aria-describedby“ verwendet wird, um programmgesteuerte, beschreibende Informationen zu einem Element der Benutzeroberfläche bereitzustellen. Die Eigenschaft „aria-describedby“ kann verwendet werden, um…

ARIA2: Kennzeichnung eines Pflichtfelds mit der Eigenschaft „aria-required“

1. Anwendbarkeit
   Diese Technik gilt für:
   • SC 1.3.1: Informationen und Beziehungen
2. Hinweise zur Unterstützung von User Agents und assistiver Technologie
   Siehe Hinweise zur Unterstützung durch User-Agents für ARIA2.
3. Beschreibung
   
   Das Ziel dieser Technik besteht darin, auf programmgesteuerte Weise anzugeben, dass das Ausfüllen eines Benutzereingabefeldes für die erfolgreiche Übermittlung eines Formulars obligatorisch ist, wenn ein entsprechender visueller Hinweis vorliegt. Die Tatsache, dass das Element ein Pflichtfeld ist, wird häufig visuell dargestellt (über ein Text- oder Nicht-Text-Symbol, über einen Text, der angibt, dass eine Eingabe erforderlich ist, oder über Farbe bzw. Gestaltung) …