Web Page

This page demonstrates common accessibility problems. It now contains the same content as the accessible version, but implemented incorrectly to show what not to do.

Page Structure

This page uses generic "div" elements for layout instead of semantic landmarks. This makes it impossible to skip to the main content or navigation.

Fake Headings

The headings on this page are just styled paragraphs. You cannot navigate them using the H key.

Fake Lists

This looks like a list, but it's just text with line breaks. You can't use the L key to navigate it.

- First item
- Second item
- Third item

Navigation Elements

Vague Links

Links should be descriptive. The links below don't make sense out of context.

W3C's Web Accessibility Initiative. Click Here

Deque Systems Blog. Read More

Inaccessible Table

This looks like a table, but it's made of divs. A screen reader can't announce column or row headers, so a user wouldn't know which data belongs to which category.

Category

Primary Key

Example Use

Headings

Skim page structure

Links

Find navigation options

Interactive Form Controls

Text in red is required.

Name:

Your Learning Preferences

I prefer video content.
I prefer text-based content.
I prefer interactive exercises.

A keyboard user cannot switch between these options using arrow keys because they are not properly grouped.

Select your interests

WCAG Standards
ARIA Authoring Practices

Your Message:

Widgets & Dynamic Content

Inaccessible Accordion

This accordion is built with divs and JavaScript. It is not keyboard focusable, has no ARIA attributes, and its state is not announced by screen readers.

Section 1: What is WCAG?

Section 2: The Four Principles

Inaccessible Tabs

This tab interface is not built with ARIA attributes. It cannot be operated with a keyboard and a screen reader will just announce it as text.

Syllabus

Instructor

Reviews

Your instructors are Jacob Wood (Growth for ALL) and Dr. Nicole L'Etoile (L'Etoile Education). Together, they've been called the dynamic duo of accessibility education.

Non-Live Region

Clicking the button will update the text below, but a screen reader will not announce the change.

Trigger Update

Some initial content here.

Embedded Video

A screen reader user now has to tab through every single control in the video player above before they can get to this sentence. On the accessible page, a heading is placed here so they can skip the player with the 'H' key.