Add a visual “you are here”

You are here indicators help people orient themselves when visiting a website. In navigation menus, the current page should appear different to all other menu items. In this post, I describe a visual you are here signal for the current page in local navigation menus.

People feel lost when looking at navigation menus that all appear similar. This was how menus appeared in Single Digital Presence. Many Victorian government websites use Single Digital Presence. I proposed adding an underline to the current page menu item. It would look different because all other menu items have no text decoration.

CSS to show you are here

The CSS I put forward:

.rpl-section-menu [aria-current] {
  text-decoration: underline;
}

In the design system, the unique menu item link already has the aria-current attribute. Screen readers should announce this link as the current page in the navigation. Yet sighted people need the current page link styled to differentiate it.

To put this improvement in place, I collaborated with colleagues working on Single Digital Presence. They added my recommendation to the backlog, prioritised it, and implemented it.

Now that the current page menu item is distinct, sighted users will feel less lost. This solution was rolled into navigation menus in the Ripple Design System. This means all centrally hosted websites immediately gain the improvement. In time, independent websites may upgrade to reap the benefit too.

My first contribution to the design system improves navigation experiences. The idea of adding a visual indicator was ground in the inclusive design principle of providing a comparable experience. Both screen reader users and sighted users now have a current page indicator. These help people orient themselves when visiting a website. Not feeling lost is a significant improvement to site navigation.