HTML5 and CSS3, Second Edition

allow key presses through to the web application. However, when the focus

is on static content, it could allow the screen reader’s key bindings to work

differently.

We can apply the document role to our blog by adding it to the tag:

html5_aria/blog/index.html

<bodyrole="document">

This can help ensure that a screen reader will treat this page as static content.

Falling Back

These roles are already usable on the latest browsers with the latest screen

readers, so you can start working with them now. Browsers that don’t support

them are just going to ignore them, so you need to test these with screen-

reading software on various browsers. You can’t just assume that by placing

these roles on the page, you’re ensuring they’ll work in every situation.

To try things out, you’ll want to test with JAWS, which is the most widely

used screen reader. Though JAWS is not free, you can get a time-limited

demo.^4 You’ll want to test JAWS with both Internet Explorer and Firefox, as

things behave differently in each browser.

A free, open source alternative called NVDA is becoming quite popular, and

you should consider testing with it, as well.^5

Roles help screen readers identify important regions or elements on a page.

They can also give the screen readers hints about the current state of an

element. But modern applications have dynamic content, and we can let

screen readers know that a page has updated. Let’s explore how that works.

4. http://www.freedomscientific.com/downloads/jaws/jaws-downloads.asp


5. http://www.nvda-project.org/

report erratum • discuss

Providing Navigation Hints with ARIA Roles • 97

Download from Wow! eBook <www.wowebook.com>