1.11 ARIA labels used on invalid div elements (Positive)

1.11.1 WCAG 4.1.2 (A) - Desktop, Automated Finding

On the Results page of the journey, <div> elements such as Upper Limits, Income Calculation, Outgoings Calculation etc. have been assigned an aria-labelledby . However, aria-labelledby cannot be used on a native <div> with no valid role attributes.

The aria-labelledby may sometimes be ignored by some assistive technologies when used with elements that do not have semantic meaning. In this instance, while the element appears to function as intended, not using HTML to specification could cause issues for some assistive technology users on different devices or browsers. These potential compatibility issues can negatively impact users.

In this instance, the <div> references a <span> containing the text. This is redundant since the text is announced by screen readers on receiving focus.

This was detected using Accessibility Insights. Automated accessibility tools are used to quickly identify frequently occurring issues that are generally easy to resolve. Fixing these will help increase the accessibility of the site.

FIGURE 1.17: Automatically detected faults highlighted on Results page

1.11.2 Code Snippet:

<div id="upper-limits-content" aria-labelledby="upper-limits">
...
<span id="upper-limits">
<span> Upper limits </span>
</span>

### Recommendation Remove the aria-labelledby attribute from the div. This will not affect the behaviour of the site since screen readers already announce the relevant text.

1.11.3 Spot check: April 2024

This issue has been resolved. The aria-labelledby has been removed and the issue is no longer flagged by automated tools.

This has been changed from a ‘Low’ severity issue to a ‘Positive’ finding.

---