Getting a handle on ARIA

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

“Home”. When you create a label, the label is sent to webvisum (they store it) so others logged in can access those same labels (or edit them or whatever). “Community tagging”.

It’s kinda wikipedia-esque. So it’s got all those flaws, except random teenagers can’t come in and label a link as “Joe Hanson is so gay” or whatever : )

And, I might have just lost my password, lawlz. Normally I never let browser addons remember my passwords, but this was the one. So it was sitting there automatically logging me in all the time but I couldn’t actually remember what my password was so I requested a new one… and it hasn’t been mailed yet, and the old one already won’t work anymore. Stupid me.

If I get a new password in the mail, I should be able to give you an invite if you want. It does mean to use it you’ll need a Mozilla browser.

The idea behind it is awesome: let the community free themselves as much as possible from the shackles of bad web authors. I’m a little worried that they seem to have moved over to a Wiki System for most of their links but haven’t implemented it.

On the Orca mailing list they were discussing stuff Orca should and should not read out, and one guy said something like “that’s what ARIA was created for”. But ARIA, like general Good Web Authoring, relies on the author, and as we see as we look around us, most websites are written as steaming piles of nasty nasty codes. So long as browsers render garbage, authors don’t have any reason to change how they write. Why let those using assistive devices dangle? The idea that they can make sites better themselves is appealing. Again with all the caveats and issues that may come with that.

Yes, JAWS 10+ is supposed to support landmarks. I was talking about standard keyboard navigation. From reading the ARIA Primer, it seemed as though you could jump around like you can with JAWS, but not using it. I am talking about users that do not use the mouse do to limited mobility, carpoltunnel, etc.

I am in the same boat as you. I am especially interested with the keyboard enhancements, but everything I have read has been like “you can add roles such as navigation to divs to allow people to jump straight there, which eliminates the use of skip nav links!” When I read that, I am like OMG, how?? I have not found any examples of that in use. Last week I read how because of ARIA we can do tabindex=“-1”. I only found that out due to a post by Jim Thatcher on the IE in-page link bug, which lead me to read about ARIA. I have known about ARIA for about 2 years, the only real usage I have known it for was the live region update notification for screen readers.

they read the page linearly.

with how much (how long) experience? I’m not sure how long I’d put up with using only the tab key before I gave up on the interwebs entirely. Quick-keys are easy to learn (there’s usually only a handful of them) and are at the beginning of tuts/explanations. I consider my usage pretty newbish, but I use H and N and my SayAll on/off keys a lot. Orca’s pretty cool in that, if you hit a block of links (like a navbar), Orca considers it one “line” and one down arrow and you’re past them. Not sure how many Orca users there are compared to the Big 2/Windows or NVDA though.
While my skip links can be used by reader n00bs, I’ve always considered them a smaller set of low-vision visitors than in general (I’m 99% sure I actually don’t have a single low/no vision visitor to any of the sites I build for work, but…).

I finally ran across an article written by Gez for dev.opera.com which does finally make some sense, and links to some good stuff like Marco’s blog at the bottom.

Since for example I’m already using for attributes on my labels matching my id’s why would I use aria-labelledby? Marco’s bloggy post shows an example where it would be very useful (what if label text is on both sides of the input?) which, it turned out, I have in some forms! I’ve already added them. Watch out, it will override your label’s for attribute!
The aria-required attribute also sounded like a much nicer deal than using title attributes on the inputs when I was restricted to little * marks everywhere.

If anyone else has run across nice ARIA explanations like these ones, with code examples and examples of when they would be useful, post them here.

Let’s take your home example, you are from Netherlands, you speak Dutch natively I assume… wouldn’t you label home whatever the word is in that language? Me not knowing Dutch would not get help by labels.

I hadn’t thought of it really, when I’m visiting Dutch-language pages I would give them Dutch labels, when I’m visiting English-language pages I would give them English labels. I dunno if anyone has swapped languages. I’m sure the spelling’s not so great though : )

lawl about lost pw, you should just use one password - Balmer (I think he said that)

shudder sounds like something a salesman would say. I used to use one password for everything but I’ve slowly been converting them over to uniques, so now only the occasional old thing ends up having an old password.

Anyway, I got a new one, could log in, let me know if you want an invite. Yeah it totally sucks that’s it’s Mozilla-only, and their reasoning for that was something like “it’s the browser of the future” or some crap… bleh. I can understand it not working for IE, nobody wants to reverse-engineer IE (like the JAWS guys had to do), but the other browsers (except Opera) are open-source.

^^ARIA is for what?

