Hello all,
I ran across a jQuery slider that made significant accessibility improvements to the usual .slider() function (see it here) and as I looked at the generated code, I saw really for the first time [url=http://www.w3.org/WAI/intro/aria]ARIA properties in use.
I haven’t been paying attention to ARIA until now because its name implies it should be used for interactive stuff… which generally I don’t work with. Often I can only see them on some page by viewing generated source, as they are added to widgets built by Javascript.
So I’ve been going through these Editor’s draft and pages like [url=http://www.paciellogroup.com/blog/?p=106]Paciello group to find out how to actually use these things, but it’s slow going, esp. the Editor’s Draft stuff. Authors may and may not do various things, but they don’t really show me how, where and why. Sometimes there’s a post at JuicyStudio that kinda helps, and many of these pages I can see how they are used in source (this is actually the main thing that helps, seeing the stuff in source), but I’m having trouble knowing what I should use for some particular situation.
Right now I’ve just added some roles to a few pages (arg the validators still don’t recognise ARIA stuff bleh… have to use the HTML5 validator and I’m not writing HTML5), but for instance I have a sidebar that’s specifically containing:
-a search form (with a role of “search” on it)
-a button (link) taking people somewhere else for more refined search (not sure what this page is yet, developer hasn’t built it, but it’ll likely be an elaborate form)
-a sequence of h2’s and unordered lists for various things, all related to the products specifically.
The rule of unchanging navigation is getting broken here: people choose a categorie and the sidebar on refresh now shows new options because of that categorie (will be shown in a breadcrumb though). Currently I was thinking of having a hidden header at the beginning of the h2’s/ul’s stating it’s basically a product list. But I wondered if there’s an aria attribute that does this as well, or one I should use somewhere to give a heads-up that the menu on the left has changed (I see this going on a lot in sites that sell a bazillion different categories of products). Trying to find out, esp for a static page (I mean, most aria things look like they are for applications and tools, which makes sense) is difficult. If I can see more actual code examples (I rely on these in the HTML and CSS specs, but there don’t seem to be code examples in the Editor’s Draft) it would be a big help.
Also any tips or experience using ARIA stuff in general would be helpful.
Thanks in advance