HTML Accessibility & ARIA

HTML Accessibility & ARIA

Web accessibility means designing and developing websites so that people with different abilities can use, understand, navigate and interact with them.

Accessibility benefits users who may have visual, auditory, physical, speech, cognitive or neurological disabilities. It also improves usability for many users in general.

1. Why Web Accessibility Matters

A website that looks attractive but cannot be operated by some users is not a truly inclusive website.

Accessibility helps users:

• Navigate websites using keyboards.
• Understand content through screen readers.
• Complete forms correctly.
• Understand images through alternative text.
• Identify buttons, links and interactive controls.
• Operate websites without relying exclusively on a mouse.

2. Assistive Technologies

Assistive technologies help people interact with digital content in ways that meet their individual needs.

3. Semantic HTML and Accessibility

Semantic HTML elements communicate the meaning and purpose of content to browsers and assistive technologies.

Good Example

<button type="button">
    Save Changes
</button>

Poor Replacement

<div>
    Save Changes
</div>

A native <button> already provides important semantics and interaction behavior.

4. Semantic Elements That Support Accessibility

5. Accessible Heading Structure

Headings provide a logical hierarchy that helps users understand and navigate a document.

<h1>Web Accessibility</h1>

<h2>Accessibility Fundamentals</h2>

<h3>Semantic HTML</h3>

<h3>Keyboard Accessibility</h3>

<h2>ARIA</h2>

<h3>ARIA Roles</h3>

<h3>ARIA States and Properties</h3>

6. Accessible Links

Link text should clearly describe the destination or action.

Good Example

<a href="/html/forms">
    Learn HTML Forms
</a>

Poor Example

<a href="/html/forms">
    Click here
</a>

Meaningful link text provides useful context, especially when users navigate through links independently.

7. Accessible Images and Alt Text

Informative images should have meaningful alternative text using the alt attribute.

<img
    src="accessibility-chart.png"
    alt="Chart showing the four principles of web accessibility">

Decorative Image

If an image is purely decorative and provides no meaningful information, an empty alt attribute can be appropriate.

<img
    src="decorative-line.png"
    alt="">

8. Accessible Forms

Form controls should have clear, programmatically associated labels.

Recommended Example

<label for="email">
    Email Address
</label>

<input
    type="email"
    id="email"
    name="email">

The for attribute of the label matches the id of the input.

9. Group Related Form Controls

Use <fieldset> and <legend> when several controls form a logical group.

<fieldset>

    <legend>Preferred Contact Method</legend>

    <label>
        <input
            type="radio"
            name="contact"
            value="email">
        Email
    </label>

    <label>
        <input
            type="radio"
            name="contact"
            value="phone">
        Phone
    </label>

</fieldset>

The legend provides a meaningful description for the group.

10. Use Buttons for Actions

Use <button> for actions performed on the current page or application.

<button type="button">
    Open Menu
</button>

Use <a> for navigation to another URL.

<a href="/courses">
    View Courses
</a>

11. Keyboard Accessibility

Users should be able to operate essential functionality without requiring a mouse.

Common keyboard interactions include:

• Tab — move between interactive elements.
• Shift + Tab — move backward.
• Enter — activate links and some controls.
• Space — commonly activates buttons and toggles.
• Arrow keys — may operate specific widgets.
• Escape — commonly closes dialogs or menus.

12. Keyboard Focus

Keyboard users need a visible indication of which element currently has focus.

Native interactive elements generally provide useful keyboard behavior and focus handling.

<button type="button">
    Submit
</button>

13. Understanding tabindex

The tabindex attribute controls aspects of keyboard focus behavior.

Natural Keyboard Order

<button type="button">
    Save
</button>

Native controls normally participate in keyboard navigation without requiring tabindex.

tabindex="0"

<div tabindex="0">
    Custom interactive element
</div>

A value of 0 places the element in the normal sequential keyboard navigation order.

14. What is ARIA?

ARIA stands for Accessible Rich Internet Applications.

ARIA is a set of attributes that can communicate roles, states and properties of user-interface elements to assistive technologies.

ARIA is especially useful for custom widgets and dynamic interfaces where native HTML semantics alone are not sufficient.

15. ARIA Roles

