🤘 a11y and u 🤘

a screenshot BC revenue services website
a screenshot BC revenue services website

👍🏻 a11y == 👍🏻 er'body


In the US, 1 in 5 adults have a disability

A woman who has fallen and can't get up
A man squinting

Impairment Temporalities

  • temporary
  • permanent
  • situational

Impairment Categories

  • visual
  • motor
  • hearing
  • cognitive


A braille device for computer

Web Content Accessibility Guidelines

  1. Perceivable
  2. Operable
  3. Understandable
  4. Robust
  1. Focus
  2. Semantic HTML
  3. Navigability
  4. ARIA
  5. Style 💃🏽


Twitter focus state


focus contrast

tab order == dom order

expect it to be the same as visual order

nav content #1
danger you have done a bad
Thinkific modal focus

Managing Focus

  // Use the focus() method to set focus
  function showModal() {
	var modal = document.getElementById('modal2');

offscreen content

							// for debugging 
							/* for hidden elements */
							.hide {
								display: none;
							.show {
								display: block;

offscreen content


clearly defined boundaries

Twitter focus state


color only errors

Error with only color

skip links

skip link example from airbnb

Semantic HTML

role, name, state & value


label types

  1. visible
  2. text alternatives

text alternatives

							cat staring off in the distance menacingly

Can't get no semantics


Responsive Design

minimum color contrast for font sizes

colour contrast

zoomed in version of www.thinkific.com

pa11y demo 🐶

								npx pa11y www.thinkific.com

you so extra 👑

WebAIM Checklist
Accessibility Developer Tools
Lighthouse - Google Chrome
The a11y project

be the color contrast you wish to see in the world