HTML Accessibility

Web Accessibility Basics

Web accessibility means designing pages that can be navigated by anyone, regardless of physical or cognitive abilities. Writing semantic, standard HTML code is the foundation of an accessible webpage.

Example: Web Accessibility Basics

<button onclick="alert('Clicked')">Click me</button>

Semantic HTML Landmarks

Semantic tags (like main, nav, header, and footer) serve as layout landmarks on your webpage. Screen readers use these landmarks to announce structural outlines, allowing users to skip directly to content blocks easily.

Example: Semantic HTML Landmarks

<header>Site Header</header>
<nav>Navigation</nav>
<main>Main content</main>
<footer>Footer</footer>

ARIA Attributes and Roles

ARIA (Accessible Rich Internet Applications) attributes are specialized accessibility tags used to add context to your markup when standard HTML semantics are not enough.

Example: ARIA Attributes and Roles

<button aria-label="Close dialog">X</button>

Keyboard Navigation and Focus Styles

Keyboard-only and visually impaired users rely on the Tab key to navigate webpages chronologically. You must ensure that every interactive element has a visible focus indicator (like a border outline) so users can see where they are on the page.

Example: Keyboard Navigation and Focus Styles

<a href="#" style="outline: 2px solid blue;">Focusable link</a>

Color Contrast and Alt Descriptions

Accessibility relies heavily on high color contrast and clear graphic descriptions. Ensure your text has sufficient color contrast against background fills, and always write descriptive alt text for your images.

Example: Color Contrast and Alt Descriptions

<p style="color: #000000; background-color: #FFFFFF;">High contrast text</p>
<img src="photo.jpg" alt="A red bicycle leaning against a wall">

Skip Links Implementation

A skip link lets keyboard users jump straight from the top of the page to the main content, bypassing a long navigation menu. It is usually hidden visually until it receives keyboard focus, at which point it becomes clearly visible.

Example: Skip Links Implementation

<a href="#main-content" style="position: absolute; left: -9999px;">Skip to main content</a>
<main id="main-content">Main content</main>

Accessible Form Labels

Every form input needs an associated label so screen readers can announce what the field is for. Wrapping the input inside the label, or connecting them using a matching for and id attribute, both create this essential relationship.

Example: Accessible Form Labels

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

Accessibility Testing Tools (Lighthouse, axe)

Lighthouse, built directly into Chrome DevTools, and axe, available as a browser extension, both automatically scan a page and flag common accessibility problems like missing alt text or poor color contrast.

Automated tools catch many issues quickly, but they cannot replace actually testing with a keyboard and a real screen reader.

Example: Accessibility Testing Tools (Lighthouse, axe)

<!-- Run Chrome DevTools > Lighthouse > Accessibility audit on this page -->
<img src="banner.jpg" alt="Summer sale banner">