Skip to main content
HTML for Beginners
CHAPTER 14 Beginner

HTML Accessibility (A11Y) Basics

Updated: May 10, 2026
5 min read

# HTML Accessibility (A11Y) Basics

1. Introduction

Web Accessibility (often abbreviated as A11y, because there are 11 letters between A and y) means ensuring your website can be used by everyone, including people with visual, motor, or cognitive disabilities. HTML is the first and most important line of defense for accessibility.

2. Learning Objectives

  • Understand screen readers.
  • Provide proper Alternative Text for images.
  • Use aria-label for buttons without text.
  • Understand keyboard navigation.

3. Detailed Explanations

Semantic HTML is Step 1

Screen readers (software that reads the screen out loud to visually impaired users) rely on Semantic HTML. If you use a <div> instead of a <button>, the screen reader won't tell the user they can click it!
html
12345 
<!-- BAD: Screen reader just says "Submit" -->
<div class="submit-btn" onclick="submit()">Submit</div>

<!-- GOOD: Screen reader says "Button, Submit" -->
<button>Submit</button>

Alternative Text (alt)

Every informative image MUST have an alt attribute. If the image is purely decorative, leave it empty (alt=""), which tells the screen reader to skip it.
html
12345 
<!-- Informative Image -->
<img src="chart.png" alt="Bar chart showing Q3 sales up by 20%">

<!-- Decorative Image (Icon) -->
<img src="flower-icon.png" alt="">

ARIA Labels (aria-label)

Sometimes, a button just has an icon (like an "X" to close a modal or a magnifying glass to search). A visually impaired user can't see the icon. You must provide an aria-label.
html
12 
<!-- A user reading the screen sees an &#039;X', a blind user hears "Close window" -->
<button aria-label="Close window">X</button>

Keyboard Navigation (tabindex)

Users with motor disabilities often navigate using the "Tab" key. Native elements like <a>, <button>, and <input> are naturally focusable. If you build a custom interactive element, you must make it focusable using tabindex="0".
html
12 
<!-- Adds this custom div to the Tab-key navigation flow -->
<div class="custom-dropdown" tabindex="0">Select Option</div>

4. Mini Project: Accessible Form Design

html
1234567891011 
<form>
    <!-- Label explicitly tied to input via "for" and "id" -->
    <label for="username">Username</label>
    <input type="text" id="username" name="username" required aria-required="true">
    
    <label for="email">Email</label>
    <input type="email" id="email" name="email" required aria-required="true">
    
    <!-- Button with explicit text -->
    <button type="submit">Create Account</button>
</form>

5. MCQs

Q1: If an image is purely decorative and provides no context, what should its alt attribute be? A) alt="decorative" B) Omit the alt attribute entirely C) alt="" (Empty string) D) alt="image" *Answer: C*

6. Summary

Writing accessible HTML is not a bonus feature; it is a fundamental requirement of professional web development. Stick to semantic tags, always write descriptive alt text, and test your websites using only your keyboard!

Finish this Chapter

Save your progress on your learning path and prepare for coding interview challenges.

Previous Chapter HTML Responsive Design Basics
Next Chapter HTML Canvas Basics

Discussion

Join the discussion

Log in or create a free account to participate.

Sort: ·

Explore More

📖 Related Tutorials 6

❓ Related Quizzes 6

🎥 Related Videos 1