Building accessible apps

@kimberlymunoz

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

Getting started with accessibility

 

1. Appropriate use of color

2. Semantic HTML

3. Keyboard Accessibility

4. Learning more

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"?

These are all listed under WCAG
https://www.w3.org/WAI/intro/wcag

Turning on keyboard accessibility

How to test!

tab

tab

shift

Move forward

Move backward

Pro-Tip:

If you use links and buttons, you probably have this covered.

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

Common pitfalls

Watch your focus!

a { outline: none; }

Also, make sure it makes sense. Don't skip around.

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 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?

Copy of Keyboard Testing Presentation

By Kimberly Munoz

Copy of Keyboard Testing Presentation

Presentation given at WaffleJS on keyboard testing.

  • 1,800