bcgov / bcgov/lcfs

LCFS - User Settings Help Icon Not Accessible to Screen Reader Users

Open
#4,910 0 comments 0 reactions 0 assignees View on GitHub
Medium Task UX
Dominant language
Python
Stars
6
Forks
6
Avg merge
2d 7h
Merged PRs (30d)
87

Description

**Describe the task**
Update the Help icon located in the User Settings section of the main user dashboard so that it is fully accessible to screen reader users. Currently, the control is not announced or usable when navigating with a screen reader.

Image

**Purpose**
Ensure all users can access help content regardless of ability by making the Help icon compliant with WCAG 2.2 accessibility requirements. This will improve usability for screen reader users and support equitable access to system guidance and assistance.

**Acceptance Criteria**
- [ ] The Help icon has an accessible name that clearly communicates its purpose to screen reader users.
- [ ] The Help icon can be identified and activated using screen reader software on supported browsers and devices.
- [ ] The Help icon can be accessed and activated using keyboard-only navigation.
- [ ] Focus indicators are visible and meet accessibility requirements when the Help icon receives focus.
- [ ] Any help content, modal, tooltip, or associated functionality launched from the Help icon is announced appropriately to screen readers.
- [ ] The solution is validated against WCAG 2.2 accessibility requirements and tested using supported screen readers.

**Additional context**
- Current behaviour: the Help icon in the User Settings section is not accessible to screen reader users.
- Expected behaviour: screen reader users can identify, navigate to, and activate the Help icon and access the associated help content.
- Validate behaviour using keyboard navigation and common screen readers (for example, NVDA, JAWS, and VoiceOver where applicable).
- Test across supported browsers and devices to ensure a consistent and accessible user experience.

Contributor guide

Open the contributing guide

Research direction

Start in the User Settings section of the main user dashboard and reproduce the Help icon issue with keyboard navigation and a supported screen reader. Inspect the icon and the help content, then verify the accessible name, focus behavior, activation, and announcements against the listed acceptance criteria across supported browsers and devices.

Written by the indexing model from the issue text.

Assessment

Tech stack
python
Domain
accessibility, frontend
Issue type
Bug
Difficulty
4/5
Estimated time
3-5 days
Activity status
Active
Clarity
Mostly clear
Newbie friendliness
64/100

Get new issues in your inbox

A short digest of beginner-friendly GitHub issues.