Accessibility and ARIA
Start with native elements, add ARIA only when needed and make every control usable by keyboard.
What you will be able to do
- Use landmarks and correct headings
- Connect labels and hints to inputs
- Apply the first rule of ARIA
Semantic HTML already gives screen readers names, roles and behaviour. ARIA patches gaps when no native element exists, but it cannot add keyboard behaviour.
<header>
<nav aria-label="Primary">
<a href="/courses">Courses</a>
</nav>
</header>
<main>
<h1>Apply for the certificate</h1>
<form>
<label for="email">Email address</label>
<p id="email-hint">We send the result here.</p>
<input
id="email"
name="email"
type="email"
autocomplete="email"
aria-describedby="email-hint"
required
/>
<button type="submit">Apply</button>
</form>
<p role="status" aria-live="polite">Application received.</p>
</main>| Need | Prefer |
|---|---|
| A clickable action | button, not div with role="button" |
| Navigation | nav with a label |
| Form field name | label with for, not placeholder |
| Error message | Text linked with aria-describedby |
| Live update | role="status" or aria-live on a real region |
Your turn
MediumLabel the field and connect the hint
Add a visible label and connect the hint to the input so screen readers announce both.
HTML · starter
<form>
<input id="name" name="name" type="text" />
<p id="name-hint">Use the name on your certificate.</p>
</form>Check your understanding before moving on.
Knowledge checkQuestion 1
What is the first rule of ARIA?
Select an answer to continue
Study tools
Make it yours.
Keep a private note for this lesson, then turn the key ideas into flashcards you can revisit.
Sign in to save notes and flashcards.Both are private to your account and stay with your progress.
Sign inFinished reading?
Lock in what you just learned.
0%
Mark this lesson complete to save your place and move one step closer to the certificate.