Use ARAI role=”button”

With the widespread use of Rich Web applications, links and other HTML tags are are often used to create buttons. When an element is focused, screen readers announce its tag name. That means users of screen readers will be unaware of the intention of the markup used. For links, the value of the link’s href may be announced and confuse the users. The addition of the ‘role’ attribute helps with semantics and with accessibility tools such as JAWS. In addition, you’ll also want to verify that the tabindex is set to a valid value to allow for keyboard navigation of the page.

Some examples:

<a role="button" href="#">Click Me</a>
<a role="button" href="javascript:callback();">Click Me</a>
<a role="button" tabindex="0">Click Me</a>
<img role="button" tabindex="0" src="example.gif" alt="Click Me" />

REFERENCES:

Leave a Reply