On this page
Tiles and matrix code in each tile

Improving link accessibility with clear descriptions

Learn how to improve link accessibility with clear descriptions, making your website more user-friendly for everyone.

When a link opens in a new window or tab, it changes the user’s context. Screen reader users may not receive any auditory notification that a new window has opened, which can lead to confusion. They might think they are still on the same page, making it difficult to navigate back to their original content.

For users with cognitive disabilities, unexpected changes in context can be disorienting. If they are not warned that a link will open a new window, they may struggle to understand where they are and how to return to their previous location.

By informing users that a link will open in a new window, you give them the power to decide whether to follow the link. This is particularly important for users who may prefer to stay on the current page or who need to prepare for the change in context.

Users typically expect links to open in the same tab. When a link opens in a new window without warning, it disrupts their browsing experience. This can be especially problematic for users who rely on keyboard navigation or assistive technologies, as they may not be aware of the new window and could find themselves lost in multiple open windows.

Best practices for screen reader users

Including descriptive text, such as (opens in a new window), directly in the link or using attributes like aria-describedby can effectively communicate this information. This approach ensures that screen reader users receive the necessary context to navigate effectively.

There are three ways of providing descriptive information about links:

  • Opens in a new window
  • Opens an external site
  • Opens an external site in a new window

Technical implementation

To cover all of the above scenarios, the following code can be used:

3 ways of providing descriptive information about links
<div hidden>
<span id="opens-in-new-window">Opens in a new window</span>
<span id="opens-an-external-site">Opens an external site</span>
<span id="opens-an-external-site-in-new-window">Opens an external site in a new window</span>
</div>

Then later it can be used in the following ways:

  • <a href="https://www.example.com" aria-describedby="opens-in-new-window">Visit example.com</a>. This text suggests that the associated link or action will open a new browser window.
  • <a href="https://www.example.com" aria-describedby="opens-an-external-site">Visit example.com</a>. This indicates that the relevant link will take the user to a different website, outside of the current domain.
  • <a href="https://www.example.com" aria-describedby="opens-an-external-site-in-new-window" target="_blank" rel="noopener">Visit example.com</a>. This informs the user that the link will open an external website and will do so in a new window.

Also, you can use the rel attribute to specify the relationship between the current document and the linked document. For example:

Attribute rel usage on link
<a href="https://www.external-site.com" rel="noopener noreferrer" target="_blank" aria-describedby="opens-an-external-site-in-new-window">Visit external site in new window</a>

The noopener and noreferrer values of the rel attribute are used to prevent the new window from being able to access the window that opened it and to prevent the referrer header from being sent, respectively.

Conclusion

In summary, informing screen reader users that a link opens in a new window is crucial for maintaining navigational clarity, enhancing user control, and adhering to accessibility best practices. By providing this information, web developers can create a more inclusive and user-friendly experience for all individuals, regardless of their abilities.

Related posts

Comments

Leave a Reply

Search in sitelint.com

Elevate your website’s accessibility with SiteLint

Your reliable source for inclusive online experiences. Our cutting-edge tools and services enable businesses to create user-friendly web environments. Join the digital inclusivity movement to discover new ways to engage and grow. Discover the SiteLint platform today and transform your online presence into a beacon of accessibility.

Real-user monitoring for Accessibility, Performance, Security, SEO & Errors (SiteLint)