🤘 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

ROBOTS 🤖

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 💃🏽

focus

Twitter focus state

good

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');
	modal.focus();
	...
  }
							   
							

offscreen content

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

offscreen content

forms

clearly defined boundaries

Twitter focus state

labels

color only errors

Error with only color

skip links

skip link example from airbnb

Semantic HTML

role, name, state & value

						
							
CLICK ME

label types

  1. visible
  2. text alternatives

text alternatives

						
							cat staring off in the distance menacingly
						
					  

Can't get no semantics

ARIA

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
pa11y
Accessibility Developer Tools
Lighthouse - Google Chrome
The a11y project

be the color contrast you wish to see in the world