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.
Why inform users that a link will open in a new window?
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:
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:
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.
Comments