cds-snc / cds-snc/platform-forms-client
Hint text is small and does not have strong colour contrast
- 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
## Description
**Helper text being too small and having low colour contrast when using magnification.**
## Findings
**4 issues related to small and low contrast helper text** (testers used OS Magnification with Safari)
“The descriptive text below the question on this page is more difficult to read as it is smaller and the colour contrast is poor.”
## Examples
> "The colour of the sentence under the question on this page makes the text difficult to read as the colour contrast is poor."
> "The text advising the user to select any option that applies is hard to read as it is in smaller font to the questions or the options provided."
> "Same issue as before, the text under the "Adresse courriel" field is hard to read due to poor colour contrast."
**Relevant WCAG criteria: 1.4.3 Contrast (Minimum)**
Contributor guide
Research direction
Start by reproducing the helper-text examples described in the issue with Safari and OS Magnification. Inspect the relevant form UI styles, then verify that the text is easier to read and meets WCAG 1.4.3 contrast requirements.
Written by the indexing model from the issue text.
Assessment
- Tech stack
- next.js, typescript
- Domain
- accessibility, frontend
- Issue type
- Bug
- Difficulty
- 2/5
- Estimated time
- 1-3 hours
- Activity status
- Active
- Clarity
- Mostly clear
- Newbie friendliness
- 68/100