DailyRNG
Login
Advanced

The patterns worth memorizing

A handful of interfaces appear on most sites, and each has a shape that is already settled. Learn the shapes and you can review any interface by name instead of reasoning from scratch.

What you will see

Focus moves back to the opener on close. If it moves to the body, the reader has lost their place.

About 1 min of reading

Try It

Turn one pattern into an assertion

1

Find the modal

grep -n 'dialog' index.html public/js/*.js | head -5

Before you run it, say out loud what it will print. Then open the answer.

What it prints
The modal element and the code that opens it.
2

Assert the name

grep -c 'role="dialog"' index.html; grep -A3 'role="dialog"' index.html | grep -c 'aria-label\|aria-labelledby'

Before you run it, say out loud what it will print. Then open the answer.

What it prints
Both counts at least 1. A dialog with no name announces 'dialog' with no content.
3

Assert the escape

grep -cE 'Escape|27' public/js/modal.js

Before you run it, say out loud what it will print. Then open the answer.

What it prints
At least 1. Without it, a keyboard user cannot close the modal.
4

Assert the return of focus

grep -nE 'returnFocus|focus\(\)' public/js/modal.js

Before you run it, say out loud what it will print. Then open the answer.

What it prints
Focus moves back to the opener on close. If it moves to the body, the reader has lost their place.
Do not use aria-live for a modal. The dialog is announced on entry; a live region would announce it twice.

Data Flow

Pattern to its checklist
1 Name the interface
↓
2 List its required states
↓
3 Assert each state in markup or JS
↓
4 Test the keyboard path for that interface
Why this works
Announcement scope

A live region that wraps too much re-announces unrelated content on every DOM change. Scope it to the value that changed, and nothing else.

When to skip a pattern

If the interface can be replaced by a simpler one that is natively accessible, replace it. A menu that becomes a list of links is usually better than a menu.

Examples

Modal

Role dialog with an accessible name, focus moved inside, everything outside unfocusable, closes on Escape, focus returns to the opener. All five, or it is not a modal.

Tab list

Use real buttons in reading order with aria-expanded and hidden panels, or one link per section. Only build the roving-tabindex version if you also handle every arrow key.

Live region

aria-live polite for a status that changes without a user action. Never announce a whole page; scope the region to the smallest element that changes.

Words this lesson uses

Each one is defined here on this site. Open the entry for the full definition and the other words it points at.

← Testing with real assistive technology
Previous Lesson
Testing with real assistive technology
Next Lesson
Refactoring an inaccessible component
Refactoring an inaccessible component →