Semantic structure and names

Before you begin

By the end, you can…

• Read an accessibility tree
• Create useful names and relationships
• Use ARIA only where native semantics are insufficient

01 / Understand

Assistive technology receives a model

Browsers transform DOM and CSS into an accessibility tree containing roles, names, states, and relationships. A visually clear control can be silent or misleading if that model is wrong.

Native HTML supplies semantics automatically. Labels connect instructions to form controls. Headings create navigable structure. Landmarks divide regions. ARIA can add missing information, but a role does not add keyboard behavior.

02 / Apply

Name things by their purpose

An accessible name should distinguish the control in context: “Remove Maya from project” is more useful than six buttons named “Remove.” Visible text should normally be part of the accessible name.

Inspect the tree, then navigate by headings and landmarks with a screen reader. Fix the DOM model rather than hiding symptoms with extra announcements.

<label for="email">Work email</label>
<input id="email" name="email" type="email"
       autocomplete="email" required>

03 / Make

Your studio task

Make — Inspect and repair the accessibility tree of a real page.

1. Open the accessibility tree for one page.
2. Check landmark, heading, control name, role, state, and relationship.
3. Replace avoidable ARIA with native HTML.
4. Navigate the result by headings, landmarks, and form controls.

04 / Check

Knowledge check