HTML Accessibility: Building Pages Everyone Can Use

Web accessibility (often written a11y) means making sites that people with disabilities can use: people who are blind or have low vision, are deaf or hard of hearing, have motor disabilities, or have cognitive or learning disabilities. It also helps everyone else: someone using a phone in bright sun, holding a baby in one arm, on a slow connection, or getting older.

Most accessibility comes from correct HTML. This lesson brings together what you have learned and adds the remaining essentials.

Who uses what#

The international standard is the Web Content Accessibility Guidelines (WCAG) from the W3C. Many laws and organisations require WCAG level AA.

The essentials checklist#

1. Use semantic HTML#

Headings for headings, lists for lists, <button> for actions, <a href> for navigation, <table> for data, and the layout landmarks <header>, <nav>, <main> and <footer>. Screen reader users navigate by these. See Semantic HTML.

2. Give the page a language and a title#

<html lang="en">
<title>Order confirmed | Laviyx Store</title>

3. Structure with headings#

One <h1>, then <h2>, <h3> in order. Many screen reader users navigate primarily by headings.

4. Write alt text#

Meaningful images get a short description; decorative images get alt="". See Images.

5. Label every form field#

Use <label> for every field and <fieldset>/<legend> for groups. Show error messages as text next to the field, not only by colour. See Labels, Fieldsets and Legends.

6. Make everything work with a keyboard#

Native elements (<a href>, <button>, <input>, <select>, <details>) are focusable and keyboard-operable automatically. A <div> with a click handler is not. Do not remove the focus outline with CSS (outline: none) unless you replace it with a clearly visible style.

7. Write descriptive link and button text#

"Download the 2026 timetable (PDF)" instead of "Click here". Icon-only buttons need an accessible name such as aria-label="Search".

8. Do not rely on colour alone#

<p>Required fields are marked in <span style="color: red">red</span>.</p>
<p>Required fields have the word "(required)" in their label.</p>

The first sentence fails for people who cannot distinguish red. Text contrast also matters: WCAG AA asks for a contrast ratio of at least 4.5:1 for normal text.

9. Provide captions and transcripts#

Use <track kind="captions"> for video (Audio and Video).

10. Let people zoom#

Never disable zooming in the viewport meta tag, and make sure the page still works when text is enlarged to 200%.

A skip link#

Keyboard users have to tab through the whole header on every page. A skip link, the first link on the page, lets them jump straight to the content:

<a href="#main-content">Skip to main content</a>
<header>
  <nav><a href="#">Home</a> | <a href="#">Courses</a> | <a href="#">Blog</a></nav>
</header>
<main id="main-content">
  <h1>Welcome</h1>
</main>

CSS usually hides the skip link until it receives keyboard focus.

Testing#

1. Keyboard test. Put the mouse away and use Tab, Shift+Tab, Enter and Space. Can you reach and use everything? Can you always see where focus is?
2. Automated checks. Tools such as Lighthouse (built into Chrome's developer tools) and axe find many common problems, such as missing alt text, missing labels and low contrast. They cannot find everything.
3. Screen reader test. Try NVDA (free, Windows), VoiceOver (built into macOS and iOS) or TalkBack (Android). Listen to how your page is announced.
4. Zoom test. Zoom to 200% and check that nothing is cut off or overlapping.

Practice#

<img src="logo.png">
<div onclick="subscribe()">Subscribe</div>
<input type="email" placeholder="Email">
<a href="/terms">Click here</a> to read our terms.

<img src="logo.png" alt="Laviyx Learn">
<button type="button" onclick="subscribe()">Subscribe</button>
<label for="email">Email</label>
<input type="email" id="email" placeholder="name@example.com">
<p>Read our <a href="/terms">terms of service</a>.</p>

Key takeaway#