Accessibility Demonstration

Print Page

This page shows some core concepts of digital accessibility!

Structure

Heading Structure

Anything that LOOKS like a heading to be MARKED as a heading. Think of it like making your table of contents. Table of Contents let you skip around a document. Headings do the same for people with disabilities who are using assistive technologies like screen readers and can’t see the visual differences of a heading.

List Structure

  • Ensure
  • That
  • Lists
  • Are
  • Marked
  • As
  • Lists

Table Structure

Header 1

Header 2Header 3
123
456
789

Use Structure for the Right Reasons

up!
goes
This

Equivalent Experiences

Alt text depends on context.

Text Alternatives

Example 1

Yellow labrador with pink speckled nose looking sadly at the camera, with a white and orange cat sitting in her bed in the background.

This is my dog, Penny, upset that her cat brother, Dot, has stolen her bed so that she can’t sit next to me while I work.

Example 2

My dog, Penny, a yellow labrador with pink speckled nose looking sadly at the camera, with my cat, Dot, a white and orange cat sitting in her bed in the background.

Cats love to mess with dogs

Example 3

Some complex images need more, such as alt text and a link to a longer description and/or data.


See data table and description.

Descriptive Links

Think alt text for links! Here is an example.

Color Usage

Contrast

Let’s test the color contrast of a few things.

  • Gray (#767676) on white
  • Purple (#CC21CC) white
  • Blue (#000063) on gray (#808080)
  • Red (#E60000) on yellow (#FFFF47)