HTML Accessibility

Learn how to make your HTML content accessible to everyone

1. What is Accessibility?

Accessibility refers to designing and building websites that can be used by people with disabilities. It includes ensuring that content is usable for those with visual, auditory, cognitive, or motor impairments.

Note: Accessibility improves usability for everyone, not just people with disabilities.

2. Using Semantic HTML

Semantic HTML refers to using HTML elements according to their intended purpose. This helps screen readers and other assistive technologies to interpret the content correctly. Examples of semantic tags include:

  • <header>, <footer>, <article>: Used to define different sections of a webpage.
  • <nav>: Identifies the navigation section.
  • <section>, <main>, <aside>: Used for logical page divisions.

3. Alt Text for Images

Providing alternative text (alt attribute) for images is essential for users with screen readers. The alt text describes the image, enabling visually impaired users to understand its content.

<img src="photo.jpg" alt="A beautiful mountain landscape at sunrise">

4. Accessible Forms

Forms should be accessible to all users. Key practices include:

  • Labeling inputs: Use <label> tags with for attributes that correspond to the id of form elements.
  • Providing instructions: Use placeholders and <fieldset> for grouping related fields.

Example:

<form>
    <label for="name">Name:</label>
    <input type="text" id="name" name="name">

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

5. Keyboard Navigation

Ensure that all interactive elements (e.g., links, buttons, form fields) can be navigated using the keyboard. Important practices include:

  • Use tabindex to control tab order.
  • Avoid using tabindex values greater than 0 as they can disrupt natural navigation.
  • Ensure that focus states are visible on all interactive elements for clear navigation.

Additional Resources