Note: We've removed most classes to improve readability.
Bad code Bad code
<a tabindex="0" type="button" href="/signup" role="link">
<span class="focus" tabindex="-1"></span>
<i class="icon icon-external-link" aria-hidden="true" role="img"></i>
Issues and how to fix them Issues and how to fix them
- You don’t need the
tabindexattribute if you use an
atag. HTML hyperlinks are focusable by default.
atag is used to hint at the linked URL’s format with a MIME type, eg:
atag is not needed since you already get that behaviour for free by using a standard hyperlink (
- A negative
- An additional
spanto handle focus isn’t necessary,
acan do that by itself. 💪🏻
ielement 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.
- If you’re using
aria-hiddenon an element, you don’t need to declare a
role, because the element is inaccessible to screen reader users, anyway.
- 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
spans, if the design demands it.
- Icon option 1: While
aria-hiddencan 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-labelwhen that content is meaningul for everyone, like declaring that an hyperlink will open in an external tab.
- 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 Good code
<span class="fa fa-external-link" role="img" aria-label="External link">
<a href="/signup"> Sign up </a>