HTML Accessibility (A11Y)

Building inclusive web experiences that work for everyone, regardless of ability.

`Accessibility Foundations`

The easiest way to make a site accessible is to use the web as it was intended. Start with the basics before moving to complex fixes.

Semantic markup : Using tags like <button> instead of <div> ensures native keyboard support and screen reader recognition.
Alt text best practices : Use descriptive text for informative images and empty alt tags (alt='') for decorative images.
Keyboard navigation : Ensure all interactive elements can be reached and activated using only the 'Tab' and 'Enter' keys.
WCAG basics : The Web Content Accessibility Guidelines provide the international standard for making web content accessible.

Alt Text Best Practices

Providing meaningful descriptions or hiding decorative images from screen readers.

<img src="https://picsum.photos/seed/picsum/200/300" alt="A golden retriever playing with a red ball in the park">

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

`ARIA (Accessible Rich Internet Applications)`

ARIA is a set of attributes that supplement HTML when semantic tags aren't enough to describe a complex widget.

ARIA roles : Defines what an element *is* (e.g., role='navigation', role='alert').
ARIA states & properties : Defines the current condition of an element (e.g., aria-expanded='true' or aria-disabled='true').
aria-label : Provides a string of text that labels an element, useful for buttons that only contain icons.
aria-hidden : Tells screen readers to ignore an element completely, even if it is visible on the screen.

ARIA and Roles

Using aria-label for icon buttons and aria-hidden to hide decorative elements.

<button aria-label="Close Modal" onclick="close()">
  <span aria-hidden="true">&times;</span>
</button>

<div role="alert" aria-live="assertive">
  This is an important error message for screen readers.
</div>

`Accessible Forms & Experience`

Forms are often the biggest barrier for users with disabilities. Proper labeling and status updates are critical.

Accessible forms : Always link labels to inputs using the 'for' and 'id' attributes so screen readers know what to type where.
Screen reader compatibility : Content must be linear and logical so that software can read it aloud in a way that makes sense.
Focus management : Ensure the visual focus indicator (the blue ring) is never removed, as keyboard users need it to see where they are.

Accessible Forms

Linking labels to inputs and using ARIA properties to signal required fields.

<label for="email">Email Address:</label>
<input type="email" id="email" name="email" required aria-required="true">

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

Knowledge Check

1. What is the first and most important step in web accessibility?

2. When should an 'alt' attribute be left empty (alt='')?

3. Which ARIA attribute provides a text label for an element that has no visible text?

4. What does 'aria-hidden="true"' do?

5. What is WCAG?

6. Why is keyboard navigation important?

Previous Next