The mail’s been deleted : ( but the discussion was about what if a virtual buffer were added to Orca (it doesn’t have one and seems better off without one but people wondered if it would speed up with one) and then someone said what about having Orca state when certain languages were in the document and then it went way off-track… and somewhere I said I would want to know when stuff like AJAX is going on on the page or if stuff’s getting updated under my nose and someone else said that that was what ARIA was for (which is certainly one of the reasons it was created). I just wouldn’t want to rely on it being there. If my browser or my reader can detect that there’s stuff going on, I would personally want the option to have that announced to me.

I really think ARIA has GREAT intentions, but has too much happening, they have roles that are similar so people aren’t sure which to use. I saw somewhere where it seemed to say links should have roles too. Ok I would say that is too far and pushing too much onto a dev.

Yes. So far I’ve only been using landmark roles because they’re announced right away on page load and it can be a nice way to get to a section of page content based on what it is whether there’s a skip link or not (as a developer I have a difficult time with skip links, because some browsers won’t bring your focus down to the area unless you have a focusable destination! Meaning I have a lot of empty anchors playing “destination” and I don’t use “name” attributes (because of how I originally learned XHMTL) so they have id’s… I would just jump to some id’d box if I could but I don’t like how not everyone acts the same).

So, I still have skip links, but if something else can work better, I’d like to add it. I have used a little bit of aria-labelledby for labels with units on the ends like in Marco’s blog (that’s just awesome) but yeah, you could label just about everything and usually this means adding id’s to stuff who don’t have id’s.

So I haven’t been using stuff like aria-labelledby for plain label-input pairs, because I’m already using for with the input id anyway, and ARIA overrides that. Meaning, adding id’s to the labels. Starts turning into code bloat real fast.

What kinds of roles did they want for links? I’ve been using titles for example to warn that a link opens a PDF (and I state the size and pages), or goes to another site (off-site external links) if the link is just sitting in the middle of content and it would be unexpected, so I wonder if these roles were meant to take care of these?

I have built more than one form where the client wanted people to download some kind of file in the middle of it. I don’t like the idea of other stuff in forms, but if I have to have them in the middle of a form, anything that helps make clearer what’s going on is something I’m interested in.

That aria-required is just so nice. The old crusties might know “star” usually means “required” but anyone new to the web or web forms, that has little meaning.

But I think the most use of ARIA is meant for all the jQuery-type stuff going on everywhere and AJAX messing with page content. If some web author is going to insist visitors must drag-n-drop (arg), then ARIA can make that actually possible by keyboard users with a11y software (too bad it can’t do much for plain keyboard users).

Let’s take your home example, you are from Netherlands, you speak Dutch natively I assume… wouldn’t you label home whatever the word is in that language? Me not knowing Dutch would not get help by labels.

lawl about lost pw, you should just use one password - Balmer (I think he said that)

I haven’t used firefox really in months, it got too bloaty… I use chrome mainly.

The idea behind it is awesome, I wonder how much or if it get abused…

On the Orca mailing list they were discussing stuff Orca should and should not read out, and one guy said something like “that’s what ARIA was created for”. But ARIA, like general Good Web Authoring, relies on the author, and as we see as we look around us, most websites are written as steaming piles of nasty nasty codes. So long as browsers render garbage, authors don’t have any reason to change how they write. Why let those using assistive devices dangle? The idea that they can make sites better themselves is appealing. Again with all the caveats and issues that may come with that.

^^ARIA is for what?
I really think ARIA has GREAT intentions, but has too much happening, they have roles that are similar so people aren’t sure which to use. I saw somewhere where it seemed to say links should have roles too. Ok I would say that is too far and pushing too much onto a dev.

I am moderately interested about the link labeling. I am concerned about whos labels persist. Say i cannot say home, so I label it root. you visit the site, you’re like how dumb and make it home. When I come back will it be root or home?

I heard of webvisum, I am kind of skeptical about the plugin. If I was a spam bot creator, I could grab that to get past things like Craig’s List.

How long did users keep sticking to the tab or arrow keys?

Depends on the user. Then again as a responsible consultant, I would suggest the best thing for them. If the person doesn’t have speech impediments, I would suggst using Dragon Naturally Speaking instead.

In my experience, unless the user is at higher level of using the screen reader, they read the page linearly.

Ah, I see what you mean. I didn’t have that idea, because ARIA attributes were made to talk to a11y software, so as far as I know there’s no special keyboard attributes (unless you use javascript with neg tabindex).

Skip links I’m still putting in, as usual, for sighted keyboarders. Screen reader users beyond real basic stages could always get around without them if the page is well-written.

I heard of webvisum, I am kind of skeptical about the plugin. If I was a spam bot creator, I could grab that to get past things like Craig’s List.

Webvisum is awesome. All those crappy sites using images for menu items? You can label them with appropriate text after you know where the link takes you. Anyone else with WebVisum has access to that label, and they can edit yours if there’s a better name.

The CAPTCHA thing I use myself. I suck at captchas. However it cannot do them all.

You can’t just sign up for webvisum. To help keep spammers out, it’s invite-based. You can also report someone if they spam with a bot. If I were a spammer, I’d just use a mechanical turk anyway. People answer a short question for free pr0n or whatever.

Oh, I should jump in an give it a try then.
I wish webvisum wasn’t a Mozilla-only plugin : (

BTW my question about experience wasn’t about yours, but I meant users. How long did users keep sticking to the tab or arrow keys? I’d die.

I use Opera off and on. Without getting personal, I basically don’t like the hotkey layout to use it a lot. I have been navigating websites via keyboard almost since I got online in 95/96, so I just know what works.

JAWS and Opera play better and better with every version…

Oh, I’m surprised you don’t use Opera then.

While I can never ever keep the keys straight (I have to look it up every single time arg), if I always only navigated with keyboard I’d prolly always use Opera.

though I can’t use Opera with Orca and I’m scared to try it with JAWS, lawlz.

I have been working in AT for about 7 years. I know people who have used JAWS since it came out to people who have not used a screen reader until I showed them moments prior.
Being a person who navigates the computer via keyboard about 85%+ of the time, I have to rely on the tab key. Newer browsers allow carrot navigation, and i can cheat a little there, but nnot many people know about that.

The tabindex thing I haven’t used yet, though if I’d known about it back in the days when I asked questions like “Can I put an onClick event on a non-focusable thingie??” and everyone was like, yes, the JS specs say any element can have CLICK, and I was like but how do you click on something if you can’t focus on it?? Negative tabindex, lawlz. Wish I’d known.

I know you can navigate using the landmark roles in Orca, but I suck using Orca. I think tomorrow I’ll add a few more roles to a page I’m working on and browse around in JAWS… I’ve got version 10 which supports roles.

When this jQuery slider-thingie is done I’m going to take a listen and see if I can figure out how to use them (the sliders)! And will report them back here. I’m using the one from Filament Group.