HTML Accessibility Basics

Make pages usable with keyboards and screen readers through labels, alt text, and landmarks.

HTML

<a class="skip-link" href="#content">Skip to content</a>
<main id="content">
  <h1>Contact</h1>
  <form>
    <label for="name">Name</label>
    <input id="name" name="name" autocomplete="name" required>
    <button type="submit">Send</button>
  </form>
  <img src="chart.png" alt="Bar chart: sales rose 20% in 2025">
  <button type="button" aria-label="Close dialog">&times;</button>
</main>

Explanation

Accessible HTML works for people who use screen readers, keyboards, voice control, or zoom. Give every form control a label, give meaningful images alt text that says what the image shows, and use real buttons and links instead of clickable divs. A skip link lets keyboard users jump past repeated navigation, and aria-label names controls that have only an icon. Declare the page language on the html element with lang so that screen readers use the right pronunciation. Native elements are accessible by default, and ARIA is only for filling gaps.

Explore the dry run

Guided walkthroughReady

1<a class="skip-link" href="#content">Skip to content</a>

2<main id="content">

3 <h1>Contact</h1>

4 <form>

5 <label for="name">Name</label>

6 <input id="name" name="name" autocomplete="name" required>

7 <button type="submit">Send</button>

8 </form>

9 <img src="chart.png" alt="Bar chart: sales rose 20% in 2025">

10 <button type="button" aria-label="Close dialog">×</button>

11</main>

Follow the example

Start to inspect the source, values, and output. These prepared steps explain the published sample; grouped loop steps describe multiple iterations.

View the complete dry-run table

Prepared trace of the published program. Some rows group repeated iterations.
What happens	State after step	Output so far
A skip link lets keyboard users jump straight to the main content.	`—`	—
The link target. main is also a landmark.	`—`	—
The label is connected to the input by for and id, so clicking it focuses the input and screen readers announce it.	`—`	—
autocomplete helps browsers and password managers fill the field. required is announced to assistive technology.	`—`	—
The alt text describes what the image tells the reader, not its file name.	`—`	—
An icon-only button needs an accessible name; the visible x is not enough.	`—`	—

Open lesson and walkthrough Preview example