An ARIA role communicates what type of interface element an object represents.

<div role="button">
    Save
</div>

However, if the element is actually a button, the native element should normally be preferred:

<button type="button">
    Save
</button>

16. aria-label

aria-label provides an accessible name directly through an ARIA attribute.

<button
    type="button"
    aria-label="Close dialog">
    ×
</button>

This can be useful when the visible content of a control does not adequately communicate its purpose.

17. aria-labelledby

aria-labelledby associates an element with another element that provides its accessible name.

<h2 id="dialog-title">
    Delete Account
</h2>

<div
    role="dialog"
    aria-labelledby="dialog-title">

    <p>
        Are you sure you want to continue?
    </p>

</div>

The value of aria-labelledby references the id of the naming element.

18. aria-describedby

aria-describedby connects a control with additional descriptive information.

<label for="password">
    Password
</label>

<input
    type="password"
    id="password"
    aria-describedby="password-help">

<p id="password-help">
    Password must contain at least 8 characters.
</p>

The label identifies the control, while the description provides additional instructions.

19. ARIA States and Properties

ARIA attributes can communicate additional information about an element's current state or characteristics.

20. aria-expanded

This attribute communicates whether an expandable interface element is currently expanded or collapsed.

<button
    type="button"
    aria-expanded="false"
    aria-controls="course-menu">

    Courses

</button>

<div id="course-menu" hidden>

    <a href="/html">HTML</a>

    <a href="/css">CSS</a>

</div>

When the menu opens, the state should be updated:

aria-expanded="true"

21. aria-controls

aria-controls identifies the element controlled by an interactive element.

<button
    type="button"
    aria-controls="details"
    aria-expanded="false">

    Show Details

</button>

<div id="details" hidden>

    Additional information.

</div>

22. aria-hidden

aria-hidden="true" indicates that an element should be hidden from the accessibility tree.

<span aria-hidden="true">
    ★
</span>

This can be appropriate when a decorative symbol should not be announced separately by assistive technology.

23. aria-live

Dynamic content can change without causing the page to reload. ARIA live regions can communicate certain dynamic updates to assistive technologies.

<div
    aria-live="polite"
    id="status">

</div>

For example, a status message might be updated after a form submission:

<div
    aria-live="polite"
    id="status">

    Form submitted successfully.

</div>

24. Why Custom Controls Are Difficult

Consider this custom control:

<div
    role="button"
    tabindex="0">

    Submit

</div>

Simply adding role="button" does not automatically provide all the behavior of a native button.

A developer may also need to implement appropriate keyboard behavior, focus behavior, state communication and interaction logic.

Preferred Approach

<button type="button">
    Submit
</button>

25. ARIA Does Not Automatically Add Functionality

ARIA communicates semantics, states and properties. It does not automatically implement the JavaScript behavior required by a custom widget.

<div
    role="button"
    aria-expanded="false"
    tabindex="0">

    Menu

</div>

The developer must still ensure that the control can actually be operated correctly using the keyboard and pointer and that its ARIA state changes when its actual state changes.

26. Accessible Navigation

Use the semantic <nav> element for major navigation areas.

<nav aria-label="Main navigation">

    <ul>

        <li>
            <a href="/">Home</a>
        </li>

        <li>
            <a href="/courses">Courses</a>
        </li>

        <li>
            <a href="/contact">Contact</a>
        </li>

    </ul>

</nav>

The accessible label can distinguish multiple navigation landmarks when necessary.

27. Identify the Current Page

The aria-current attribute can identify the current item within a set.

<nav aria-label="Main navigation">

    <a href="/html">
        HTML
    </a>

    <a
        href="/css"
        aria-current="page">

        CSS

    </a>

</nav>

28. Accessible Tables

Tables should use appropriate table semantics.

<table>

    <caption>
        Course Schedule
    </caption>

    <thead>

        <tr>

            <th scope="col">
                Course
            </th>

            <th scope="col">
                Duration
            </th>

        </tr>

    </thead>

    <tbody>

        <tr>

            <td>
                HTML
            </td>

            <td>
                8 Weeks
            </td>

        </tr>

    </tbody>

</table>

Proper table structure helps assistive technologies interpret relationships between headers and data cells.

29. Prefer Native Interactive Elements

