For many of us HTML as a language is expressed visually and often implicitly as graphical user interfaces (often dressed in fancy CSS threads). For others it is an aural and explicitly expressed language, one in which shape, color and decoration play little part, its meaning is conveyed by words and interaction behaviours.
Typical support patterns of HTML elements by screen readers:
- Identification of an element by role as the user moves through the content.
- Announcement of the text content of an element.
- Announcement of the start and end of an element.
- Change in voice as the content of an element is announced.
- Announcement of an elements accessible name and/or description
- Announcement of states and properties.
- Emission of a beep or other sound when an element with a particular state or property receives virtual focus.
- Instructions on how to operate interactive elements such as form controls.
- Navigation of elements by keyboard and “quick access” lists of a particular element, list items are linked to each instance of an element on the page.
Note: The combination of patterns supported varies from element to element and support for a particular element varies between screen reader software.
Example of aural UI of HTML heading elements
The h1-h6 (heading) elements are imbued with visual semantics due to their style, and placement in the context of other content, but styling is a weak semantic, as is placement alone, and there are no rules or best practices about maintaining any visual style to indicate a headings style is an expression of its role in document structure. In fact the whole point of CSS is to allow developers to modify the default styles of HTML elements.
But the aural semantics of a heading are explicit and robust, regardless of its style in the document a <h1> is a <h1>, is a <h1>… unless overidden with ARIA. This why there are a set of document conformence rules for use of ARIA in HTML, to guide and constrain developers use of ARIA, so as not to screw up the native semantics of HTML.
Aural UI of h1-h6 elements on a test page:
“text content of heading, Heading level 1″
“text content of heading, Heading level 2″
“text content of heading, Heading level 3″
“text content of heading, Heading level 4″
“text content of heading, Heading level 5″
“text content of heading, Heading level 6″
Example of navigation features for h1-h6 elements provided by a particular screen reader:
- List Headings INSERT+F6
- Next Heading H
- Prior Heading SHIFT+H
- First Heading ALT+INSERT+HOME
- Last Heading ALT+INSERT+END
- Next Heading at Level – number keys 1 through 6
- Prior Heading at Level SHIFT+1 through 6
- First Heading at Level ALT+CTRL+INSERT+1 through 6
- Last Heading at Level ALT+CTRL+INSERT+ SHIFT+1 through 6
If you would like to hear more; the Aural UI of the Elements of HTML is a work in progress that aims to document how aural user agents bring HTML to life for their users. Forks and pull requests welcome!
