WCAG 4.1.2 A: Back to top button has no accessible name (Issue 34)

Summary

Via Vision Australia assessment: August 2024

Impact: medium

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

Global issue – Back to top button digital.gov.au beta | digital.gov.au (https://www.digital.gov.au)

Observed outcome

The back to top button uses an arrow icon to visually communicate its purpose; however, the button has no accessible name.

Code used

<div class="ct-back-to-top ct-scrollspy-scrolled" data-component-name="back-to-top" data-scrollspy="true" data-scrollspy-offset="400">
<a class="ct-button ct-theme-light ct-button--primary ct-button--link ct-button--regular ct-back-to-top__button" role="button" data-component-name="button" href="#top" data-button="true">
<svg class="ct-icon ct-button__icon" aria-hidden="true" role="img" width="24" height="24" viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg">
…
</svg>
</a>
</div>

Why this matters

When a button lacks an accessible name, screen readers cannot communicate its purpose or functionality to users. As a result, users may have difficulty determining what the button does or how to interact with it.

Users who navigate with speech recognition technologies may encounter difficulties activating interactive elements without an accessible name. They may be forced to use alternative navigation methods, such as the mouse grid, which can be considerably more time consuming.

Expected outcome

Preferably, provide an accessible name for the button via HTML text content. This will be visible for all users and ensure that the button purpose is clear.

Alternatively, provide an accessible name for the button via visually hidden text or the aria-label attribute.

Ideally, adjust the border colour of the element so that it is more visible when the link appears over a darker background (for example, as has been done with the feedback widget). While this is not required for WCAG conformance, it will improve the discoverability of the link.

Code example – text content

<a class="ct-button ct-theme-light ct-button--primary ct-button--link ct-button--regular ct-back-to-top__button" role="button" data-component-name="button" href="#top" data-button="true">
<svg class="ct-icon ct-button__icon" aria-hidden="true" role="img" width="24" height="24" viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg">
…
</svg>
Back to top 
</a>

Code example – visually hidden text

<a class="ct-button ct-theme-light ct-button--primary ct-button--link ct-button--regular ct-back-to-top__button" role="button" data-component-name="button" href="#top" data-button="true">
<svg class="ct-icon ct-button__icon" aria-hidden="true" role="img" width="24" height="24" viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg">
…
</svg>
<span class="visually-hidden">
Back to top
</span>
</a>
CSS
.visually-hidden:not(:focus):not(:active) {
clip: rect(0 0 0 0);
clip-path: inset(50%);
height: 1px;
overflow: hidden;
position: absolute;
white-space: nowrap;
width: 1px;
}

Code example – aria label

<a class="ct-button ct-theme-light ct-button--primary ct-button--link ct-button--regular ct-back-to-top__button" role="button" data-component-name="button" href="#top" data-button="true" aria-label="back to top">
<svg class="ct-icon ct-button__icon" aria-hidden="true" role="img" width="24" height="24" viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg">
…
</svg>
</a>

civictheme / uikit