CivicTechTO / CivicTechTO/civictech.ca

Hidden feedback form sections remain reachable by screen readers

Open
#88 0 comments 0 reactions 0 assignees View on GitHub
accessibility
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

Open the contributing 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

Get new issues in your inbox

A short digest of beginner-friendly GitHub issues.