3needs: WAI-ARIA techniques with code examples

WAI-ARIA techniques with code examples (and User Agent notes)

This page links to draft WAI-ARIA techniques and code examples, mainly to check the extent of screen reader support. Some techniques are draft entries in the W3C Wiki of the HTML5 & ARIA Techniques task force of WCAG WG.

Note: Some of the test pages for the examples may be without any navigation - use the browser back button to return.

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-technique "Using aria-labelledby to concatenate a label from several text nodes"
Example 1: ('Set timeout' example of concatenating a label)
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

Using `role="status"` to communicate content updates

html-techs tf draft "Using role=status to present status messages"
Example 1: Using role=status when updating counter (this is an extension of the Paciello Group example in Screen reader support for ARIA live regions).

Using `aria-current`

Using aria-current

Navigation

Service

Content sections

Breadcrumb path

Content

WAI-ARIA techniques with code examples (and User Agent notes)

Using `aria-hidden`

Using `aria-expanded`

Using Aria `role=dialog`

Using `aria-label` to provide an invisible label

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

Using `aria-labelledby` for link purpose

Using `aria-describedby`

Using `aria-flowto`

Using `role="status"` to communicate content updates

Using `aria-current`

Navigation

Service

Content sections

Breadcrumb path

Content

WAI-ARIA techniques with code examples (and User Agent notes)

Using aria-hidden

Using aria-expanded

Using Aria role=dialog

Using aria-label to provide an invisible label

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

Using aria-labelledby for link purpose

Using aria-describedby

Using aria-flowto

Using role="status" to communicate content updates

Using aria-current

Using `aria-hidden`

Using `aria-expanded`

Using Aria `role=dialog`

Using `aria-label` to provide an invisible label

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

Using `aria-labelledby` for link purpose

Using `aria-describedby`

Using `aria-flowto`

Using `role="status"` to communicate content updates

Using `aria-current`