MAWD combines automated testing with your input to find everything you need to fixTry MAWD Free
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.
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 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.
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.
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.
How do you make images accessible?
It's not just about alt text.
Get a printable poster of the full infographic.