WAI-ARIA Techniken

Diese Seite listet einige noch in Entwicklung befindliche WAI-ARIA Techniken auf, die im Rahmen der HTML5-WAI-ARIA Task Force der WCAG Working Group erarbeitet und zum Teil mit Screenreadern getestet wurden.

Anmerkung: Einige der Beispiel-Testseiten enthalten nur den Code des Beispiels und keine Navigation - bitte benutzen sie in diesen Fällen die Zurück-Taste Ihres Browsers.

Using aria-expanded

• html-techs tf draft Using the WAI-ARIA aria-expanded state to mark expandable and collapsible regions
• Example 1: Using aria-expanded to indicate the state of a collapsible element | code only

Using Aria role=dialog

• html-techs tf draft "Using Aria role=dialog to expose a custom dialog (pop-up div box)"
• Example 1: Using Aria role=dialog to expose a dialog (pop-up div box) | code only
• Variant 1a: Using Aria role=dialog (focussing button inside dialog, triggering link with role="button") | code only

Using aria-label to provide an invisible label

• html-techs tf draft "Using aria-label to provide an invisible label"
• Example 1: aria-label 1 ("The spelling quiz") | code only
• Example 2: aria-label 2 (div box with 'close'-button, code only)
• Example 3: aria-label 3 (step-wise incrementation of text input value, code only)
• Example 4: Using aria-label to compensate for a missing alt attribute on an image (not a recommended practice!)

Using aria-labelledby to concatenate a label from several text nodes

• html-techs tf draft "Using aria-labelledby to concatenate a label from several text nodes"
• Example 1: aria-labelledby 1 ('Set timeout' input label, code only)
• Example 2: Using aria-labelledby for simple table with text inputs | code only
• Example 3: aria-labelledby 3 (Conference workshops timetable, code only) | Testing results of variations

Using aria-labelledby for link purpose

• html-techs tf draft "Using aria-labelledby for link purpose"
• Example 1: Using aria-labelledby for link purpose ("Read more" link) | Code only
• Example 1, variant with tabindex="-1" | Code only
• Example 2: aria-labelledby for file type ('Sales report', File name and type concatenation) | Code only

Using aria-describedby

• html-techs tf draft "Using aria-decribedby"
• Example 1: Using aria-describedby to add a description to close button | Code only
• Example 2: Using aria-describedby to add a description to a text input field | Code only
• Example 3: Using aria-describedby to add link context from nested list content

Using aria-flowto

• html-techs tf draft "Using aria-flowto"
• Example 1: Using aria-flowto to offer a choice of reading order | Code only