The Home Link Dilemma: Who Wins? Design or Accessibility!

The idea for this article came when I was trying to figure out how to get to the homepage of a website. During my research, I navigated several pages deep, but when I attempted to return to the homepage, I couldn’t find the home link. I used the link list shortcut in the screen reader but was unsuccessful. I also tried using the page search with similar results, and I noticed that the website’s logo is a static image without a link. Later, my sight assistant explained that the logo does take the user to the homepage, but it isn’t keyboard operable. It has a JavaScript event handler that only works for mouse users. As someone who uses a screen reader, I believe having a Home link in the navigation is important. It makes it easy to go back to the main page and start over.When I talked to the design team of the website, they explained that many modern designs skip the Home link. Instead, they use the website’s logo to help people go back home.

This prompted me to search for research studies or any analytics data from the design community, suggesting that home links in navigation are not always necessary. Users can figure out that clicking on the logo will take them back to the home page.

I came across an Epix Media research study detailing their methodology and the selection process for different websites. The research study finds out that the use of Home link increases the user experience as the layouts of websites and use of mobile/tablet really necessitates the home link. Before moving forward, I recommend that each person read this study.

Here, I’ll share some things to think about if you’re thinking of getting rid of the Home link from your website’s navigation.

• The design team must explicitly annotate that the website’s logo serves as the link to navigate users back to the home page. Without this annotation, developers might code the logo as a static image rather than an image link. Additionally, the design team should ensure that each page includes breadcrumbs, which intuitively provide the home link for users to navigate backward.

• Developers should employ semantic HTML <a> attributes to mark the image link, ensuring an accessible name is provided for the element.

• Furthermore, the image link must be operable via keyboard navigation.

• Lastly, the content team needs to furnish appropriate alternative text for the image. At times, the image link might be labelled merely as “example.com logo.” However, in the absence of the Home link, the image link necessitates more meaningful alternative text, such as “example.com Home.””

To save space in the navigation menu, designers often remove the Home link. However, it’s crucial to think about how this change impacts the user experience. We shouldn’t assume that users will naturally know how to navigate our applications. As designs change and new patterns emerge, users gradually adapt to these shifts. This adaptation takes time, and behaviors will eventually change completely over a period.

It’s crucial to delve into user behaviors using robust analytics and A/B tests, especially when introducing new design patterns.

Feel free to share your opinions and feedback in the comments section below.

Related Reads

• A Logo As Home Button by Paul van den Dool

• Should You Include a “Home” Link in Your Website Navigation? by Kyle Van Deusen