wtf( )unctionsystem design, drawn
← all problemsAccessibilityEasy

Silent screen reader, moving focus

The dialog hides the rest of the page from assistive technology by marking the page root as hidden from the accessibility tree. Screen reader users stop hearing the background, which is exactly what was wanted.

Tab still walks straight into it. Focus lands on buttons behind the dialog, and the user hears nothing while the focus ring moves somewhere they cannot perceive.

Apply the mechanism that takes the background out of both the accessibility tree and the focus order.
Components — tap one, then tap a slot on the diagram
!With the dialog open, Tab walks into the page behind it. The screen reader announces nothing while focus visibly moves.

Boundaries, outermost first: Behind the dialog: Background link, Background button (FAILED: focusable), an empty slot for the applied to the background Outside every boundary: Dialog (open on top), Keyboard user (pressing Tab), Screen reader (announces nothing) Connections: Keyboard user calls Dialog (step 1) Keyboard user must NOT reach Background button — Tab reaches it applied to the background controls Background button (step 2) applied to the background controls Background link Dialog controls Screen reader — nothing announced

Background link
Dialogopen on top
Keyboard userpressing Tab
Screen readerannounces nothing
Background buttonfocusable