HTML Accessibility Basics
Make pages usable with keyboards and screen readers through labels, alt text, and landmarks.
On this page
The concept
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.
Code example
<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">×</button>
</main>Follow the code
Open the walkthrough to inspect the example one step at a time.
Show guided walkthrough
<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">×</button></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
| Step / line | 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. | — | — |
Behind the scenes
How HTML processes this code
The browser parses HTML into a document tree and renders its elements. HTML does not execute as a sequence of program statements.