Web Accessibility (A11y): Best Practices for Semantic HTML

Web accessibility (often abbreviated as A11y) means designing web pages so that anyone—including people with visual, auditory, motor, or cognitive disabilities—can use them successfully. In this guide, we'll explore essential accessibility practices that every web developer should implement.

1. The Power of alt Attributes for Images

Screen readers cannot read images, so they describe them by reading the alt (alternative text) attribute.

• Bad Practice: Leaving alt empty or writing generic things like alt="image".
• Good Practice: Provide clear, descriptive text explaining the image's context.

<!-- Good: Describes the image clearly -->
<img src="/cats.jpg" alt="Three orange kittens sleeping in a woven basket">

Decorative Images

If an image is purely decorative (e.g., a background pattern or separator icon), keep the alt attribute present but empty. This tells screen readers to silently skip the image.

<!-- Screen reader ignores this image -->
<img src="/divider.png" alt="">

2. Using Semantic Landmarking

As discussed in prior guides, using HTML5 semantic containers like <nav>, <main>, and <footer> acts as visual and auditory navigation landmarks. Screen reader users can press browser hotkeys to jump straight from the header to the main content or skip navigation blocks altogether.

3. Keyboard Accessibility (Focus States)

Many users navigate websites using a keyboard (e.g., pressing Tab to navigate, Enter to select) instead of a mouse.

A. Maintain Visible :focus Styles

Never completely disable focus outlines in your CSS (e.g., outline: none; without providing alternative focus styles). Keyboard users rely on these outlines to see where they are on the page.

B. Use Native Interactive Elements

Use native HTML tags like <button> and <a> for clickable components. If you build a button using a <div>, keyboard users cannot Tab to it or trigger it with the Space or Enter keys unless you write extensive custom JavaScript.

4. Introduction to ARIA (Accessible Rich Internet Applications)

When native HTML5 elements aren't enough, you can use ARIA attributes to pass extra accessibility information to screen readers.

Common ARIA Attributes:

• aria-label: Provides a text label when there is no visible text on the screen.

<!-- The screen reader will read "Close Menu" instead of just "X" -->
<button aria-label="Close Menu">X</button>

• aria-hidden="true": Hides elements (like design icons or graphics) from screen readers.

<!-- Screen reader skips the icon since it's just visual decoration -->
<span class="icon" aria-hidden="true">🔔</span>

5. Summary A11y Checklist

1. Do all image tags have descriptive alt attributes?
2. Can you navigate the entire website using only the Tab and Enter keys?
3. Do forms have <label> tags linked to input elements via the for and id attributes?
4. Are text and background colors contrasting enough to be easily readable?