Skip to content

Beginner · Forms, semantic HTML and accessibility · topic 13 of 64 · 25 min

Accessibility basics

Explanation

Accessibility (often written a11y) means making pages that everyone can use: people who are blind, have low vision, cannot use a mouse, or simply have an old phone in bright sunlight. Most of it comes free with good HTML: alt text, labels, real buttons, clear headings and enough contrast.

Who needs accessibility?

Millions of people use the web differently. Some are blind and use a screen reader, software that reads the page aloud. Some cannot use a mouse and move with the Tab key. Some have low vision and zoom in. Older users, people with a broken arm, or anyone outside in bright sun also benefit.

Think of it like this: Think of a ramp at a railway station. It was built for wheelchair users, but people with suitcases, prams and bad knees use it every day. Accessible web pages work the same way: they help everyone.

The basics that matter most

  1. Images: write useful alt text; use alt="" for pure decoration.
  2. Forms: every input has a label.
  3. Headings: one h1, then h2, h3 in order, without skipping levels for looks.
  4. Language: <html lang="en"> (or hi, ta...) so screen readers use the right voice.
  5. Buttons and links: use real <button> and <a> elements.
  6. Contrast: dark text on a light background (or the reverse), never light grey on white.

Real buttons, not clickable divs

A <button> can be reached with Tab, pressed with Enter or Space, and is announced as "button" by screen readers. A <div> with a click handler does none of that unless you rebuild it all by hand.

html
<!-- Bad: not reachable by keyboard, not announced -->
<div class="btn" onclick="pay()">Pay now</div>

<!-- Good: works with mouse, keyboard and screen readers -->
<button type="button" class="btn">Pay now</button>
Use the element that already has the behaviour

Keyboard and focus

Focus is the element that will receive the keyboard. Press Tab to move it forward and Shift+Tab to go back. Browsers draw a focus ring around it. Never remove that outline without giving a clear replacement, or keyboard users get lost.

html
<style>
  /* Keep a visible focus style */
  a:focus-visible, button:focus-visible {
    outline: 3px solid #1d4ed8;
    outline-offset: 2px;
  }
</style>
:focus-visible shows the ring for keyboard users

Link text and alt text

Screen reader users often list all links on a page. Ten links that say "click here" are useless. Write "Download the 2026 timetable (PDF)" instead. In the same way, alt text should give the meaning of the image in its context: "Rupee coins in a jar", not "image1.jpg".

Tip: Try it yourself: unplug the mouse (or do not touch the screen) and use your page with only Tab, Enter and Space. Then turn on TalkBack (Android) or NVDA (free on Windows) for five minutes.
Careful: Colour alone must never carry the message. "Fields in red are wrong" fails for colour-blind users; add text or an icon too.

Government websites in India are expected to follow accessibility guidelines (GIGW), and many companies follow WCAG, the international standard. You will meet WCAG in detail in the expert level.

Watch the lesson

Accessibility basics · 1/6

Accessibility = for everyone

Accessibility means everyone can use your page, including people who cannot see, hear or use a mouse.

Prefer a video by a teacher? Find free videos on “web accessibility basics for beginners html” on YouTube ↗

In real life: A bank's net-banking login

A visually impaired customer logs in to net banking with a screen reader. Because the inputs have labels, the reader says "Customer ID, edit text". Because the eye icon is a real <button> with the label "Show password", he can press it. Because errors are written in text, not only in red, he hears "Password is required" and fixes it alone.

Practice (0/3 done)

Task 1 · Code · HTML

Fix the accessibility problems on this page: add lang="en" to <html>, give the photo a useful alt, turn the clickable <div> into a real <button>, and connect a label to the search input.

Task 2 · Code · HTML

Fix the heading order: the page must have exactly one <h1>, and the two section titles must be <h2> (no skipped levels like h1 then h4).

Task 3 · Practice

Do a keyboard-only test of a website you use often (for example a train booking or college site). Use only Tab, Shift+Tab, Enter and Space. Write down three problems you found and how HTML could fix each.

Quick quiz

Question 1

1.What is a screen reader?

Question 2

2.Which is the best alt text for a photo of a tiffin box on a food site?

Question 3

3.Why is <button> better than a clickable <div>?

Question 4

4.An error is shown only by turning the border red. What is the problem?

Question 5

5.What does the lang attribute on <html> help with?

Read more (free)

Pass the quiz (60% or more) or mark this topic as done when you are ready.

Your progress is saved on this device only.

Next: How CSS works →

← Previous: Semantic HTML