WCAG 1.4.1 A: Current page shown with colour alone (Issue 13)

[CJE001]

Summary

Via Vision Australia assessment: August 2024

Impact: low

Note: DTA have a 90 day remediation period to address the identified issues within the audit, all issues must be resolved to obtain WCAG 2.2 certification for digital.gov.au.

Steps to reproduce

Digital Experience Policy Exemption Guide | digital.gov.au (https://www.digital.gov.au/policy/digital-experience/digital-experience-policy-exemption-guide)

Observed outcome

Links in the side navigation use a change of colour alone to convey the current link/page. The background changes from white (#ffffff) to light grey (#b8babc).

Code used

HTML

<li class="ct-menu__item ct-menu__item--level-1 ct-menu__item--active-trail ">
<a class="ct-link ct-theme-light ct-menu__item__link" href="/policy/digital-experience/digital-experience-policy-exemption-guide" title="Digital Experience Policy Exemption Guide" tabindex="-1">
Digital Experience Policy Exemption Guide
</a>
</li>

CSS

.ct-side-navigation.ct-theme-light .ct-side-navigation__menu .ct-menu__item.ct-menu__item--active-trail>.ct-menu__item__link:hover, .ct-side-navigation.ct-theme-light .ct-side-navigation__menu .ct-menu__item.ct-menu__item--active-trail>.ct-menu__item__link:focus {
background-color: #b8babc;
border-color: var(--ct-side-navigation-light-link-child-hover-border-color);
color: var(--ct-side-navigation-light-link-child-hover-color);
}

Why this matters

Users with low vision or colour perception disabilities may find it difficult or impossible to perceive the colour change between the current and non-current page links.

Expected outcome

Provide an additional visual cue to indicate the current page. This could be in the form of a solid border that surrounds the element or an underline. Ensure that this indicator has a minimum contrast ratio of 3:1 with the adjacent background.

Other methods such as bold/strong text, or increasing the colour contrast between the current and non-current states may also be used. If using a change in contrast, there must be a minimum 3:1 contrast ratio between the states, and the adjacent background.

Additionally, ensure that the text colour contrast in both states has a minimum ratio of 4.5:1 against the adjacent background.

Related issues

For other issues related to this component, please refer to:

• Issue 10 – Current page shown with presentation alone

[CJE001]

Guideline 1.4: Distinguishable "Make it easier for users to see and hear content including separating foreground from background."

1.4.1 Use of Colour WCAG 2.0 Level A

Colour is not used as the only visual means of conveying information, indicating an action, prompting a response, or distinguishing a visual element.

Users with colour deficiencies will not be able to perceive information conveyed by colour, unless it is also provided through another visual means.

[fionamorrison23]

Closing this issue as the work will be done in https://github.com/civictheme/uikit/issues/376