Link Role

Previous Img role

A link or hyperlink is a HTML element that connects one web page to another. Using <a> tag of HTML the web pages are linked with the ‘href’ attribute. The screen readers are customized to recognize <a> and inform the user as link along with the link text. However by the introduction of web 2.0 technologies, any HTML element can be made clickable. Meaning, without using a <a> tag linking between two web pages can be made.

Due to this advanced style of coding users of screen readers will not recognize it as a link and end up ignoring the content of that page. Users who use only keyboard will not be able to focus on this element.

To bridge this gap ARIA introduces link (role). In the <span> or <div> where you use the clickable functionality just add role=”link”. Now your screen reader will recognize the element as a link. To gain keyboard focus to this element add ‘tabindex’ attribute. Using CSS the look and feel of a link can be provided.

Example
<span role=”link” tabindex=”0″ onClick=”somefunction()”>ARIA role with link</span>
Next List role