HTML5 and CSS3, Second Edition

(singke) #1
specification have been rolled into HTML5,^2 while others remain separate and
can complement the HTML5 specification. Many screen readers are already
using features of the WAI-ARIA specification, including JAWS, Window-Eyes,
and even Apple’s built-in VoiceOver feature. WAI-ARIA also introduces addi-
tional markup that assistive technology can use as hints for discovering
regions that are updatable.

In this chapter, we’ll see how HTML5 and WAI-ARIA can improve the experi-
ence of our visitors who use these assistive devices. Most importantly, the
techniques in this chapter require no fallback support, because many screen
readers are already able to take advantage of these techniques.

We’ll cover the following techniques:


The role attribute [<div role="document">]
Identifies responsibility of an element to screen readers. [C3, F3.6, S4,
IE8, O9.6]

aria-live [<div aria-live="polite">]
Identifies a region that updates automatically, possibly by Ajax. [F3.6
(Windows), S4, IE8]

aria-hidden [<div aria-hidden="true">]
Identifies a region that a screen reader should ignore. [F3.6 (Windows),
S4, IE8]

aria-atomic [<div aria-live="polite"aria-atomic="true">]
Identifies whether the entire contents of a live region should be read, or
just the elements that changed should be read. [F3.6 (Windows), S4, IE8]

<scope> [<th scope="col">Time</th>]
Associates a table header with columns or rows of the table. [All browsers]

<caption> [<caption>Thisis a caption</caption>]
Creates a caption for a table. [All browsers]

aria-describedby [<tablearia-describedby="summary">]
Associates a description with an element. [F3.6 (Windows), S4, IE8]


  1. http://www.w3.org/TR/html5/dom.html#wai-aria


Chapter 5. Making Accessible Interfaces • 92


Download from Wow! eBook <www.wowebook.com> report erratum • discuss

Free download pdf