about me

• Proud dog mom on Instagram
• Front end developer @Slack
• Front end developer @CFPB.gov

Why accessibility

Because everyone deserves to access the web

Because accessibility improvements help everyone

Because semantic HTML and accessible patterns will make your job as a developer easier

ACCESSIBLE INTERFACES HELP

• vim users
  visual users with UX enhancement
   
• People using laptops one-handed
  visual physical-impaired users
   
• Screenreader users
  blind users

Appropriate use of color

don't rely on it

Color contrast

Maintain 4.5 color Contrast contrast ratio

Do not rely on color alone

Essentials of keyboard navigability

• Can you navigate to everything with a keyboard?
   
• Can you skip repetitive links and tabbing?
   
• Can you see when you're navigating?
   
• Can you get your keyboard focus "stuck"?

How to test!

tab

tab

shift

Move forward

Move backward

How to test!

enter

spacebar

↑

↓

→

←

Spacebar can select items like dropdowns, buttons, checkboxes. 

Scroll through dropdowns, radio buttons, sliders, autocompletes.

Enter can select buttons and links.

Resources

Cheatsheet:    

http://webaim.org/techniques/keyboard/

WAI-ARIA Authoring Practices:

(For complex widgets)

https://www.w3.org/TR/wai-aria-practices-1.1/

Let's try this

http://webaim.org/techniques/forms/controls

Common pitfalls

Watch your focus!

a { outline: none; }

Skip repetitive links with skip links

#skip-nav {
    position: absolute;
    top: unit(-@grid_gutter-width / @base-font-size-px, em);
    left: unit(@grid_gutter-width / @base-font-size-px, em);
    background: transparent;
    transition: transform 1s ease, background .5s linear;
    z-index: 20;
}

#skip-nav:focus {
    // Your button markup
    position: absolute;
    top: 0;
    outline: 0;
    transition: transform .1s ease, background .2s linear;
}

<div class="button"></div>

<div class="button" role="button"></div>

<div class="button" 
     role="button"
     tabindex="0"></div>

Using unsemantic HTML

// Use semantic elements wherever possible.

<button></button>

Use semantic HTML

Common Pitfalls:

Can you get stuck using a keyboard?

• Can you tab out of a modal without exiting?
   
• Can you trap your keyboard focus unintentionally and never get out?

Can we automate it?

Automated tools!

Axe-core

https://github.com/dequelabs/axe-core
 

Node-Wcag

https://github.com/cfpb/node-wcag

Tota11y

http://khan.github.io/tota11y/

Questions?