Accessibility and ARIA

Accessibility is not a bonus feature. It is part of professional HTML. If a learner can write semantic, keyboard-friendly, and screen-reader-friendly markup, they are already ahead of many production teams.

Lesson Path

• Previous lesson: Semantic HTML5 Layout
• In this lesson: You learn how to make pages usable for keyboard users, screen readers, and people using assistive technologies.
• Next lesson: SEO Meta Tags and Structured Data

---

1. Accessibility Starts with Native HTML

The best accessibility feature is often the simplest one:

• use semantic tags instead of generic div wrappers
• use real <button> elements for actions
• use real <a> elements for navigation
• connect labels to form fields
• keep heading levels logical and consistent

Rule: Use native HTML first. Add ARIA only when native elements cannot express the behavior you need.

---

2. Keyboard Navigation

Many users navigate with a keyboard instead of a mouse. Your page should support:

• Tab to move forward
• Shift + Tab to move backward
• Enter or Space to activate controls
• visible focus styles on interactive elements

Bad accessibility often happens when developers build clickable div elements instead of using proper buttons and links.

---

3. Skip Links and Landmarks

A skip link helps keyboard and screen-reader users jump directly to the main content instead of tabbing through every navigation link.

<a href="#main-content" class="skip-link">Skip to main content</a>
<header>...</header>
<nav>...</nav>
<main id="main-content">...</main>

This works best when combined with semantic landmarks like <header>, <nav>, <main>, and <footer>.

---

4. When to Use ARIA

ARIA stands for Accessible Rich Internet Applications. It helps assistive technologies understand custom UI patterns.

Use ARIA carefully:

• aria-label: give an accessible name when visible text is not enough
• aria-hidden="true": hide decorative icons from screen readers
• aria-expanded: indicate open/closed state for menus or accordions
• aria-describedby: connect help text or error messages to inputs

<button aria-label="Close modal">
  <span aria-hidden="true">X</span>
</button>

Important: ARIA does not fix bad HTML. It complements good HTML.

---

5. Accessible Forms

Inclusive forms should include:

• visible labels
• clear instructions
• required field indicators
• helpful error messages
• predictable tab order

<label for="email">Email address</label>
<input id="email" name="email" type="email" aria-describedby="email-help" required />
<p id="email-help">We will only use this for course updates.</p>

---

6. Accessibility Testing Workflow

A simple professional workflow:

1. Navigate the page with only a keyboard.
2. Check headings and landmarks using browser accessibility tools.
3. Run Lighthouse or axe DevTools.
4. Verify color contrast and visible focus states.
5. Make sure decorative icons are hidden and meaningful images have strong alt text.

---

Interactive Demo

Accessible Landing Page Header

Build a small page header with a skip link, semantic navigation, visible focus styles, and an accessible button.

78 lines15 tagsFullscreen Workspace

Skip LinkKeyboard AccessARIA Support

HTML PLAYGROUND

Copy

⏳ Loading editor…

Reset Example

Live Preview

Real browser rendering

Knowledge Check