ARIA Links and Buttons

Modifying Element Roles with ARIA

In specific scenarios, such as legacy systems where modifying native HTML is impractical, an ARIA role can be used to change how an element is announced by screen readers.

Applying role="button" to a link or role="link" to a button is sufficient to change its perceived function for assistive technologies.

<a href="index.html" role="button">This now reports as a button</a>
<button role="link">This now reports as a link</button>

Creating Interactive Elements from Non-Semantic HTML

Creating interactive controls like buttons or links from non-semantic elements (e.g., <div>, <span>) is strongly discouraged and should only be considered as a last resort. To make such an element accessible, you must manually implement the following:

• role: Define the element's function (e.g., role="button").
• tabindex="0": Include the element in the default keyboard focus order.
• Event Handlers: Add handlers for both onclick (mouse) and onkeydown (keyboard) to ensure full interactivity. Keyboard handlers for buttons should typically respond to the "Enter" and "Space" keys.

An example implementation is as follows:

<div role="button" tabindex="0" onclick="event.preventDefault(); doSomething()" onkeydown="if(event.keyCode==13 || event.keyCode==32) { event.preventDefault(); doSomething(); }">
Button
</div>