CivicTechTO / CivicTechTO/civictech.ca
Hidden feedback form sections remain reachable by screen readers
- Dominant language
- HTML
- Stars
- 1
- Forks
- 6
- Avg merge
- 9h 45m
- Merged PRs (30d)
- 6
Description
## Summary
The feedback form has conditional sections (`.fb-conditional` and `.fb-followup`) that are hidden visually using CSS `max-height: 0` and `opacity: 0`. However, because they are never removed from the DOM or marked with `hidden`/`aria-hidden="true"`, screen reader users can still tab into and interact with these hidden fields.
## Affected locations
`_pages/feedback.md` — all `.fb-conditional` and `.fb-followup` section elements that toggle visibility via CSS transitions.
## Fix
When sections are hidden, also set `aria-hidden="true"` and `inert` on the container so AT cannot reach them, and remove these attributes when they become visible. The `inert` attribute also prevents keyboard focus from entering the section.
```js
function showSection(el) {
el.removeAttribute('hidden');
el.removeAttribute('inert');
el.removeAttribute('aria-hidden');
}
function hideSection(el) {
el.setAttribute('aria-hidden', 'true');
el.setAttribute('inert', '');
}
```
The `inert` attribute has broad browser support as of 2023 and is the cleanest solution for this pattern.
## WCAG criterion
1.3.1 Info and Relationships (Level A)
Contributor guide
Research direction
Start in _pages/feedback.md and trace the existing toggle logic for .fb-conditional and .fb-followup sections. Verify that hidden sections cannot receive keyboard or screen-reader focus and that visible sections remain interactive; test the feedback form with keyboard navigation and a screen reader.
Written by the indexing model from the issue text.
Assessment
- Tech stack
- css, html, javascript
- Domain
- accessibility, frontend, web-dev
- Issue type
- Bug
- Difficulty
- 2/5
- Estimated time
- 1-3 hours
- Activity status
- Stale
- Clarity
- Clearly specified
- Newbie friendliness
- 58/100