Different Kinds of Disability
"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"
Big shift over past few years: no longer considered "edge cases" due to personal conditions
Now, a matter of "mismatched human interactions"
What experience is more important to analyze?
WebAIM Checker
Using your phone's screen reader
Testing interactions with your non-dominant hand
Perceivable
Operable
Understandable
Three Levels of Compliance: Level A, Level AA, Level AAA
Can someone see/hear the content?
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
<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
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
Can someone use the website with multiple methods of interaction
Most critical: keyboard control vs. mouse control
Also designing for cognitive impairments
Never remove outline property
Any :hover should also trigger on :focus
Clicking away vs. losing focus
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
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
The lang="" attribute declares a language for that element
Typically at the top of the page
Specific language codes based
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