HTML Accessibility

Accessibility (often written a11y) means building pages that everyone can use, including people with disabilities.

Who Benefits?

Blind users who listen to a screen reader that reads the page aloud
Low-vision users who zoom in to 200% or more
People who cannot use a mouse and move around with the keyboard
Deaf users who need captions for video
Everyone else too: someone with a broken arm, a phone in bright sunlight, a slow connection

Good HTML gives you most of accessibility for free. The rules below are simple habits.

1. Write Useful alt Text

Image	Good alt
A photo of a product	`alt="Black Dell laptop, 15-inch screen"`
A logo that links home	`alt="Workownix home"`
A chart	A short summary, plus the numbers in text or a table
A decoration (a line, a pattern)	`alt=""` so screen readers skip it

Do not start with "image of". Screen readers already say "image".

2. Label Every Form Field

A placeholder is not a label: it disappears when the user types. Connect a real <label> to each field.

Example

html

<!DOCTYPE html>
<html>
<body>

<form>
  <!-- bad: no label, only a placeholder -->
  <input type="text" placeholder="Name"><br><br>

  <!-- good: a connected label -->
  <label for="fullname">Full name</label><br>
  <input type="text" id="fullname" name="fullname" autocomplete="name"><br><br>

  <!-- also good: the input inside the label -->
  <label>
    <input type="checkbox" name="terms"> I agree to the terms
  </label>
</form>

</body>
</html>

Try it Yourself »

Click the words "Full name" and "I agree": the field gets focus. Screen readers read the label when the field is reached.

3. Use Headings in Order

Screen reader users often jump from heading to heading, like reading a table of contents. Use one <h1>, then <h2> for sections and <h3> inside them. Do not choose a heading level just for its size; change the size with CSS.

4. Use Landmarks

Semantic layout elements (see HTML Semantic Layout) are also landmarks. Screen readers list them, so users can jump straight to the menu or the main content.

Element	Landmark
`<header>` (top of page)	Banner
`<nav>`	Navigation
`<main>`	Main content (use once per page)
`<aside>`	Complementary
`<footer>` (bottom of page)	Content info
`<form>` with a label, `<search>`	Form, search

5. Use Real Buttons and Links

A <div onclick="..."> looks like a button, but the keyboard cannot reach it and screen readers do not know it is a button.

Example

html

<!-- bad -->
<div onclick="save()">Save</div>

<!-- good -->
<button type="button" onclick="save()">Save</button>

Use	When
`<a href="...">`	It goes to another page or place
`<button>`	It does something on this page

6. Make Everything Work with the Keyboard

Try your page with only the keyboard: Tab to move forward, Shift + Tab to go back, Enter or Space to press. You should always see where the focus is. Never remove the focus outline with CSS unless you add a clear one of your own.

A "skip link" at the top lets keyboard users jump past a long menu:

Example

html

<!DOCTYPE html>
<html>
<head>
<style>
  .skip { position: absolute; left: -999px; }
  .skip:focus { left: 10px; top: 10px; background: #ffd; padding: 8px; }
</style>
</head>
<body>

<a class="skip" href="#main">Skip to main content</a>
<nav>
  <a href="#">Home</a> | <a href="#">Courses</a> | <a href="#">Contact</a>
</nav>
<main id="main" tabindex="-1">
  <h1>Welcome</h1>
  <p>Click in the page and press Tab: the skip link appears first.</p>
</main>

</body>
</html>

Try it Yourself »

7. Mind the Colours

Text needs enough contrast with its background. Light grey text on white is hard to read for many people.
Do not show meaning with colour alone. "Fields in red are required" fails for colour-blind users. Add a word or a symbol, such as "(required)".

ARIA Basics

ARIA (Accessible Rich Internet Applications) is a set of attributes that add extra information for screen readers when HTML alone is not enough.

Attribute	Use	Example
`aria-label`	Names an element with no visible text	`<button aria-label="Close">×</button>`
`aria-labelledby`	Uses another element's text as the name	`<section aria-labelledby="fees-title">`
`aria-describedby`	Links extra help text	`<input aria-describedby="pwd-help">`
`aria-expanded`	Says if a menu is open	`<button aria-expanded="false">Menu</button>`
`aria-live="polite"`	Reads out text that changes	`<p aria-live="polite" id="status"></p>`
`aria-hidden="true"`	Hides decoration from screen readers	`<span aria-hidden="true">★</span>`

Example

html

<label for="pwd">Password</label>
<input type="password" id="pwd" aria-describedby="pwd-help">
<p id="pwd-help">At least 8 characters, with one number.</p>

The first rule of ARIA: if a normal HTML element does the job, use it instead. A real <button> is always better than <div role="button">. Wrong ARIA makes a page worse than no ARIA.

Other Quick Wins

Set the page language: <html lang="en">.
Give every page a clear, unique <title>.
Write link text that makes sense alone: "Download the course outline", not "click here".
Add captions to videos and transcripts to audio.
Do not block zooming in the viewport meta tag.

Exercise

Which is the best way to make a clickable "Save" control accessible?