BeingXpert Learn & Build Future

22. HTML Accessibility Basics

What you will learn

  • What accessibility means on the web
  • Simple HTML habits that help many people
  • How to test your page with only a keyboard

What is accessibility?

Web accessibility means making pages usable by as many people as possible, including people who are blind, have low vision, cannot use a mouse, are deaf, or have difficulty reading or concentrating. It also helps everyone in difficult situations, such as bright sunlight or a noisy room.

Good HTML does most of the work. Using the right elements gives assistive technology, such as screen readers, the information it needs.

Ten simple habits

  1. Set the page language: <html lang="en">.
  2. Give every page a clear <title>.
  3. Use headings in order (h1, then h2, and so on).
  4. Write alt text for meaningful images, and alt="" for decorative ones.
  5. Use real buttons and links instead of clickable <div> elements.
  6. Label every form field with a <label>.
  7. Use semantic elements such as <nav>, <main>, and <footer>.
  8. Write meaningful link text instead of “click here”.
  9. Do not rely on colour alone to show meaning, such as red for errors.
  10. Provide captions or transcripts for audio and video.

Labels in forms

Good example

<label for="city">City</label>
<input type="text" id="city" name="city">

Output


Clicking the label moves the cursor into the field, and a screen reader announces “City” when the field gets focus.

Descriptive link text

Weak and better

<!-- Weak -->
<a href="guide.html">Click here</a>

<!-- Better -->
<a href="guide.html">Read the beginner's HTML guide</a>

A first look at ARIA

ARIA attributes add extra information for assistive technology, for example aria-label="Close menu" on a button that shows only an icon.

Example

<button type="button" aria-label="Close menu">X</button>

The first rule of ARIA is: use a real HTML element when one exists. A native <button> already works with keyboards and screen readers. ARIA cannot fix a poor structure.

Try the keyboard test

Open any page, put your mouse aside, and use only the keyboard:

  • Tab moves to the next link, button, or field.
  • Shift+Tab moves back.
  • Enter activates a link. Space or Enter activates a button.

Can you reach everything? Can you always see where you are? If not, the page has an accessibility problem.

Common mistakes

  • Removing the focus outline with CSS and offering nothing in its place.
  • Using headings only to make text bigger.
  • Images of text, which cannot be resized or read aloud.
  • Low contrast between text and background.
  • Using only placeholder text instead of labels.

Exercise

Improve this code: <a href="prices.html">Click here</a> and <img src="team.jpg"> (a photo of five smiling colleagues).

Show solution 
<a href="prices.html">See our pricing plans</a>
<img src="team.jpg" alt="Five smiling colleagues standing together in an office">

Knowledge check

1. Which attribute declares the page language?

lang on the <html> element.

2. What key moves to the next link or field?

Tab.

3. Should you choose ARIA before a native HTML element?

No. Use the native element first.

Summary

  • Accessible pages work for more people in more situations.
  • Semantic HTML, labels, alt text, and good link text solve most problems.
  • Test with your keyboard.
Scroll to Top