#25 A link is a button is a link

submitted on by Andrea
Note: We've removed most classes to improve readability.

Bad code

<a tabindex="0" type="button" href="/signup" role="link">
  <span class="focus" tabindex="-1"></span>
  <span>
    <span>
      <span>Sign up</span>
      <i class="icon icon-external-link" aria-hidden="true" role="img"></i>
    </span>
  </span>
</a>

Issues and how to fix them

  1. You don’t need the tabindex attribute if you use an a tag. HTML hyperlinks are focusable by default.
  2. The type attribute on a tag is used to hint at the linked URL’s format with a MIME type, eg: type="image/svg+xml"
  3. Using role=link on an a tag is not needed since you already get that behaviour for free by using a standard hyperlink (<a href="">).
  4. A negative tabindex value means that the element is not accessible via keyboard, but it could be focused with Javascript
  5. An additional span to handle focus isn’t necessary, a can do that by itself. 💪🏻
  6. The i element represents a span of text in an alternate voice or mood, or otherwise offset from the normal prose in a manner indicating a different quality of text.Footnote2 If you just want italic text, use font-style: italic; in CSS.
  7. If you’re using aria-hidden on an element, you don’t need to declare a role, because the element is inaccessible to screen reader users, anyway.
  8. Try to avoid excessive DOM sizes. Too many DOM nodes and nested DOM elements may harm your page performance. A large DOM tree results in a large accessibility tree, which may have a bad impact on the performance of assistive technology. Only use extra divs and spans, if the design demands it.
  9. Icon option 1: While aria-hidden can be useful to hide content that is not needed for screen readers (in this case an icon image), it's useful to add an aria-label when that content is meaningul for everyone, like declaring that an hyperlink will open in an external tab.
  10. Icon option 2: The icon can be removed, because in the original snippet the link points to a page on the same site that opens in the same tab. The external link icon is intended to inform users that by clicking the link they’re leaving the site.

Check out the resources section at the bottom of this page for more.

Good code

 <a href="/signup">
   Sign up
   <span class="fa fa-external-link" role="img" aria-label="External link">
   </span>
 </a>

or

 <a href="/signup"> Sign up </a>

Resources