1.3. Make the current position visually different in each navigation system

The current item must have a different appearance in each navigation system.

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.
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.
In this pagination example, the currently active page (“3”) is indicated by a different text and background color, and bold characters.
In this example of a tab system, the currently active tab (“Spot”) is indicated by a different text and background color, and bold characters.
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 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

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

Comments

Add a comment

Required fields are marked *.

Back to top