Accessibility and ARIA in Real Interfaces

Build interfaces that work with keyboards, screen readers and native semantics before reaching for ARIA.

How much do you know about HTML?

📘 Theory

Core ideas to keep in mind

A quick review of the concepts that matter most.

Accessibility tree

The structure assistive technologies use to interpret the interface.

ARIA roles

They define what a component is when native HTML is not enough.

Accessible names

Use visible labels, `aria-label` or `aria-labelledby` to name controls.

States

`aria-expanded`, `aria-pressed` and `aria-selected` communicate UI changes.

Keyboard focus

Every interactive element must be reachable and visibly focused.

tabindex

`tabindex="0"` joins the tab order; `-1` allows programmatic focus.

The accessibility tree

Screen readers such as NVDA or VoiceOver do not consume your raw HTML as text. They work with the accessibility tree the browser builds from your document and your component states.

If an element has no role, no accessible name or no meaningful state, the user may hear something vague or misleading. That is why native HTML should always be your first choice.

Use semantic HTML before adding ARIA.
Check the focus order with the Tab key.
Make sure text and background have enough contrast.

Using ARIA in custom components

ARIA is useful when there is no native element that already provides the right semantics, such as some custom tabs, alerts or disclosure widgets.

`aria-label` explains the purpose of a control, `aria-expanded` exposes whether a panel is open, and `aria-controls` can link the trigger to the controlled content.

`role="alert"` announces urgent errors immediately.
`aria-live="polite"` is useful for non-blocking status messages.
Do not replace a native button or input with a generic `div` if HTML already solves the problem.

Example: an accessible close button

A lone `X` does not explain its function. Add an accessible name and hide the decorative character from assistive technologies.

`aria-hidden="true"` keeps the visual icon from being announced as if it were meaningful content.

1 Core ideas to keep in mind 2 The accessibility tree 3 Using ARIA in custom components 4 Example: an accessible close button

🧪 Learn by doing

Example Accessible close button Compare a button without an accessible name to one that exposes its purpose clearly.

⌄

🏁 Challenges

Challenge Challenge: accessible search button Add an accessible label to an icon button and the right role to an error message.

⌄

🧰 Resources

Test

Check your knowledge with a test about HTML.

Test for HTML

Course resources 27

📘 Glossary 🎧 Audio 📄 PDFs 🖼️ Infographics 🎬 Videos 🔗 Links 🧠 Flashcards 🧩 Snippets

‹

Lesson 16

Technical SEO in HTML: Metadata, Social Cards and Structured Data

Lesson 18

Web Performance from HTML: Core Web Vitals in Practice

›