Implementing Homepage Links

Accessibility considerations when adding a homepage link to your product

Every web app and website has a homepage link, which usually takes the form of a wordmark logo. The Nielsen Norman Group ↗ does a great job explaining the general best practices regarding this link, which I’ve outlined below:

• Position the homepage link in the standard location (which would be on the top-left corner of the app for desktop, LTR languages)
• The homepage link should be visually distinct from other text on the page — mainly other menu items

Side note: You can see below W3C didn’t follow the second suggestion:

Example of two links in the top-left corner with a breadcrumb “Home” link. Only the logo labeled “W3C” actually goes to the homepage.

In this article I’d like to dive deeper and discuss the accessibility considerations when implementing a logo as a link (<img> in an <a>).

1. Homepage links are links — not buttons

Maybe obvious, but homepage links should use <a> and not <button> . I’m sure you could get <button> to work functionally, but the screen reader would announce “…, button” and it wouldn’t be a part of screen reader navigation functionality — like Mac’s VoiceOver Rotor ↗ which lists out all links on the current page (seen below).

In this example, “Apple” is the homepage link.

Also, don’t use role="button" 🙃

2. Homepage links should have proper description text

In other words, they should be announced by a screen reader, and the descriptor should be clear.

I’ve seen the descriptor as “<companyName>”, or even worse “<companyName> logo”, but this doesn’t really describe the link’s location.

Examples of poor descriptors.

“Homepage” for web apps and simply “Home” for websites is all you need. Adding the…