Upgrade to Pro — share decks privately, control downloads, hide ads and more …

Simple Accessibility: The Bare Minimum for Compassionate Development

Simple Accessibility: The Bare Minimum for Compassionate Development

As front-end developers, we bear significant responsibility to ensure that our teams’ creations can be used by real people. We’re often told that accessibility is a “nice idea,” but that it’s too costly to learn, implement, or validate, or that people who “need accessibility” can just ask someone to help them. We then build sites and apps for an audience of mythical people with exceptional eyesight and hearing, full range of motion in their bodies, impeccable memory, and as much attention span as we think they should have.

We can do better, and if we want to take pride in crafting quality software, we must. Learn what accessibility really covers, how to incorporate it into ongoing development, and how to verify we’re doing it correctly.

Melissa Avery-Weir

September 13, 2014

More Decks by Melissa Avery-Weir

Other Decks in Programming


  1. Simple accessibility THE BARE MINIMUM FOR COMPASSIONATE DEVELOPMENT Melissa Avery-Weir

  2. Our jobs, our passions oWe are creators oWe are empowered

    oWe are… constrained
  3. Accessibility and “Disability” o Auditory: hard of hearing, deafness o

    Visual: low-vision, blindness, color blindness o Neurological or Cognitive: memory impairments, distractibility, learning disabilities o Motor: reduced response time, inability to use a mouse, lack of fine motor control
  4. Bring forth the compassion “Deep awareness of the suffering of

    another, coupled with the wish to relieve it.” —Wiktionary
  5. “They’ll have someone to help them do it.” —Someone I

    don’t want to work for
  6. How do we do better? o Semantic markup and ARIA

    roles o Explicitly connect content with descriptors o Provide text alternatives o Keyboard accessibility
  7. Accessible Rich Internet Applications “ARIA” o Part of Web Content

    Accessibility Guidelines (WCAG) 2.0 o Provides optional roles, state information, and “live regions” for more semantic markup o Example roles: banner, navigation, search, main, form
  8. ARIA roles example

  9. Semantic markup and ARIA roles o Use h1-h6, p, ul/ol/dl,

    header, nav, aside, footer Why? 1. Screenreaders will announce “landmarks”, headers, and lists 2. Allows users to customize their view of pages
  10. https://www.youtube.com/watch?v=jiA9RJBwXvw

  11. Semantic Markup and Roles 1. Use semantic HTML5 markup (headers,

    lists) 2. Use the “role” attribute to indicate landmarks: banner, navigation, search, main, form
  12. Connect content with descriptors Visual users have visual context

  13. ARIA label, labelledby, describedby o aria-label: Text label for an

    object o aria-labelledby: ID references to elements that label a focusable object o aria-describedby: ID references to elements that describe an object
  14. Split label – the better way

  15. Provide text alternatives o Concise, accurate alt attributes on images

    o Don’t treat “title” on images as a text alternative o Descriptions of charts and diagrams o Encourage video/audio content creators to provide closed captioning and transcripts
  16. Why provide text alternatives? o Screenreaders o Slow connections o

    Triggering content
  17. Keyboard accessibility o Events that trigger on hover, mouseover, or

    mouseout should probably also trigger on focus and blur o onclick isn’t mouse-specific o Functionality should be available to keyboards o JS widgets get complicated
  18. Widget Libraries o jQuery UI is not accessible o Kendo

    UI seems pretty awesome o Drag and Drop/Sortables: not accessible in the big libraries o You can hack extend toolkits by adding keypress event bindings
  19. Our four techniques 1. Use semantic markup and ARIA roles

    2. Associate content with descriptors 3. Provide text alternatives 4. Ensure keyboard access to all functionality
  20. Are we doing it right? o Navigate the site/app without

    a mouse o Can you complete every form, navigate to any page? o Give yourself a custom stylesheet that overrides base styles o Turn off CSS o WAVE: Web Accessibility Evaluation Tool o JAWS has a 40-minute trial
  21. Compassionate culture “Sympathetic consciousness of others' distress together with a

    desire to alleviate it.” —Merriam-Webster
  22. Raising the bar o Video/audio captioning and transcripts o Care

    for color contrast o Use ARIA “live regions” o Eliminate time restrictions o Font scalability o Interactive element size o Clarity of interactive elements o Access keys o Skip links for repetitive content (nav) o Allow users to disable flashing content o Add breadcrumb trails o Give expect input formats o Link to or provide pronunciations o Allow undos or restores o Don’t disguise one element as another o Pursue accessibility certification
  23. Resources o ARIA: http://www.w3.org/TR/wai-aria o WebAIM (Web Accessibility In Mind):

    http://webaim.org/ o WAVE: http://wave.webaim.org/ o SSB Bart Group: https://www.ssbbartgroup.com/index.php