Alternative to @aria-describedAT: <a role=img>

Proposal for ARIA.next: <a role=img> and/or <a role=descLink>.

In more detail: Yesterday, I published a PROTOTYPE of an ARIA based 
long description link technique for the <img> element. [1] Based on 
what ARIA *currently* allows, this is the technique, in one sentence:

  An <a> element with @role=img and whose @aria-label
  contains an image description plus an announcement of 
  the long description link, is wrapped around the <img>.

This technique suppresses the 'normal' link announcement so that the 
image is presented as an image and not as a link. Hence, the need to 
explicitly state - in the aria-label attribute - that it is possible to 
activate the description link. 

Code example:
<a role=img href=u id=a aria-label=LinkText aria-labelledby='a i'>
   <img longdesc=u id=i alt=Alt-Text src=i ></a>
<!-- The @longdesc attributes seemed to be what made it work in 
  Jaws + IE8. BTW: The online version is perhaps a little more 
  elaborate, because I tested what actually worked in current ATs.
  As result the online example works in VoiceOver on OSX 10.5 and
  as well in NVDA + JAWS in IE8 + Firefox on Windows XP.  -->

Notes for HTML5:
 * It is forbidden in HTML5 - but not in HTML4 ARIA DTD - to give
   an anchor element IMG role. So, eventually, that must change.

Notes for ARIA.next:
1. Link announcement: If specced, then the AT itself could do the
   announcement so one could skip adding it in the @aria-label.
2. Globalization: The technique could be extended to any element 
   that can occur as child of an anchor element, as long as there
   is a suitable role for the anchor element. [Not all elements 
   do have a corresponding ARIA role.]
3. role="descLink": Instead of role=img, one could define a cousin
   to the 'link' role - e.g. role 'descLink'. This vould make it 
   simpler to extend the method to any element that can occur as a
   child of an anchor element, including elements which do not have
   a directly corresponding ARIA role - such as the table element.
   Example 1: <a href=URL role=descLink ><video></a>
   Example 2: <a href=URL role=descLink ><table>...</table></a>

Technique advantages: 
 * Keyboard focus is included for free.
 * Familiar: The <a> element is well known.
 * Host language native: uses <a>.
 * Useful, CSS-based hover and focus effects possible.
 * No longdesc duplication: Because the img role is moved to 
   the anchor wrapper, the child <img> element should not
   be presented to the user = the @longdesc is silenced.
   [ But of course: If AT lacks ARIA support, then there could
     be duplication. ]

Technique disadvantages:
 * A link wrapper impacts on which elements are permitted as
   child elements of the link: Nested links is a no no etc.
 * Competes with @aria-describedAT
 * Globalization might be difficult to achieve, because, while
   it is pretty simple to do <a role=img>, it might not be 
   that simple to do <a role=desclink>: The technique seems to
   need that the link has exactly the same role as the child 
   element that it 'replaces'. One way to solve that problem
   could be to introduce an attribute that inherits its role
   from the descendant. 

All in all, an Interesting idea or flawed? What do you think? 

[1] http://målform.no/blog/an-aria-for-long-description-links

-- 
Leif Halvard Silli

Received on Friday, 6 April 2012 03:13:00 UTC