Hidden feedback form sections remain reachable by screen readers

[alexwolson]

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.

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)