ReviseAlgo Logo

HTML Basics

Accessibility

Master web accessibility (a11y) in HTML, covering WCAG standards, semantic elements, aria attributes, keyboard navigability, and screen reader testing.

Last Updated: July 15, 2026 • 12 min read

1. Learning Objectives

In this lesson, you will master web accessibility (a11y) standards. By the end of this topic, you will be able to:

  • Understand the Web Content Accessibility Guidelines (WCAG) core principles.
  • Leverage semantic HTML elements to build screen-reader-friendly document outlines.
  • Implement ARIA attributes (aria-label, aria-hidden) to enhance interactive elements.
  • Ensure keyboard navigability using logical tabindex configurations and focus styles.
  • Write descriptive visual alternative descriptions to satisfy accessibility standards.

2. Overview

Web accessibility means design and coding standards that ensure people with visual, motor, auditory, or cognitive disabilities can navigate and interact with websites. HTML is the foundation of web accessibility. Browsers parse semantic HTML tags to build the **Accessibility Tree**, which screen readers use to navigate pages.

3. Why This Topic Matters

Accessibility is a fundamental requirement, not an optional feature. Ignoring accessibility standards can lead to critical issues:

  • Complete Blockages: Visually impaired users cannot navigate past dropdown navigation menus if keyboard focus states are disabled or hidden via CSS styles.
  • Legality and Audits: Organizations face legal penalties and lawsuits if their public platforms violate local accessibility standards (e.g. ADA or European Accessibility Act requirements).
  • SEO Optimization: Search engine crawlers navigate pages in a similar way to screen readers. Improving semantic layout hierarchies boosts overall search result relevance metrics.

4. Real-World Analogy

Think of coding web pages like **constructing a public library**:

  • Semantic Outlines (H1-H6 tags): Clear signage hanging above corridors guiding you to different rooms (e.g. "Reference Books", "Restrooms").
  • Keyboard Access (Tab Index / Focus): Ramps, automatic doors, and elevators alongside physical stairs, allowing everyone to enter and navigate the building.
  • ARIA labels: Braille labels printed on doors and buttons, helping visually impaired visitors identify controls.

5. Core Concepts

Concept Role in Accessibility Best Practice
Semantic Tags Tells the browser and screen readers exactly what each element does (e.g. <button> vs <div>). Always prefer native elements over generic divs with custom click handlers.
ARIA Accessible Rich Internet Applications. Bridges gaps in HTML by adding extra context for screen readers. Use only when semantic HTML cannot represent the element (e.g. custom tabs or modals).
Tab Index Specifies if an element can be focused using keyboard navigation (Tab key). Use tabindex="0" to make custom elements focusable. Never use positive values (e.g. tabindex="3").

6. Syntax & API Reference

Below are the primary ARIA attributes used to provide description text and hide decorative elements:

The First Rule of ARIA:

"If you can use a native HTML5 element or attribute with the semantics and behavior you require already built in, then do so instead of re-purposing an element and adding an ARIA role, state, or property to make it accessible."

7. Visual Diagram

This diagram displays how the browser processes elements to generate the Accessibility Tree:

8. Live Example — Full Working Code

An accessible document outline featuring landmark tags, labeled forms, and skip links:

9. Interactive Playground

Try It Yourself Challenges:

  1. Press the Tab key repeatedly on the Live Example page and verify how focus moves sequentially across elements.
  2. Test how screen readers handle images with empty alt tags alt="" versus missing alt tags.

10. Common Mistakes

Mistake Why it happens Wrong Correct
Creating buttons using divs Using a generic div for click actions, making it unreachable via keyboard navigation. <div onclick="submit()">Submit</div> <button type="button" onclick="submit()">Submit</button>
Removing focus styles in CSS Disabling the visual outline border when elements are focused. button:focus { outline: none; } Keep default outlines, or style custom visible focus styles.

11. Best Practices

  • Prioritize Native Semantics: Always use native elements (like <button>, <a>, <select>) instead of re-purposing divs. Native elements have built-in keyboard navigation support.
  • Keep focus outlines visible: Never hide keyboard focus outlines using CSS (e.g. outline: none). If you remove default browser outlines, you must provide custom, high-contrast focus styles.
  • Use Landmark Elements: Structure your page using landmark tags like <header>, <nav>, <main>, and <footer>. These allow screen readers to jump directly to different sections of the page.
  • Label visual controls: Every interactive element must have a clear text label. If an element only displays an icon, provide an aria-label description.

12. Browser Compatibility

Feature Chrome Firefox Safari Edge
ARIA attribute mappings (aria-label) Supported Supported Supported Supported

13. Interview Questions

🟢 Q1: Why is removing focus outlines in CSS considered a major accessibility issue?

Answer: Keyboard users (such as people with motor disabilities) navigate web pages using the Tab key. Removing focus outlines makes it impossible for them to see which element is currently active.

14. Debugging Exercise

Identify and fix the accessibility issues in this snippet:

View Solution

Fixed code:

15. Practice Exercises

Exercise 1: Accessible Modal Dialogue Wrapper

Build the skeleton structure of a modal window dialog using the role="dialog" and aria-modal="true" tags. Include an explicit close button with descriptive aria labels.

16. Scenario-Based Challenge

The Multi-Step Checkout accessibility challenge:

A payment checkout wizard lets users toggle billing profiles. The toggle buttons are custom styled list items without role labels. Screen readers read them as unselectable list text content. Detail the ARIA tags needed to convert this list sequence into a selectable dashboard component tab group.

17. Quick Quiz

Q1: Which tag attribute hides decorative visual elements from screen reader sweeps?

A) aria-label

B) aria-hidden="true"

C) role="presentation"

Answer: B — The aria-hidden="true" attribute instructs screen readers to ignore decorative elements.

18. Summary & Key Takeaways

  • • Prioritize native semantic tags over ARIA attributes.
  • • Keep focus outlines visible to support keyboard navigation.

19. Cheat Sheet

Role / ARIA Option Usage Purpose
role="alert" Directs screen readers to announce critical, time-sensitive updates immediately.