My Accessible Website
MAWD
Confused by accessibility?
Online testing tools only finding the really basic issues?

MAWD combines automated testing with your input to find everything you need to fix. She tells you how to fix it too!

Try MAWD Free
Back to Tips

Should I use a <button> or an <a> tag? What about <span>?

You're developing a pretty complex page that has a load of interactions, and you need the user to click something. Which HTML tag should you use?

That depends on what happens when it's clicked. Choosing elements that fit their function is using Semantic HTML, which is a concept I won't go into detail on here. In essence, it means that it is possible to programmatically determine what the purpose of an element is. If you use a <nav> tag, it's clear that the element contains the navigation for the site.

What does it do?

As a broad rule, if clicking the element navigates the user somewhere else, it should be an <a> tag. This includes navigating to lower down in the current page, it's still taking the user somewhere else.

If it does something else, it should be a <button>. Generally, almost everything you're writing a JavaScript click handler for falls into this category.

What does this have to do with accessibility?

If the browser knows the purpose of an element, it can present it to the user appropriately. Screen reader users will be informed that something is a button rather than a link, and that can really help with ascertaining what will happen when it is actioned. They also have shortcuts allowing the user to jump between the links in the document, and you don't want random action buttons showing up there.

The screen reader JAWS says “same page link” if the link destination is on the same page as the link itself and “visited link” for links that have been previously accessed. All this extra functionality is reliant on you using link elements appropriately.

The answer is not a <div> or <span> tag!

If you're going to set up the click event with JavaScript then yes, you could use any tag you please. Far worse than using either a <button> or <a>, this means that a screen reader won't present this to the user as clickable at all. In fact, they might not even reach it as you probably didn't ensure that the element can be focused by pressing tab on the keyboard either.

If you have code that uses these generic tags for clickable elements, please replace them with something more appropriate, or they may be unusable by a surprising number of people.

It navigates, but the design shows it as a button...

If the design can't be changed, or it makes more sense that way, make it an <a> element but style it to look like a button! It doesn't matter how it looks (within reason!), the important thing here is that the HTML is clear on its purpose.

Share on Twitter Share on Facebook Share on Google+

How do you make images accessible?
It's not just about alt text.
Get a printable poster of the full infographic.

Get Poster

Comments

This site uses cookies as described in our Privacy Policy.
By continuing to use our site, you consent to these cookies.