Building an Accessible Button with Anchor Tag

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.

  1. Do not remove the ‘href’ attribute
  2. If it is a button provide role=”button”
  3. Provide href=”javascript:void(0);” for all the custom links / button with the href attribute
  4. Do not miss the semicolon (;) in the href value when provided with href=”javascript:void(0);”
  5. 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.

  1. Provides keyboard focus while navigating with the tab key.
  2. Ensures that the elements gets activated with the Enter key along with the click.
  3. 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.

Provide href=”javascript:void(0);”

for all the custom links / button with the href attribute.

Provide href=”javascript:void(0);” instead of href=”#” and do not leave the href value empty.

Do not miss the semicolon (;) in the href value when provided with href=”javascript:void(0);”

With the JAWS screen reader turned on the buttons without semicolon (;) in the end of href=”javascript:void(0);” do not get activated with the enter or spacebar on IE 11. This just shifts the focus to the beginning of the DOM.

Do not provide hash (#) as the href value

Screen readers read href=”#” as same page link if there is no role specified hence the user expects that the element just moves the focus to in the same page. Many browsers scroll the page to the top when href=”#” is provided. This creates usability issues for the keyboard only users hence it is good to use href=”javascript:void(0);” both with and without role=”button”.

Additional Notes

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.

Leave a Reply