✎ Technique: Indicating current page location

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.


Consider the following image of a navigation menu. The active (current page) link is differentiated with a green background.

Menu of four links. All are blue with black text except the second which is green.

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:

A menu with four links. The second has a very slightly different shade of grey as the background.


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.

A menu with four links. The second has a very slightly different shade of grey as the background and a clear text underline.

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:

  <a href="/about">about <span class="vh">(the current page)</span></a>

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;