cds-snc / cds-snc/platform-forms-client

Duplicate question labels and required labels announced for every option

Open
#7,898 0 comments 0 reactions 0 assignees View on GitHub
a11y bug end users
Dominant language
TypeScript
Stars
46
Forks
16
Avg merge
1d 8h
Merged PRs (30d)
85

Description

## Context

From client: results of their form in fable testing:

> Ran 20 accessibility tests using Fable (10 in English and 10 in French). The accessibility tests mainly focused on screen reader compatibility, with a couple tests using screen magnification tools.

https://cds-snc.freshdesk.com/a/tickets/30088
- Duplicate labels or repeated question, helper text, and required labels being announced for every option.
- This makes navigation more verbose and time-consuming.

## Findings

**7 issues related to duplicate labeling or repeating question, helper text and/or required label with every option** (testers used VoiceOver with Safari or NVDA with Firefox or NVDA with Chrome)
- “This makes it overly verbose and slow to navigate.”
- “There is duplicate labeling on all continue button [and radio buttons], text boxes and form fields
this means when I try to click any of them it will ask me which I want to click on even though both numbered labels are on the same element.”

## Examples

> "Just a small observation: When I am working with the form fields, I notice that information is repeated twice. Example: Question: What is your first name may be repeated twice. I have seen this happen on other web sites using mobile browsers on iOS so this is not unique."

> "When navigating through each checkbox, the text "Select all that apply" is repeated after the label for the checkbox is read. This occurred every time the focus landed on a new checkbox. this makes it overly verbose. Additionally, when unchecking a checkbox, the state "Unchecked" is not announced. "

> "There is duplicate labeling on all radio buttons, text boxes and form fields this means when I try to click any of them it will ask me which I want to click on even though both numbered labels are on the same element. This forces me to say a number every time I want to to click any of these elements but I won't repeat this issue. I would recommend reviewing the code to see why there is duplicate labeling"

> "There is duplicate labeling on the continue buttons. This means when I try to click it it will ask me which button I want to click on even though both numbered labels are on the same. This forces me to say a number every time I want to click Continue, but I won't repeat this issue; I do believe it will happen throughout the Continue buttons. I would recommend reviewing the code to see why there is duplicate labeling"

Contributor guide

Open the contributing guide

Research direction

No source file, test, or entry point is named. Start by reproducing the reported announcements in the form using VoiceOver with Safari or NVDA with Firefox or Chrome, then trace how question, helper, required, checkbox, radio, text-field, and Continue-button labels are rendered. Done means each control is announced once and checkbox state changes are announced correctly.

Written by the indexing model from the issue text.

Assessment

Tech stack
nextjs, typescript
Domain
accessibility, frontend
Issue type
Bug
Difficulty
4/5
Estimated time
3-5 days
Activity status
Active
Clarity
Needs clarification
Newbie friendliness
45/100

Get new issues in your inbox

A short digest of beginner-friendly GitHub issues.