Re: ARIA roles added to the a element should be conforming in HTML5.

On Wed, Oct 21, 2009 at 9:17 AM, Steven Faulkner
<faulkner.steve@gmail.com> wrote:
> Currently the a element is defined in the HTML5 specification as an element
> that cannot have its native role overriden by ARIA roles [1]
>
> This is contrary to use in the wild as it has been overriden by the addition
> of a number of roles in popular javascript UI libraries.
>
> Examples:
> button
> http://jqueryui.com/demos/dialog/

Isn't it an abuse of <a>? Why not use a <span> of <div>? (with
tabIndex=0 or tabIndex=-1 to make it focusable)
(we're talking about the "close dialog" button, right?)

> http://developer.yahoo.com/yui/examples/carousel/carousel-ariaplugin_source.html

I'm by no mean an ARIA or even accessibility expert (and I know you
are one) but I don't understand why the <a
class=yui-carousel-pager-item> couldn't be role=link. Actually,
because they're not in the original markup, I don't understand why YUI
uses an <a> instead of a <span>; to me a carousel is just a kind of
tabpanel, so those yui-carousel-pager-item should be role=tab; or if
you consider that it only scrolls the "carousel content", then
consider the "pager" to be a kind of scrollbar and use role=slider or
role=spinbutton; something like:
   <div role=slider aria-valuemin=1 aria-valuemax=4 aria-valuenow=2
         aria-label="Page:" aria-controls=carousel>
      <span class=yui-carousel-pager-item></span>
      [...repeat for other items...]
   </div>

> tab
> http://developer.yahoo.com/yui/examples/tabview/tabview-ariaplugin_clean.html

Shouldn't the <li> be role=tab? and then either the <a> isn't a
problem in practice or it could be removed completely (you'd add a
tabIndex=0 to the <li> then to make it focusable)
as in http://codetalks.org/source/widgets/tabpanel/tabpanel1.html
(referenced from http://www.w3.org/TR/wai-aria-practices/#tabpanel )

> menutiem
> http://developer.yahoo.com/yui/examples/menu/menuwaiaria_source.html

Same as above, and I'd consider it an abuse of <a>: they're obviously
not links! (particularly, in this case, because they link to elements
that doesn't even exist in the DOM until you click on them!)

> It is important to understand that it is not ARIA that is making the link
> into a button, its the developers use of javascript, event handlers and CSS
> that is making it look and act like a button or tab or menutiem. The
> addition of ARIA is merely providing the information that other users get by
> default. So making the addition of an ARIA role non conforming, to an
> element that has been designed to act and look like something other than its
> native role, is not the appropriate repsonse.

The fact that the developer can technically turn an <a> into a button
isn't a justification for making it conforming. If it's not a link but
a button, you should use <button> or <span role=button>.


-- 
Thomas Broyer
/tɔ.ma.bʁwa.je/

Received on Wednesday, 21 October 2009 09:30:04 UTC