HTML provides several native interactive elements that can reduce the need for custom ARIA implementations.

<details>

    <summary>
        What is HTML?
    </summary>

    <p>
        HTML is the standard markup language for structuring
        webpages.
    </p>

</details>

Native elements often provide built-in semantics and interaction behavior that would otherwise require additional scripting.

30. Dialog Accessibility

Modern HTML includes the native <dialog> element for dialog interfaces.

<dialog id="help-dialog">

    <h2>Help</h2>

    <p>
        Find answers to frequently asked questions.
    </p>

    <form method="dialog">

        <button>
            Close
        </button>

    </form>

</dialog>

Native controls and elements should be considered before creating a completely custom ARIA widget.

31. Do Not Communicate Meaning Through Color Alone

Information should not depend exclusively on color.

Poor Approach

<p>
    <span class="status-green">Approved</span>
</p>

Better Approach

<p>
    Status:
    <strong>Approved</strong>
</p>

Color may supplement meaning, but important information should remain understandable without relying on color alone.

32. Do Not Use Placeholder as the Only Label

A placeholder is temporary instructional text and should not normally replace a proper form label.

Poor Example

<input
    type="email"
    placeholder="Enter email">

Better Example

<label for="email">
    Email Address
</label>

<input
    type="email"
    id="email"
    name="email"
    placeholder="name@example.com">

33. Accessible Form Errors

Error messages should clearly explain what went wrong and, where appropriate, be associated with the affected control.

<label for="email">
    Email Address
</label>

<input
    type="email"
    id="email"
    aria-invalid="true"
    aria-describedby="email-error">

<p id="email-error">
    Enter a valid email address.
</p>

Here, aria-invalid="true" communicates that the current value has failed validation, while aria-describedby associates the error explanation with the control.

34. Complete Accessible HTML Structure

<!DOCTYPE html>

<html lang="en">

<head>

    <meta charset="UTF-8">

    <meta
        name="viewport"
        content="width=device-width, initial-scale=1.0">

    <title>Accessible HTML Tutorial</title>

</head>

<body>

    <header>

        <nav aria-label="Main navigation">

            <a href="/">Home</a>

            <a href="/courses">Courses</a>

            <a href="/contact">Contact</a>

        </nav>

    </header>

    <main>

        <article>

            <h1>HTML Accessibility</h1>

            <section>

                <h2>Semantic HTML</h2>

                <p>
                    Semantic HTML provides meaningful structure
                    for users and assistive technologies.
                </p>

            </section>

            <section>

                <h2>Accessible Forms</h2>

                <form>

                    <label for="name">
                        Name
                    </label>

                    <input
                        type="text"
                        id="name"
                        name="name"
                        required>

                    <button type="submit">
                        Submit
                    </button>

                </form>

            </section>

        </article>

    </main>

    <footer>

        <p>
            Accessible Web Learning
        </p>

    </footer>

</body>

</html>

35. How to Test HTML Accessibility

Test 1 — Keyboard Only

1. Disconnect or avoid the mouse.
2. Press Tab repeatedly.
3. Check whether focus moves logically.
4. Activate links and buttons.
5. Open and close interactive components.
6. Ensure no important functionality is inaccessible.

Test 2 — Screen Reader

Test important pages with a screen reader where possible. Check headings, landmarks, links, buttons, form labels and dynamic messages.

Test 3 — Automated Tools

Automated accessibility tools can identify many common issues, but they cannot detect every accessibility problem.

36. Common Accessibility Mistakes

37. Interview Questions

38. Exam Questions

<label for="username">
    Username
</label>

<input
    type="text"
    id="username"
    name="username">

39. Practical Task

Create an accessible course registration webpage.

Your page must contain:

1. A semantic header and navigation.
2. A main content area.
3. A properly structured heading hierarchy.
4. An accessible registration form.
5. Labels associated with every form control.
6. A grouped set of radio buttons using fieldset and legend.
7. A meaningful image with alt text.
8. Keyboard-accessible buttons and links.
9. An accessible error-message example.
10. A footer.

Advanced Challenge

Build a custom expandable course menu using a button, aria-expanded and aria-controls. Use JavaScript to ensure that the ARIA state always matches the actual state of the menu.