What is Accessibility?

"The qualities that make an experience open to all"

Related to Inclusive Design: "A design methodology that enables and draws on the full range of human diversity"

What Do We Mean by "Disability?"

Big shift over past few years: no longer considered "edge cases" due to personal conditions

Now, a matter of "mismatched human interactions"

Different Kinds of Disability

A matrix showing the range of disabilities. Along the top is 'Permanent,' 'Temporary,' and 'Situational.' Along the leftmost column is 'Touch,' 'See,' 'Hear,' 'Speak.'
A list from Microsoft's Inclusive Design documents showing different types of disability

Using Personas to Prioritize

What experience is more important to analyze?

Design Concerns

Ways to Check Accessibility

WebAIM Checker

Using your phone's screen reader

Testing interactions with your non-dominant hand

Principles of WCAG




Three Levels of Compliance: Level A, Level AA, Level AAA


Can someone see/hear the content?

"Info and Relationships" &
"Meaningful Sequence"

Key phrase in WCAG is "programatically determined"

Basically - things should be implemented correctly, according to validation

HTML is designed with accessibility in mind, and tools are designed to make HTML accessible

Alternative Text

<img src="img.jpg" alt="Alternative Text">

Read as "Image: Alternative Text"

What is in the image? What would someone sighted get from that image? What is the context?

Avoid images when HTML and text would be better


Captions are implemented in the video using VTT file
This is just a specially-formatted text file

Provide words as said, not as intended. People talk differently than the written word

There are specific rules for TV captions and live vs. pre-recorded video


Any time you have "time-based media" - i.e. audio, video, etc

Provide a text transcript in the design

Especially useful for people who don't have time to watch a video, but need information

"Graphic" Design

High enough contrast: 4.5:1 or 7:1 different enough colors

Shapes as well as colors, text as well as images

Designed to fit landscape and portrait, different sizes of screens

Block-level click targets are at least 44px x 44px

Text Spacing


Can someone use the website with multiple methods of interaction

Most critical: keyboard control vs. mouse control

Also designing for cognitive impairments

Keyboard Accessibility

Never remove outline property

Any :hover should also trigger on :focus

Clicking away vs. losing focus

Keyboard Navigation

Focus order: follows HTML code

"Skip to content" link

Providing context to location in site map


Really consider timeouts. Do you need to have it? How should you handle data storage?

Let users pause, stop, and hide animations and temporary text

Blinking things

No more than 3 flashes per second (0.333s timing)

Able to turn off animation

Respect prefers-reduced-motion

This is super-important. Unlike other design aspects, this can genuinely hurt people who are photo-sensitive.


"Information and operation of user interface must be understandable"

Content itself for the most part, but also a bit of code

Declaring Language

The lang="" attribute declares a language for that element

Typically at the top of the page

Specific language codes based

British English
Brazilian Portugese

Definitions, Abbreviations & Pronunciation

Various HTML tags, such as <abbr>, <dfn>

Oftentimes, just better to use your words instead

For example, using katakana immediately after kanji in Japanese

慶應大学 (けいおうだいがく)


Just went through a lot of different aspects and specific issues

Goal is to think about users, all of your users, in all their situations

Make it easy for people to use and enjoy your designs

Consider and study WCAG and even non-digital accessibility documentation