Have you ever seen this before? I'm sure you have. You get a ticket assigned to you related to the some sort of click event,
and you noticed that some of the elements in the same component are wrapped in <a>, and some have <button>.
This is extremely common in the wild! I've seen some accordions where <span> is being used as the click event. For accessibility,
this is definitely NOT a best practice.
If you are ever in doubt as to what element to use as your solution, just ask yourself if it has a link. If it does, stick to <a>!
Anything that requires some sort of action, using a <button> is the safest solution.
By default, <button> is accessible by the keyboard, and can be triggered by the 'space' key. An anchor link is not triggered by the spacebar.
I would also get into the habit of using a screen-reader if you really want to get into accessibility development.
Testing this out via a screen reader is really the only way to know WHY this is an issue with accessibility. An anchor link will be read as
'link' out loud by the screen reader, a <button> will be read as just 'button', letting the user know whether the link will take them to a new page, or
if it is actionable.
As a side note, I also want to include the proper labels that you can use for links. I've seen this before. It's not wrong, but there is already a default for links:
html//no need for any extra aria-label, sr-only, or title if there is text within the element<a href="www.jennyq.co">jennyq.com</a>//if there is an ICON instead of text, you can technically do this, but there is no need to. The last example is enough.<a href="www.jennyq.co"><i>icon.png</i><span class="sr-only">jenny q</span></a>//use the default title instead with an aria label!<a href="www.jennyq.co" title="jenny q" aria-label="jenny q"><i>icon.png</i></a>
Why use both a title and aria-label? Some screen readers don't recognize the title label, some have issues with aria-label. I have seen some "accessibility companies"
recommend to just use the sr-only approach and forgo the titles.
This is one of the reasons why accessibility testing is so important on your site! If you are starting out, I definitely recommend NVDA, it's free and very popular amongst testers in the field. ChromeVox is another option, but I personally prefer NVDA. Jaws is another great option, but you have to pay for it.
ChromeVox https://chrome.google.com/webstore/detail/screen-reader/kgejglhpjiefppelpmljglcjbhoiplfn?hl=en-US
NVDA https://www.nvaccess.org/download/
view all posts