Testing Accessibility Feature: aria-describedby
Posted by Kyle Weems on September 05, 2009As I discussed on Monday, I’m working towards making this site more accessible. I’m starting with creating access to the comic for visually-impaired visitors, although I know that’s likely the tip of the iceberg when it comes to making something truly accessible.
Today I finally set up a system for linking a transcript of the comic via an aria-describedby attribute on the comic’s image tag. As I learned, making a transcript is a time-consuming process. So far, only the most recent comic has a transcript, and it took me well over a half hour to do with little outside distraction. I can understand, then, one major barrier to accessibility being more common on the Internet: laziness.
It’s easy enough for me to consider that my comic has a very small cross-section of people that it’s targeting: web designers and developers. Of that demographic, even less have accessibility issues significant enough to prohibit them from enjoying the comic (or in some cases like deafness, the comic doesn’t have any feature that they’d be missing out on without added support). But the fact is, if even one person is interested in my work, and they can’t experience it because of a barrier that I should be trying to help overcome, then I’m doing something wrong.
Over the next few days or weeks (depending on how much free time I have for the project) I’ll continue to make transcripts for the past comics. All future CSSquirrel comics going forward will have a transcript created when it is first made.
If you’re a person who makes use of screen readers, can you take a chance to examine comic #34 (Squirrel in the Dark) and tell me if the feature is working correctly, or if there’s any other work I should make to enhance it? I’d appreciate that very much.
Well, one other major barrier is simply: time is money. its not only laziness, but also a question of time, at least for a free lancer. Sadly most of clients rather look for the money they pay then for the people using their sites in the end.
the other thing is, same as with standards before, the low education on the topic. it can be difficult to find some good and easy (enough for non natives) to read docs on that.
do you have suggestions? I am honestly far behind the level of knowledge I would want to be.
[...] http://www.cssquirrel.com/2009/09/05/testing-accessibility-feature-aria-describedby/ a few seconds ago from web [...]
@taotsu you raise an interesting point. What kind of information are you suggesting is missing or unclear? Accessibility advocates know that education is the key, and if there is a hole out there that needs plugging we’d love to do so. If you had 5 questions you could ask about creating longer descriptions and/or using aria attributes (aria-describedby or others) what would they be?
@John
sorry for checking back so late (as i said time is money ^-^)
Well, where to start!? as I said i am not firm on the topic, I would even admit that my knowledge goes to 0. The problem is to read docs on the topic can be (and is usually) not only time consuming, but also kinda boring, i am honest. I don’t even really know how aria works (ok, i go to the corner and be embarrassed till sun set)
so before i can define 5 questions, i need to find one introduction and some further readings to get the actual basics (and not only theory).
but sure this is the wrong site to discuss this (sorry Kyle!!, but thanx to inspire me to put more effort into learning about it!)
@Taotsu – Feel free to keep discussing the topic here if you’d like. It’s educational for me, and will help me to refine the site.
Hi Kyle,
(just as an aside: I don’t know how a screen reader user can comment here with you squirrel captcha on comments – feel free to get in touch with me via email directly and we’ll talk at length, I don’t have the time at the moment).
Now for the point of this post.
1. I’m using Patrick Lauke’s longdesc extension for Firefox (https://addons.mozilla.org/fr/firefox/addon/273) and of course this does not use the aria attribute. Why am I right-clicking the image in the first place, you ask? I don’t know. Habit, maybe. Heh.
2. When using FF3.5 + NVDA, the aria-describedby attribute is not declared, whereas it is in MArco Zehe’s test page decribed here: http://www.marcozehe.de/2008/03/23/easy-aria-tip-2-aria-labelledby-and-aria-describedby/
Looking into the ARIA spec, this attribute should only target IDREFS, AKA unique elements’ IDs. So I’m pretty sure the mechanism you’re looking for cannot be achieved by a URL, as it is not a legal value for this attribute.
@Stéphane – The CAPTCHA has description-based alternatives to the graphic elements. Screen-reader using visitors have left comments, so I know it’s possible to defeat the CAPTCHA with them. I am currently unsure how usable it is, however (I’m going to have a phase of upgrades involving helping ensure it’s not an undue burden or barrier).
With the longdesc extension for firefox, were you able to access the transcript file via the longdesc attribute?
Re: aria-describedby, I’m using code based off an example provided to me by John Foliot. If anyone notices a mistake in how I implemented that example, let me know so I can correct it. I am fairly positive that URLs are valid, but I’ll admit I haven’t been too thorough in investigating that yet.
@Kyle,
Now’s a better hour for my taking time about the captcha
What I found felt “wrong” is that the links and the form did not tab lineraly from one to the other when I filled it earlier today. I tried tabbing through the whole page and I was expecting this:
1. name
2. email
3. website
4. the 3-link captcha
5. the comment field.
Yet what I got was not in this order, because you added tabindexes to your form. I’d suggest removing them, but you may have good reason to keep them in place. I’d be interested to know why you coded it that way.
Sorry to have strayed away so much from this post’s topic, by the way. I hope you don’t mind.
About the aria-describedy property, I looked up the information in the spec, actually: http://www.w3.org/TR/wai-aria/#aria-describedby
It does say IDREFS, so maybe John was thinking that you’d provide the longdesc somewhere on the same page (which is an option I’m going to investigate soon, as it’s most of the time a pain to implement a separate page for the longdesc on many CMS’s anyway).
@Stéphane – Don’t worry too much about going off-topic. Especially since accessibility is the topic here.
I did not add the tabindexes on the form, or anywhere else on the page for that matter. As a result, I didn’t realize it was doing that. I just tried tabbing through, and was equally stumped by the results as you were.
Now that you’ve brought this to my attention, I’ll probably take a hammer to whatever part of the blog code contains those tabindexes.
Regarding aria-describedby, I also recently looked it up today and came to the same result you did. I do know that John specifically advocated a URL, however (his code was fairly specific), so I’m unsure on the reasoning for the variance between the two. I’ll have to explore that topic to see if there’s good reasoning for it. (Frankly, I have a slight preference for putting the transcript off-page, but I’m mulling over adding it as an invisible addendum.)
I, like you, think longdesc is most of the time fitting in another page rather than as an addendum. It would be a kind of electronic stutter, for lack of a better wordto express what I think. (ah, english, thou betrayest me!)
I love the idea of “accessibility with a hammer”. I’ll reuse it someday, and quote you