Accessibility (a11y) Basics.

Web accessibility ensures that websites are usable by everyone, including people with visual, auditory, motor, or cognitive disabilities.

The Essentials

Use semantic HTML tags (like <nav>, <main>) instead of generic divs.

Always provide 'alt' text for images.

Ensure high color contrast between text and background.

Forms must have clearly linked <label> elements.

Use 'aria-label' for elements that don't have visible text (like icon buttons).

Interactive elements (links, buttons) must be reachable via keyboard (Tab).

Professional Insights

Screen Readers and the DOM

Assistive technology reads the DOM tree. If your HTML structure is illogical, the experience for a blind user will be confusing and frustrating.

The Importance of Language

Setting lang='en' in the <html> tag is critical. It tells screen readers which accent and pronunciation to use for the content.

Focus Management

Every interactive element must have a visible 'focus' state (usually a blue outline). Never remove this with CSS unless you are providing a better alternative.

ARIA Roles

WAI-ARIA (Accessible Rich Internet Applications) attributes like 'role="button"' can add meaning to generic tags, but 'No ARIA is better than bad ARIA.' Use semantic tags first!

Critical Pitfalls

Using images of text instead of actual text content.

Relying on color alone to convey meaning (e.g., 'Click the red button'—some users can't see red).

Removing the focus outline (outline: none) for aesthetic reasons.

Using non-semantic tags like <div> for buttons, making them unreachable by keyboard.

Interactive Lab

Sprint Tasks

Add an alt attribute to the image

Link the label to the input using 'for' and 'id'

Add an aria-label to the button since it only has an icon

Loading editor...

Production Preview