Make the current position visually different in each navigation system

In each navigation system, it is recommended to differentiate the appearance of the current item.

Screen capture, caption below. — In this first example of a menu, the currently active section (“Newsletter”) is indicated by a different text and background color, and by the arrow pointing down.

Screen capture, caption below. — In this second example of a menu, the currently active page (“Tech”) is indicated by a different background color, bold characters and a notch mark.

Screen capture, caption below. — In this pagination example, the currently active page (“3”) is indicated by a different text and background color, and bold characters.

Screen capture, caption below. — In this example of a tab system, the currently active tab (“Spot”) is indicated by a different text and background color, and bold characters.

Screen capture, caption below. — In this example of a navigation system within a news carousel, the currently active panel is indicated by a dot of a different color and size.

Warning

Make sure that the means for visually distinguishing current items in the navigation system are not only based on color.

Color can be completed, for instance, with:

Bold characters.
An icon.
A different text size.

Note

It is also highly recommended to have a different appearance for the mouse-over of menu items.

Find out more

Associated accessibility guideline for the graphic design: 3.2. Make sure that information is comprehensible, even if the colours are absent.
Associated accessibility guideline for HTML, CSS and JavaScript: 1.7. Identify the current position in navigation systems with aria-current.
Associated accessibility guideline for HTML, CSS and JavaScript: 7.9. In forms with multiple steps, identify the current step using aria-current="step".
Associated accessibility guideline for HTML, CSS and JavaScript: 10.3. Ensure that the content is understandable with CSS turned off.

Comments

Add a comment