Friday, November 20th, 2009
Full Frontal ‘09: Todd Kloots on ARIA and Acessibility
Todd Kloots is talking accessibility and ARIA, with examples showing how YUI nicely supports these techniques. He explains how to improve in three areas: perception, usability, discoverability.
Can We Do ARIA Today?
Yes.
Firefox and IE (he didn't say which version) have really good support for ARIA. And Opera, Chrome, and Safari. Likewise for the screenreaders - JAWS, Windows Eyes, NVDA - also have good support. An the libraries - YUI, Dojo, JQuery-UI - all have good support baked in, one of the benefits of using ARIA is automatic support.
Improving Perception - ARIA and Screenreaders
Websites can have problems in perception when rendered with a screenreader; it's hard to get the big picture about what the words refer to. With ARIA, we can close the gap in perception. This is another example of progressive enhancement - augment the item by adding properties, markup or Javascript if required:
-
-
node.setAttribute("role", "menu")
-
node.role = "menu" // alternative introduced by IE8. IE-only, so don't use!
-
Improving Usability - Keyboard Focus, ARIA, and YUI support
Keyboard access. For some people, it's a necessity, and for others it's still an option or preference (think Vim). To support it, you must be able to tab to the element to get focus, so you should control tabbing with tabindex. A good application of controlling tabbing is, amazingly enough, moving through tabs. Another is modal dialogs; the browser doesn't "know" it's modal, so we have to control focus to make sure it doesn't slip out of the thing that's the only thing users should be able to click on!
Todd shows us just how many steps are required to perform a task in a complex application like Yahoo! mail, using just tabs to navigate through - 19 steps in this example, walking through the toolbar; and even more, when you consider the wider picture of entering the app in the first place. To help with this, he introduces a pattern whereby tabIndexes are updated dynamically to control what comes next, as you move through a toolbar. A negative tabIndex will ensure the element is skipped over.
You can also use the "focus" pseudoclass to ensure focus appearance is consistent for all elements. But, and it's a big one, it's not very well supported; even IE8 doesn't support :focus on <a>, for example. Doing it manually with Javascript has problems, in particular performance. Fortunately, PPK has worked out how to handle focus and blur with event delegation, so that it's much more performant, and the resulting technique is built into YUI3.
Device-independence with markup was also advocated to further improve accessibility:
-
-
<input role="menuitem" type="text/>
-
Improving Discoverability - ARIA
Essentially, this is about "random access" and keyboard shortcuts; jumping straight to areas in this page and activating them. The key ARIA feature here is "landmark roles" to identify particular points on the page. This is still something where users aren't aware of the feature, and Todd points out it's not surprising as most screen reader users are self-taught (just under 75% according to the study he showed). Also, not every user is a geek, and the same applies to screen-reader users.
I think it is also about semantic for acessibility enhancing tools. And its even easier to tag roles with jQuery (just pseudo code)
$(”#navigation,#content,#login”).each(function(index){
$(”#” + this).attr(’role’,this);
});
And thats just one feature of ARIA. You can define AJAX/Live regions where u define the real interesting areas when content changes and save screenreaders and even more important the listeners a lot of time. ;)
It does not have influence on layout or can destroy anything. A browser that does not support ARIA, will just ignore it.
One only sad thing is, that even the new designed W3C Validator does not have roles or aria tags. Seems that validation of ARIA enriched HTML documents with the standard DTDs is still not that easy.
For those who couldn’t make it to Brighton, Todd’s talk on YUI 3 and accessibility from YUICONF 2009 is here:
http://developer.yahoo.com/yui/theater/video.php?v=kloots-yuiconf2009-a11y
Zappos has a large selection flower girl dressesof handbags, ranging in size and shape, to accommodate anygucci handbags style preference. For a chic and gucci coin pursesophisticated look, Lodis Accessories? has an array of evening bags that are fashion-forward and quality made. If you are looking for more of an edgy-urban look, Tokidoki? or Harajukugucci card case Lovers? has colorful and eye-catching designs. Lucky Brand has a variety of fashionable and functional handbags that could be used gucci flap frenchas an everyday, throw-around bag. Whatever the occasion, Zappos cheap aion goldhas a handbag that you’ll love.
Excellent post,interesting article,thanks for sharing.
Gucci Handbags
gucci replica handbags
gucci women boots
Thanks!
kamagra. is a generic version of viagra. generic viagra is a drug that contains the same active ingredient of brand viagra, which is sildenafil citrate , but is marketed under different brand names, like buy kamagra. lovegra. is the medication that is specifically designed for the women to enhance the sexual pleasures.
The M-1965 Field Jacket , also known as the m65 jacket is a popular field jacket designed for the U.S. military. The m65 field jacket has been around for many years. It was introduced into US military service in 1965 to replace the M-1951 field jacket, an evolution of a Second World War design, the M-1943 field jacket. The m65 field jacket was widely used by United States troops during the Vietnam War in which the jacket became useful for troops serving in the Central Highlands of South Vietnam, as well as keeping a soldier warm from the cool weather conditions that came after monsoonal rains.
Learn how to make money on google , Easy Step by Step on How to Start Generating an income on google . earn google money, make money on google . copy software airline dog carrier viagra cialis tandem baby stroller redneck costume