The videos linked below demonstrate moving between two pages on a website. To the casual visual observer, these pages look the same. However, due to the underlying design of the two pages, one page works well with assistive technologies and the other does not. This is because the underlying code that forms web pages can be radically different but lead to the same visual experience.

Things to Watch for in the Videos

Labeled captions on the carousel which allow screen reader users to gain an understanding of the content found on each slide.
Correct use of headings which allow assistive technology users to get a sense of the hierarchy of the page.
Correct use of language tags allow screen readers to change their pronunciation rules since they can't examine at content like a human and infer the correct language.

You can follow along with the examples of an inaccessible page and an accessible page.

Short Introduction to Screen Readers

This short video gives an overview on screen readers.

Screen Reader Web Demo Part 1

This screen reader website demo shows what can happen when a website is not designed with accessibility in mind, and is the first in a two-part series.

Screen Reader Web Demo Part 2

This short screen reader website demo shows how an accessible website can be used by a screen reader and how different the user experiences can be between an inaccessible website and an accessible one. This is part 2 of our two-part series.