Accessibility in HTML refers to designing and coding web content so that it is usable by everyone, including people with disabilities. This involves using semantic HTML, ARIA (Accessible Rich Internet Applications) attributes, and following best practices to ensure screen readers and assistive technologies can interpret and interact with your content.

? Key Principles of Accessibility in HTML

1. Use Semantic HTML

Semantic elements clearly describe their meaning to both the browser and developer.

Examples:

<header>, <nav>, <main>, <section>, <article>, <footer>, <button>, <label>, <form>, <input>

? Good Example:

<nav>  <ul>    <li><a href="/home">Home</a></li>    <li><a href="/contact">Contact</a></li>  </ul></nav>

2. Use ALT Text for Images

alt provides descriptive text for users who can’t see the image.

? Good Example:

<img src="logo.png" alt="Company Logo">

3. Form Accessibility

• Use <label> for each input.

• Use aria-* attributes if needed.

? Good Example:

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

4. Keyboard Navigation

Ensure all interactive elements (links, buttons, form fields) are reachable via the keyboard (using the Tab key).

? Avoid removing focus outlines:

/* Don't do this */*:focus {  outline: none;}

5. ARIA Roles and Attributes

Use ARIA to enhance accessibility when native HTML doesn't support it.

? Example:

<div role="alert">This is an important message.</div>

6. Use Headings Properly

Headings (<h1> to <h6>) create a logical structure, helping screen reader users navigate.

? Good Structure:

<h1>Main Title</h1><h2>Section 1</h2><h3>Subsection</h3>

7. Color Contrast

Ensure text has sufficient contrast from the background. Use tools like:

• WebAIM Contrast Checker

8. Tables

Use for tabular data only, and define headers.

? Good Example:

<table>  <thead>    <tr><th>Name</th><th>Email</th></tr>  </thead>  <tbody>    <tr><td>Alice</td><td>alice@example.com</td></tr>  </tbody></table>

? Best Practices Summary

Would you like a checklist or example of an accessible web page?