Intro to WAI ARIA
Home / News & Resources / Intro to WAI ARIA
disclaimer: I edited this and it's a link to my employer
Notwithstanding, few people write as clearly as Gez Lemon, and I think his Introduction to WAI ARIA is a masterpiece. http://dev.opera.com/...
(I commissioned it because I'd got wind of what ARIA was supposed to do, but as usual for me (cos I'm not a spec-head) I couldn't see the wood for the trees.)
_________________
www.brucelawson.co.uk
Web Evanglist, Opera, WaSP Accesibility Task Force
Study the Web Standards Curriculum
International Lothario (retired)
Share: 
As with the other articles in that series, it's far too long. I think this one is the worse of all for being overly verbose.
Also, the examples are ridiculous. Yes, ridiculous. Take this one:
| Code: |
| <h2 id="limg">Paragliding</h2>
<p id="dimg"> A long description of our paragliding trip ... </p> <div> <img src="takeoff.png" alt="Getting ready to take off" aria-labelledby="limg" aria-describedby="dimg"> </div> |
I suggest this:
| Code: |
| <h2>Paragliding</h2>
<p>A long description of our paragliding trip.</p> <p><img src="takeoff.png" alt="Getting ready to take off."></p> |
And take a look at this, near to the previous sample:
| Code: |
| <label id="lblef" for="effectiveness">Effectiveness</label>
<input type="image" role="slider" id="effectiveness" aria-labelledby="lblef" ...> |
| Code: |
| <label for="effectiveness">Effectiveness</label>
<input type="image" role="slider" id="effectiveness" ... > |
Clever use of HTML does a better job in nearly all the ARIA examples I've seen. It's really sad to see the new generation of web developers being given such bad advice. ARIA tutorials are the new XHTML propaganda.
Maybe Opera should employ me to put this nonsense straight?
_________________
My CV type thing and my Life of Ben (Blog). Nigel Peck's Accessify Forum Requirements.
Share:
Hi Cerbera
thanks for your comments. I'll not discuss the code examples; if Gez wants to, he can address your comments.
You make some editorial points which I will address, however.
Verbosity (like beauty) is in the eye of the beholder. As we were developing the article, I asked several times for expansion of several points for clarity, as I am someone new to ARIA, and as such, I'm a reasonable proxy for the intended reader.
If you've been hanging out on the accessibility IRC channel, then you're not a newbie and won't need the same level of explanation. As I think I've pointed out before, you are simply not the target audience.
You make the point that the lack of line break makes the article look like the ellipsis is part of the close bracket token. Perhaps. Although this article is for newcomers to ARIA, we do assume that readers know that there is no "..." token in HTML.
You dislike the indentation. Again, that's in the eye of the beholder; I personally like indentation, particularly in sample code, and research and my experience in computer book publishing suggests that readers do too.
_________________
www.brucelawson.co.uk
Web Evanglist, Opera, WaSP Accesibility Task Force
Study the Web Standards Curriculum
International Lothario (retired)
Share:
hey Ben, you are an arrogant prat and the reason why I don't bother with accessify forum any more. I don't take lightly your unwarranted and unnecessary denigration of my friends work. If I see you in the street I will nut you.
See Ya!
Note:
While it is true that I consider ben to be a prat and he is the reason why I don't bother much any more with Accessify forum , it was improper of me to suggest such a theatrical course of action that I have no intention of carrying out.
So better for me to say:
I don't take lightly your unwarranted and unnecessary denigration of my friends work. Next time I see you ben I will nut it out with you in person.
_________________
Steve Faulkner
Technical Director
TPG Europe
The Paciello Group | Web Accessibility Tools Consortium
Last edited by stevefaulkner on 06 Aug 2008 09:13 am; edited 4 times in total
Share:
That was a great read. Thanks_________________
creator of Talklets
Talklets ,
Share:
That was interesting. Thanks for that.
I have a couple of questions after reading it fairly quickly, so it may be I just missed something obvious and need to read the article again.
My understanding was that assistive technology understands <label for="…"> already so what's the advantage of including aria-labelledby alongside properly marked-up labels in forms?
Is aria-describedby the much-maligned longdesc attribute under another name, or does it do things that longdesc couldn't do?
The article talks about aria support in existing browsers, but what is support like in authoring tools like Dreamweaver?
_________________
Jim O'Donnell
work: Royal Observatory Greenwich
play: eatyourgreens
Share:
| eatyourgreens wrote: |
|
My understanding was that assistive technology understands <label for="…"> already so what's the advantage of including aria-labelledby alongside properly marked-up labels in forms? |
For simple web pages with regular forms, aria-labelledby doesn't have advantages over properly marked up labels. For simple web pages (with or without regular forms), there are few advantages to using ARIA (document landmark roles, menu roles, alert role, the aria-invalid and aria-required properties being the exception). ARIA is really for making Web applications accessible, where custom components are created, regions of the page are updated without a full-page request, or both.
When AT encounters a widget that it knows nothing about, it doesn't know to associate a label with that widget. The aria-labelledby attribute informs AT that a label is available for the custom widget, and can also specify more than one element to provide the label.
The reason I suggest using a regular label/for relationship when possible is that older assistive technologies won't understand ARIA; so wherever possible, it's wise to combine the two techniques.
| Quote: |
|
Is aria-describedby the much-maligned longdesc attribute under another name, or does it do things that longdesc couldn't do? |
It's very similar, but there are some differences. Unlike longdesc, the description provided by aria-describedby must exist in the same page. Unlike longdesc, more than one long description may be provided for a widget. And of course the aria-describedby attribute can be used by any element, not just images. As widgets are usually built using composite components, being able to provide a long description for any element (not just images) is important.
| Quote: |
|
The article talks about aria support in existing browsers, but what is support like in authoring tools like Dreamweaver? |
I don't know for definite, but it's highly likely that Dreamweaver and other WYSIWYG editors will provide support for ARIA.
_________________
Juicy Studio
Share:
| Quote: |
|
I don't know for definite, but it's highly likely that Dreamweaver and other WYSIWYG editors will provide support for ARIA. |
It would be good to have an answer from Adobe and other vendors directly about this. Perhaps it's worth asking them directly. I'll see if I can find anything out.
_________________
Blog:www.iheni.com
Web Evangelist Opera and Co-lead of WaSP International liaison Group
Share:
| iheni wrote: | ||
It would be good to have an answer from Adobe and other vendors directly about this. Perhaps it's worth asking them directly. I'll see if I can find anything out. |
That would be great - thanks, Henny. We're starting to see some aria attributes introduced to blogging software like WordPress, so I suspect (hope) we'll start to see more and more authoring tool support ARIA.
_________________
Juicy Studio
Share:
I wrote to Andrew Kirkpatrick http://blogs.adobe.com/... this morning to ask him, too._________________
www.brucelawson.co.uk
Web Evanglist, Opera, WaSP Accesibility Task Force
Study the Web Standards Curriculum
International Lothario (retired)
Last edited by brucelawson on 05 Aug 2008 11:12 am; edited 1 time in total
Share:
| brucelawson wrote: |
| I wrote to Andrew Kirkpatrick this morning to ask him, too. |
Ditto
_________________
Blog:www.iheni.com
Web Evangelist Opera and Co-lead of WaSP International liaison Group
Share:
| brucelawson wrote: |
| Verbosity (like beauty) is in the eye of the beholder. |
Doing File > Print Preview in Firefox 2.0.0.16 puts the article at 11 A4 pages. That's simply too long, imho. It would be about 20 pages in a book?
I haven't done precise word counts for the entire document. But from the parts I've checked, it seems the length is more to do with verbosity than useful explanation. For example, here is a paragraph with a couple of bullet points under the Web Applications heading:
| Gez Lemon wrote: |
Web applications try to emulate regular desktop applications, except web applications run inside another regular desktop application — a browser. There are also two fundamental differences between HTML and its communication model, and a regular desktop application:
|
| Ben Millard wrote: |
| Web applications run in your browser, acting like desktop applications. But desktop applications have a far richer set of interface controls. Desktop applications usually read from your PC's hard drive while web applications use a web server. |
If the article is aimed at newbies, sophisticated terms like "communication model" and perhaps even "emulate" are a bad idea? Simplest and clearest language FTW!
| brucelawson wrote: |
| Although this article is for newcomers to ARIA, we do assume that readers know that there is no "..." token in HTML. |
| gez wrote: | ||
|
| gez wrote: |
| The reason I suggest using a regular label/for relationship when possible is that older assistive technologies won't understand ARIA; so wherever possible, it's wise to combine the two techniques. |
I thought the better approach was to do as much as possible with HTML4's natively accessibility features? Repeating the associations HTML4 has already made by adding unnecessary ARIA attributes makes no sense to me.
My feedback is genuinely intended to improve the article. That's why I'm suggesting improvements. To those of you taking it seriously, thank you.
_________________
My CV type thing and my Life of Ben (Blog). Nigel Peck's Accessify Forum Requirements.
Share:
Ben, I find your posts a little verbose._________________
creator of Talklets
Talklets ,
Share:
| Cerbera wrote: | ||||
Indeed. So how come the sample I quoted from the article does exactly that? |
The example doesn't contain a simple form - it contains an input element with a type of "image" whose role has been set to "slider". The example markup you suggested would have worked, but only because the alt text for the image coincided with the label for the image. If the alt text was different, such as "thumb" (which would be valid for the image), it would not have worked. In order to complete the association, the aria-labelledby property is required so that AT knows to apply the appropriate label.
An input with a type of image has a default role of button. When AT encounters a button, it doesn't use a label - it uses the button name (in this case the alt text). In order to apply a label, you would have to use the aria-labelledby property - hence why I advocate it in this scenario.
| Cerbera wrote: | ||
|
The label would not have been associated with the widget in the example you quoted, which is why I chose an alt attribute that would have been sufficient if ARIA was not supported. I'm suggesting people use as semantic markup as possible, so it makes sense to use a label element for the label of a widget. Developers should provide a visible prompt for the widgets they build, and it's good practice to use a label element for prompts.
| Cerbera wrote: |
|
I thought the better approach was to do as much as possible with HTML4's natively accessibility features? Repeating the associations HTML4 has already made by adding unnecessary ARIA attributes makes no sense to me. |
I hope it makes sense to you that the accessibility features you are advocating would not have worked. The alt attribute would have masked the flaw in your reasoning with this particular example, but it's a fact that a label element would require the aria-labelledby property to complete the association in this example.
| Cerbera wrote: |
|
My feedback is genuinely intended to improve the article. That's why I'm suggesting improvements. To those of you taking it seriously, thank you. |
This surprises me. Your feedback has been far from constructive, and shrouded with self-promotion of your brilliance.
As an aside - as ARIA is intended to make web applications accessible, real-life examples quickly get very complex. That complexity isn't from ARIA, but from using compound elements with scripting to make it work cross-browser. A lot of the criticism aimed at ARIA has been about the complexity of examples, when the complexity has nothing to do with ARIA. To avoid putting people off with complex examples, I used very simple examples that people with a basic understanding of HTML would understand. Much of your criticism seems to be aimed at the fact I kept it as simple as possible, yet I've obviously not made it simple enough.
_________________
Juicy Studio
Share:
| gez wrote: |
| Your feedback has been far from constructive, and shrouded with self-promotion of your brilliance. |
Ben, irrespective of how you mean to come across, I am sorry to have to say I agree with Gez on this... maybe try and be a little less nit-picking and more constructive?
Remember that this is about people trying to help others, and accept that the real world isn't perfect - and those trying to help others maybe deserve a little praise, or at least to be cut a little slack...
_________________
Jack Pickard The Pickards Information Services| Blog | Twit
Share:
All times are GMT
You cannot post new topics in this forumYou cannot reply to topics in this forum
You cannot edit your posts in this forum
You cannot delete your posts in this forum
You cannot vote in polls in this forum