A11Y | The selected menu link from top header elements uses color underline as the only visual means to convey state, selection or current page.

[hilcurtis]

ID
1847345118

Violation
Ensure color is not the sole means of communicating information

Module Name
03a Header Menu - Top Row

Description
[Issue]
The selected menu link from top header elements use color underline as the only visual means to convey state, selection or current page.

[User Impact]
Users who cannot distinguish colors will not have access to the information conveyed by the use of color and may find the page unusable.

[Code Reference]
<a class="esri-header-menus-link -is-active" href="./organization.html" id="esri-header-menus-link-desktop-0-7"><span class="esri-header-menus-link-label">Organization</span></a>

Note
[Recommendation]
Components can use color to communicate meaningful information as long as other visual indicators are also present. Provide other methods of identification to communicate the same information for users who cannot distinguish colors:

• For color blind and low vision users, provide text decorations, bold, additional on-screen text, a contrast of 3:1 when color difference is used, or shape in addition to the color.
• For blind users, provide a textual equivalent of the color (on-screen text would solve this issue for all types of users).
  -Developer should use aria-current="page" to provide state of current selection to the screen reader user.

[Compliant Code Example]
<a class="esri-header-menus-link -is-active" aria-current="page" href="./organization.html" id="esri-header-menus-link-desktop-0-7"><span class="esri-header-menus-link-label">Organization</span></a>