Users can find their way around a web site more easily and confidently if they know where they are.
This is why websites tend to highlight the navigation-menu item for the current page or section. But to make this information is accessible, we cannot rely on color alone to differentiate that link.
Example
Consider the following image of a navigation menu. The active (current page) link is differentiated with a green background.
The differentiation is quite clear if you can perceive all colors, but if you have trouble telling the difference between colors, you have to rely on the difference in shade alone. In this case, that difference is very subtle and might be missed:
So it's important to use an additional means to differentiate the "active" link. One way would be to provide an additional underline:
.active {
background: #5fd35f;
text-decoration: underline;
}
With that, there is a supplementary way to differentiate the links. This visual information will also need to be available to people using High Contrast Mode to view web pages or those who apply a custom style sheet to make text easier to read.
Accessibility for screen reader users
Screen-reader users will not be aware of any change in visual design because information about visual appearance is not conveyed by screen readers. So we also need to non-visually indicate that our .active
link represents the current page.
One robust and well-supported way to do this is by including some text that is hidden from view but available to screen readers:
<li>
<a href="/about">about <span class="vh">(the current page)</span></a>
</li>
The vh (“visually hidden”) class would call CSS that removes the content from view but does not also hide it from assistive technologies.
This CSS code can be used to apply this styling:
.vh {
position: absolute;
overflow: hidden;
clip: rect(0 0 0 0);
height: 1px;
width: 1px;
margin: -1px;
padding: 0;
border: 0;
}