1.2 Radio hint announcements are quite verbose (Positive)
1.2.1 Radio hint announcements are quite verbose
On the ‘Tell us about your client’ page, relevant information is visually presented on the page below the question. For screen reader users, this information is announced when the radio inputs receive focus, using an aria-describedby attribute.
While the attribute has been used correctly, the amount of information being announced can be quite verbose. For users who do not need this additional content, the automatic announcement when interacting with the radio button can make for auditory clutter.
This specific behaviour occurs only on desktop (see Hint text not completely announced on iOS (Observation) ). This issue also persists on the ‘Do any of the dependants aged 16 or over get regular income?’ page.
FIGURE 1.2: Text highlighted on About Your Client page with NVDA speech viewer activated
1.2.2 Recommendation
We recommend implementing an expandable element (such as ‘Who is a partner +’) that users can interact with should they wish to. This can be achieved using a <details> element, as is observed on other pages of the site. A positive example is noted in [Positive: Additional information presented in collapsible sections (Positive)] .
Alternatively, use a <button> with the aria-expanded attribute and ensure that it accurately reflects the state of the ‘Who is a partner’ expandable button.
When the details are collapsed, aria-expanded="false" should be used, and when expanded, aria-expanded="true" should be applied along with visually expanding the section. This attribute provides enough information to screen readers about the button’s state.
1.2.3 Resources
1.2.4 Spot check: April 2024
This issue has been resolved. The hint text has now been refactored to be within an expandable details component.
This has been changed from an ‘Observation’ severity issue to a ‘Positive’ finding.