Keyboard focus, hidden states, disclosures, and language direction.
Reading and keyboard order
Use native controls, landmarks, and focus order before adding ARIA.
- HTML focus order: use native controls and keep DOM order usable
- HTML skip link: reach main content before repeated navigation
- HTML tabindex: keep focus order aligned with reading order
- HTML aria-current: mark the current page within a link set
Visibility and disclosure
Keep rendered state, interaction state, and accessibility exposure aligned.
- HTML hidden and inert: remove inactive content from interaction deliberately
- HTML details and dialog: distinguish disclosure from a modal task
- HTML details name groups: open one disclosure at a time
Language and feedback
Expose changed information and meaningful names to the right audience.
- HTML lang, dir, and bdi: keep text pronunciation and direction stable
- HTML status region: announce a changed result without stealing focus
- HTML noscript: keep the essential task available without enhancement
- HTML linked image alt: name the destination or avoid repetition
- HTML table caption and summary: explain a dense data grid
Form repair
Make field instructions, requirements, and validation errors actionable.
- HTML form help: connect visible instructions and errors to a control
- HTML aria-invalid: connect a failed field to a repair instruction
- HTML autofocus in a dialog: put focus on the next useful action
Template boundary
Keep staged markup from becoming a hidden interaction trap.
Common Mistakes
A lesson's illustrative route, component, or asset is not a deployed application feature.
Continue with: Semantic output prompts: verify structure after generation.
Continue with: UI release prompts: compare appearance and verify access.