«
»

ARIA Link

Jul 12th, 2011 at 10:15 am

ARIA’s role=link can be used to create a link from almost any HTML element.

The developer is responsible to create a keyboard and mouse interface. And also style the element to look like a link. TabIndex=0 will put the new link into the tab order, but a keyboard handler needs to be created that will accomplish the following:

  • Tab moves focus to the Link. A second tab moves focus to the next focusable item.
  • Space or Enter executes the link.
  • Shift+F10 is used to bring up an associated Popup Menu.

JAWS announces this as a link

Example 1:

tabindex="0"
style="text-decoration: underline"
onkeyup = "ARIA_Role_Key(event,'http://www.websiteaccessibility.com');"
onclick="alert('URL = http://www.websiteaccessibility.com');"
>
This is a div using the ARIA role=link attribute.

Code


function ARIA_Role_Key(event,URL) {
  if((event.keyCode == 13) || (event.keyCode == 32)){
    alert("URL = " + URL);
  }
}
<div role="link" 
tabindex="0" 
style="text-decoration: underline" 
onkeyup =  "ARIA_Role_Key(event,'http://www.websiteaccessibility.com');"
onclick="alert('URL = http://www.websiteaccessibility.com');" 
>
This is a div using the ARIA <code>role=link</code> attribute.
</div>

Works With

role=link
Browser Screen Reader Results
IE 9 JAWS 12 Yes, JAWS announces “Link”.
FF 5 JAWS 12 Yes, JAWS announces “Link”.

Standards:

  • WCAG 2.0 SC 4.1.2 Name, Role, Value: For all user interface components (including but not limited to: form elements, links and components generated by scripts), the name and role can be programmatically determined; states, properties, and values that can be set by the user can be programmatically set; and notification of changes to these items is available to user agents, including assistive technologies. (Level A)

In Accessibility. Both comments and pings are currently closed.

Comments are closed.