- From: Leif Halvard Silli <xn--mlform-iua@xn--mlform-iua.no>
- Date: Fri, 6 Apr 2012 05:12:24 +0200
- To: Richard Schwerdtfeger <schwer@us.ibm.com>, Steve Faulkner <faulkner.steve@gmail.com>
- Cc: W3C WAI-XTECH <wai-xtech@w3.org>
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