Web Design News | WAI-ARIA Gets Ready for a Starring Role in HTML5

Step 1

Enter your contact information.

Step 2

Enter your project information.

Step 3

Choose the PHP programmers you want to hire.

Compare Free PHP Quotes

WAI-ARIA Gets Ready for a Starring Role in HTML5

Attention PHP Programmers - Add A Free Listing! Get more clients.

masks WAI-ARIA, the W3C’s specification for Accessible Rich Internet Application, provides web developers with a means of annotating page elements with the roles, properties, and states that define exactly what those elements do. The added definitions help screen readers and other assistive devices navigate through your website.

We’ve previously looked at how WAI-ARIA can help you build more accessible websites, and showed you how the role attribute can help browsers understand what an HTML element is being used for. Nice as both of those techniques are, neither is much help if browsers and screen readers don’t support them.

In the past, support for WAI-ARIA has been spotty, but as Web Accessibility Consultant Steve Faulkner recently found, WAI-ARIA’s landmark roles are now well supported in nearly every browser and screen reader. There are a couple of exceptions to be aware of, namely role="form" is not widely supported, and the older Window Eyes 7.5 screen reader hasn’t been updated (and likely never will) to support roles.

Still, despite the lack of the support in Window Eyes 7.5, WAI-ARIA roles are largely ready for prime time. That means you can start using roles in your HTML5 today. For example, you might have something like this for the main navigation on your site:

<nav>
    <ul>
        <li>Home</li>
        <li><a href="/about/">About</a></li>
        ...etc...
    </ul>
</nav>

While it might seem that the nav tag would define the nav element’s role, not every browser will understand it. (Just because the browser can display it, does not mean it understands the tag.) Also, the purpose of a navigation element may be obvious to most users, but to a screen reader being used by somebody who can’t see, the navigation strip could be just a jumble of words. Leveraging WAI-ARIA’s syntax, we can double up to ensure screen readers will know that this chunk of code is navigation:

<nav role="navigation">
    <ul>
        <li>Home</li>
        <li><a href="/about/">About</a></li>
        ...etc...
    </ul>
</nav>

Of course there are other benefits to adding roles to your page, like the ability to style the elements with CSS. Sticking with the example above, we could target this specific nav element using code like this:

nav[role="navigation"] {
    margin: 0
    ...etc...
}

Using roles to style your CSS eliminates the need for extra IDs or classes and often makes for more readable CSS since the role definitions are easy to understand, even years later.

Of course, while browser support has improved significantly over the last year or so, WAI-ARIA roles are not without a few glitches and gotchas. Be sure to read through Webmonkey’s earlier post on building a more accessible web with WAI-ARIA, and of course, look over the W3C’s WAI-ARIA role spec, which has more examples and guidelines for when and where to use WAI-ARIA roles.

Italian Masks photo by Peter Lee/Flickr/CC

Source http://www.webmonkey.com/?p=52832
Tue, 29 Nov 2011 14:19:52 GMT
Tags: HTML5, WAI-ARIA, Web Standards,

Attention PHP Programmers - Add A Free Listing! Get more clients.

HTML5

HTML5 for Web Developers

If you’ve ever tried to wrestled your way through the complexities of the HTML5 specification, we’ve got good news — there’s now a “web developer edition.” The main HTML5 spec can be overwhelming for web developers tryi

Microsoft, Mozilla Battle Over What Makes a ‘Modern’ Web Browser

Microsoft and Mozilla are trading barbs over the coming Internet Explorer 9. Microsoft has been touting its HTML5 support in IE9, claiming that it renders HTML5 better than Firefox (and Chrome, Safari and Opera). Mozilla then turned around and released an

HTML5 Will Be Done in 2014, What Comes Next?

Web developers were given a green light Monday to start using HTML5. Even though many are already using the still-unfinished language to code complicated web apps, the web’s governing body made the transition official by announcing that HTML5 will b

WAI-ARIA

Web Standards

Members:

Sacramento

Technicate Solutions, Inc

Technicate Solutions, Inc. is a fast-growing IT Consulting firm servicing the Sacramento area and beyond. We combine innovative technologies with business savvy to make successful projects happen.

Sacramento, California US

Dumaguete City

RetiredCoder

I retired 4 years ago at 32 & I'm now living in the Philippines. With 16 years experience in PHP/MySQL/JavaScript development, my passion is code. My work always exceeds expectations.

Dumaguete City, Central Visayas PH

Nashville