Ideally it is good to reserve anchor <a> tag only for links and use <button> or <input type=”button”> tags for buttons from the accessibility and usability point of view. However, for various reasons we build custom buttons with <a>, <div> or <span>. The five (5) important things to be taken care to ensure that the button is accessible (ADA compliant) are discussed in this post. Ensure there is an appropriate keydown function along with the things discussed in this article.
Following are the considerations for developing an accessible button with anchor <a href> tag.
- Do not remove the ‘href’ attribute
- If it is a button provide role=”button”
- Do not provide hash (#) as the href value
Do not remove the ‘href’ attribute
The href attribute provides the following enhancements for the anchor <a> tag and this makes the coding simple.
- Provides keyboard focus while navigating with the tab key.
- Ensures that the elements gets activated with the Enter key along with the click.
- Changes the mouse pointer when hovered to indicate the element is clickable.
If you remove the Href attribute all the above functionalities are lost and <a> is just like <span> or <div> tag.
If the href attribute is removed then provide tabindex=”0” to make the element focusable with the tab key and CSS to indicate that the element is clickable on hover & focus. The element will not be activated with the enter key unless there is a function for keypress or keydown event.
If it is a button provide role=”button”
When the element looks like a button and the functionality is similar to a button then add role=”button”. If the role button is not added screen readers read them as link and user expectation for link versus button is different.
for all the custom links / button with the href attribute.
Do not provide hash (#) as the href value
Ensure event.preventDefault() has been called appropriately in the keypress / keydown function.
Ensure that the elements get activated with only Enter and space keys. There need to be a condition to check the pressed key and the action should happen only for enter and spacebar keys else the elements get activated even with tab navigation.
The keyCode for Enter is 13 and keyCode for spacebar is 32.
It is good to use keydown event instead of keypress event as there are some cross browser compatibility issues with the keypress event.