HTML Accessibility: A Step-by-Step Beginner Guide

by sabari on | 2024-12-13 12:30:56 Last Updated by sabari on | 2024-12-15 15:23:48

Share: Facebook | Twitter | Whatsapp | Linkedin Visits: 52

Table of Contents

1. HTML Accessibility Overview
2. HTML ARIA Roles (role="button", role="navigation")
3. HTML ARIA Live Regions (aria-live, aria-atomic)
4. HTML Accessible Forms
5. HTML Labeling Form Elements with <label>
6. HTML Accessible Images (using alt text)
7. HTML Keyboard  Navigation
8. HTML tabindex
9. HTML Accessible Tables (using <th>, scope, etc.)
10. HTML Landmark Roles (using <header>, <footer>, etc.)

<!-- Poor Accessibility -->
<div onclick="alert("Clicked!")">Click Me</div>

<!-- Accessible Version -->
<button onclick="alert("Clicked!")">Click Me</button>

Explanation: The <button> element is inherently recognized by assistive technologies.

Exercise:

·         Research an inaccessible website and note any barriers (e.g., unlabeled buttons, images without alt attributes).

2. HTML ARIA Roles

What Are ARIA Roles?

ARIA (Accessible Rich Internet Applications) roles enhance elements by explicitly defining their purpose for assistive technologies.

Common ARIA Roles:

·         role="button": Declares an element as a button.

·         role="navigation": Identifies a section as a navigation landmark.

Examples:

role="button"

<div role="button" tabindex="0" onclick="alert("Button clicked!")">Click Me</div>

<nav role="navigation">
  <a href="#home">Home</a>
  <a href="#about">About</a>
</nav>

Explanation: Screen readers will identify this <nav> element as a navigation section.

Exercise:

1.      Create a webpage with styled div elements acting as buttons using ARIA roles.

2.      Add role="navigation" to a navigation menu.

3. HTML ARIA Live Regions

What Are ARIA Live Regions?

Live regions notify assistive technologies of dynamic content changes.

Attributes:

·         aria-live: Defines how updates are announced (off, polite, assertive).

·         aria-atomic: Determines whether updates are presented in full or as partial changes.

Example:

<div id="status" aria-live="polite" aria-atomic="true">
  Waiting for updates...
</div>
<button onclick="updateStatus()">Update Status</button>

<script>
function updateStatus() {
  document.getElementById("status").innerText = "Status updated!";
}
</script>

Explanation: Assistive technologies announce the status change.

Exercise:

1.      Create a dynamic message box with aria-live="assertive".

2.      Test how screen readers react to content changes.

4. HTML Accessible Forms

Why Accessible Forms Matter

Forms are essential for user interactions, and inaccessible forms create significant barriers for users with disabilities.

Best Practices:

1.      Use <label> elements.

2.      Provide clear instructions.

3.      Ensure proper focus navigation.

Example:

<form>
  <label for="email">Email:</label>
  <input type="email" id="email" name="email" required />
  
  <label for="password">Password:</label>
  <input type="password" id="password" name="password" required />

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

Explanation: Labels explicitly associate text with form fields.

Exercise:

1.      Build a form with fields for name, email, and password.

2.      Use <label> and test form submission.

5. Labeling Form Elements with <label>

Importance of <label>

The <label> element provides a clear association between input fields and their descriptions.

Example:

<label for="username">Username:</label>
<input type="text" id="username" name="username" />

Explanation: Screen readers announce the label when the user focuses on the input field.

Exercise:

1.      Add labels to a form containing radio buttons and checkboxes.

6. HTML Accessible Images

Why Alt Text Matters

alt attributes describe images to users who cannot see them.

Examples:

<img src="dog.jpg" alt="A happy golden retriever playing in the park." />
<img src="decorative.jpg" alt="" />

Explanation: Use meaningful alt text for essential images; use alt="" for decorative ones.
1.      Write descriptive alt text for three images of your choice.

Exercise:

7. HTML Keyboard Navigation

Importance of Keyboard Navigation
Users with mobility impairments rely on the keyboard for navigation.

Example:

<div tabindex="0">Focusable Element</div>
<button>Clickable Button</button>

Explanation: tabindex="0" makes non-interactive elements focusable.

Exercise:

1.      Create a webpage with multiple focusable elements.

8. HTML tabindex

What Is tabindex?

The tabindex attribute controls the keyboard navigation order.

Examples:

·         Positive ********tabindex: Overrides default focus order.

·         tabindex="-1": Removes an element from the focus sequence.

Exercise:

1.      Experiment with different tabindex values to understand  focus order.

9. HTML Accessible Tables

Why Tables Need Attention

Tables can be complex for assistive technologies. Proper semantics ensure usability.

Example:

<table>
  <tr>
    <th scope="col">Name</th>
    <th scope="col">Age</th>
  </tr>
  <tr>
    <td>John</td>
    <td>30</td>
  </tr>
</table>

Explanation: Use <th> for headers and associate data cells with their headers.

Exercise:

1.      Create a table with student grades and proper header associations.

