HTML5 and CSS3, Second Edition

10 activateTab(target.attr("href"));

• };


• };


• });
  };

varactivateTab=function(selector){

• 15


• 
  


• $("[aria-hidden=false]").hide().attr("aria-hidden", true);


• $(selector).show().attr("aria-hidden", false);
  };

configureTabSelection();

• 20


• 
  

On line 2, we hide the Services, About, and Contact sections. We also apply

the aria-hidden attribute and give it the value of true for each of the sections. On

the next line we apply the same attribute to the default Welcome section, but

with a value of false. Adding these attributes helps assistive technology discover

which elements are hidden, and it makes it really easy for us to identify which

sections need to be turned off and on when we do the toggle.

We capture any clicks of the navigation bar on line 5, and then on 7 we

determine which element was clicked. If the user clicked a link, we check to

see whether the corresponding section is hidden. The href attribute of the

clicked link can help us locate the corresponding section using jQuery selec-

tors, which you can see on line 9.

If it’s hidden, we call the activateTab() method, which takes a CSS selector. This

method hides everything else and then shows the selected section by using

jQuery’s show() and hide() methods. It also swaps the value for the aria-hidden

attributes.

That’s all there is to it. The screen readers should detect the region changes.

Falling Back

Like roles, this solution can be used right now by the latest versions of screen

readers. By following good practices such as unobtrusive JavaScript, we have

a simple implementation that can work for a reasonably wide audience. When

you’re doing any modification of the user interface with JavaScript, you should

apply ARIA roles to your elements to keep screen readers up-to-date with the

element’s state.

We often display data in tabular format, so let’s explore how we can ensure

that data is accessible.

report erratum • discuss

Creating an Accessible Updatable Region • 103

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