cds-snc / cds-snc/platform-forms-client
Duplicate question labels and required labels announced for every option
- 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
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