Chapter 12: HTML Accessibility & Best Practices

12.1 Introduction to Web Accessibility

Web accessibility ensures that websites are usable by all people, including those with disabilities. It follows standards like WCAG (Web Content Accessibility Guidelines).

12.2 Semantic HTML for Accessibility

Using proper HTML elements improves accessibility and helps screen readers interpret content correctly.

Example of Semantic HTML:

    <header>Website Title</header>
    <nav>
        <ul>
            <li><a href="home.html">Home</a></li>
            <li><a href="about.html">About</a></li>
        </ul>
    </nav>
    <article>This is an article.</article>
        

12.3 ARIA (Accessible Rich Internet Applications)

ARIA attributes help improve accessibility for dynamic web applications.

Example:

    <button aria-label="Close Menu">X</button>
    <div role="alert">This is an important message</div>
        

12.4 Keyboard Navigation

Users should be able to navigate your site using only a keyboard.

Best Practices:

• Use `tabindex="0"` for focusable elements.
• Avoid using `tabindex` greater than `0`.
• Ensure buttons and links are accessible via `Enter` and `Space` keys.

12.5 Color Contrast & Readability

Ensure text is readable by maintaining a sufficient contrast ratio between text and background.

Example of Good Contrast:

    <style>
        body {
            background-color: #ffffff;
            color: #000000;
        }
    </style>
        

12.6 Forms & Input Accessibility

Forms should have clear labels, instructions, and error messages.

Example:

    <label for="email">Email:</label>
    <input type="email" id="email" name="email" aria-required="true">
    <span id="error" aria-live="polite"></span>
        

12.7 Best Practices for HTML Development

• Use descriptive `alt` attributes for images.
• Ensure headings (`h1` to `h6`) are used correctly.
• Use relative units like `em`, `rem`, and `%` for responsive design.
• Validate HTML using the W3C Validator.

12.8 Summary

In this chapter, we covered:

• The importance of accessibility
• Using semantic HTML for better structure
• ARIA attributes for assistive technologies
• Keyboard navigation and focus management
• Best practices for contrast and readability
• Making forms more accessible