10. HTML Landmark Roles

What Are Landmark Roles?

Landmark roles make it easier to navigate sections of a webpage.

Examples:

<header>
  <h1>Website Title</h1>
</header>

<nav>
  <a href="#home">Home</a>
  <a href="#about">About</a>
</nav>

<footer>
  <p>Copyright 2024</p>
</footer>

Explanation: Semantic HTML elements inherently serve as landmarks.

Exercise:

1.      Create a webpage with semantic landmarks for header, navigation, and footer.

Mini Project: Accessible Web Page

This mini-project will cover various aspects of HTML accessibility. The goal is to create a basic webpage using HTML, ensuring it is accessible to people with disabilities, including those using screen readers or keyboard navigation.

Example of Mini-Project

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 Web Page</title>
</head>
<body>
    <!-- Landmark Role: Header -->
    <header role="banner">
        <h1>Welcome to Our Accessible Website</h1>
        <nav role="navigation">
            <ul>
                <li><a href="#home" title="Go to Home page" role="link">Home</a></li>
                <li><a href="#about" title="Learn more about us" role="link">About</a></li>
                <li><a href="#contact" title="Contact us" role="link">Contact</a></li>
            </ul>
        </nav>
    </header>

    <!-- Landmark Role: Main Content -->
    <main role="main">
        <h2 id="home">Home Section</h2>
        <p>This website is designed with accessibility in mind. It includes accessible navigation, forms, and images.</p>
        
        <!-- Accessible Image with alt Text -->
        <img src="image.jpg" alt="A beautiful landscape showing mountains and a river" />
        
        <!-- Accessible Form -->
        <section>
            <h2>Contact Form</h2>
            <form action="/submit" method="POST">
                <label for="name">Name:</label>
                <input type="text" id="name" name="name" required aria-required="true" />

                <label for="email">Email:</label>
                <input type="email" id="email" name="email" required aria-required="true" />
                
                <button type="submit" role="button">Submit</button>
            </form>
        </section>
    </main>

    <!-- Landmark Role: Footer -->
    <footer role="contentinfo">
        <p>&copy; 2024 Accessible Web. All Rights Reserved.</p>
    </footer>
</body>
</html>

Final Project: Accessible Blog Page

Description:

The final project will focus on building an accessible blog page using HTML. The page will include a navigation menu, image content, accessible forms, and tables. All content will be structured with appropriate ARIA roles and attributes.

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Accessible Blog</title>
</head>
<body>
    <!-- Header with Landmark Role -->
    <header role="banner">
        <h1>Accessible Blog</h1>
        <nav role="navigation">
            <ul>
                <li><a href="#home" title="Go to homepage" role="link">Home</a></li>
                <li><a href="#about" title="Learn more about us" role="link">About</a></li>
                <li><a href="#blog" title="Read blog posts" role="link">Blog</a></li>
            </ul>
        </nav>
    </header>

    <!-- Main Content with Landmark Role -->
    <main role="main">
        <h2>Latest Posts</h2>
        <article aria-labelledby="post1">
            <h3 id="post1">Post 1: Introduction to Web Accessibility</h3>
            <p>This post discusses the importance of making websites accessible to all users, regardless of their abilities.</p>
            <img src="web-accessibility.jpg" alt="An example of a website with a screen reader" />
        </article>
        
        <article aria-labelledby="post2">
            <h3 id="post2">Post 2: Using ARIA Roles for Improved Navigation</h3>
            <p>This post explains how ARIA roles enhance navigation for users with disabilities.</p>
            <img src="aria-roles.jpg" alt="An example of ARIA roles used in a website" />
        </article>
    </main>

    <!-- Accessible Contact Form -->
    <section>
        <h2>Contact Us</h2>
        <form action="/submit" method="POST">
            <label for="name">Name:</label>
            <input type="text" id="name" name="name" aria-required="true" required />
            
            <label for="message">Message:</label>
            <textarea id="message" name="message" aria-required="true" required></textarea>
            
            <button type="submit" role="button">Send</button>
        </form>
    </section>

    <!-- Footer with Landmark Role -->
    <footer role="contentinfo">
        <p>&copy; 2024 Accessible Blog. All Rights Reserved.</p>
    </footer>
</body>
</html>

Outcome:

• Learn how to implement ARIA roles such as role="button", role="navigation", and role="main".
• Understand the usage of aria-live and aria-atomic attributes to provide dynamic content updates to assistive technologies.
• Master HTML forms that are accessible by using the <label> tag and associating it with form elements.
• Implement proper keyboard navigation with the use of the tabindex attribute.
• Design accessible images by using descriptive alt attributes.
• Use HTML landmarks like <header>, <footer>, <main>, etc., to enhance the navigation experience.
• Apply good practices in creating accessible tables using <th>, scope, and other appropriate HTML elements.

Conclusion:

This project demonstrates how to create an accessible webpage by following key accessibility standards and  best practices. By using proper HTML tags, ARIA roles, and attributes, the website ensures that it is usable for all users, including those with disabilities, providing a more inclusive user experience.