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

Accessing Accessible Accessibility

Jenn
August 17, 2017

Accessing Accessible Accessibility

The World Health Organization states that one billion people live with disabilities. And estimates put internet usage with a screen reader as high as 3.4% of all internet traffic around the world. Web accessibility can help.

So what is web accessibility and who needs it? Is engineering accessibility enough? How do you build an cross-functional accessibility culture? And what can you do to prevent accessibility regressions?

I had all the same questions… and only four months to guarantee all our consumer user flows were accessible. Well, what happened? Come learn what it takes to lead a web accessibility movement within your company!

Jenn

August 17, 2017
Tweet

More Decks by Jenn

Other Decks in Programming

Transcript

  1. A C C E S S I N G A C C E S S I B L E
    A C C E S S I B I L I T Y
    B Y: J E N N I F E R W O N G

    View full-size slide

  2. J E N N I F E R W O N G
    S O F T WA R E E N G I N E E R
    @ M Y B L U E W R I S T B A N D
    M O C H I M A C H I N E . C O M
    W H O A M I ?

    View full-size slide

  3. P R I V I L E G E C H E C K
    • Cisgender
    • Straight
    • Middle to upper middle class
    • No physical, social, or learning disabilities
    • College educated
    • Socially acceptable body type

    View full-size slide

  4. A C C E S S I B I L I T Y
    I N T E R E S T
    • jQuery SF
    • Bay Area Accessibility and
    Inclusive Design

    View full-size slide

  5. W H AT I S W E B A C C E S S I B I L I T Y ?
    S O O O …

    View full-size slide

  6. – W I K I P E D I A
    “Web accessibility refers to the inclusive practice
    of removing barriers that prevent interaction with,
    or access to websites, by people with disabilities.
    When sites are correctly designed, developed and
    edited, all users have equal access to information
    and functionality.”

    View full-size slide

  7. Turkish Airlines!

    View full-size slide

  8. W H O N E E D S
    A C C E S S I B I L I T Y ?

    View full-size slide

  9. E V E RY O N E !

    View full-size slide

  10. W H O I S E V E RY O N E ?
    • Visual: Blindness, low vision, poor eyesight, color blindness
    • Motor / Mobility: Difficulty or inability to use the hands, tremors,
    muscle slowness, loss of fine muscle control, Parkinson's Disease,
    muscular dystrophy, cerebral palsy, stroke
    • Auditory: Deafness, hearing impairments, hard of hearing
    • Seizures: Photo epileptic seizures caused by flashing effects.
    • Cognitive / Intellectual: Developmental disabilities, learning
    disabilities (dyslexia, dyscalculia, etc.), and cognitive disabilities
    affecting memory, attention, developmental "maturity," problem-
    solving and logic skills

    View full-size slide

  11. T H E M Y T H O F T H E M I N O R I T Y U S E R
    S TAT I S T I C S

    View full-size slide

  12. • 18.7% of the U.S. population have some type of
    disability and 12.6% have a severe disability.
    • 3.4% of the Romanian population have some type of
    disability.
    • Up to 7.5% of the internet population world wide is
    estimated to have a disability.
    T H E U S & W O R L D W I D E
    S TAT I S T I C S

    View full-size slide

  13. • 28.1% of sessions are people over 45.
    • The bounce rate for this population is higher for
    people over 45, which may be due to usability issues.
    A P R E V I O U S C O M PA N Y
    S TAT I S T I C S

    View full-size slide

  14. W H Y A C C E S S I B I L I T Y ?

    View full-size slide

  15. – M E
    “You’re already here. At this talk.
    So let’s be a11y allies!”

    View full-size slide

  16. • Section 504 (US - 1973)
    • Section 508 (US - 1973)
    • Law No. 448 (RO - 2006)
    • Regarding the
    Protection and
    Promotion of the Rights
    of Disabled Persons
    I T ’ S T H E L A W
    W H Y A C C E S S I B I L I T Y ?

    View full-size slide

  17. W E B A C C E S S I B I L I T Y L A W S
    • Australia
    • Canada
    • China
    • Brazil
    • Hong Kong
    • India
    • Israel
    • Japan
    • New Zealand
    • Norway
    • Republic of Korea
    • Switzerland
    • Taiwan
    • United States
    • European Union
    • Denmark
    • Finland
    • France
    • Germany
    • Ireland
    • Italy
    • Netherlands
    • Portugal
    • Spain
    • Sweden
    • United Kingdom (?)

    View full-size slide

  18. B R U C E M A G U I R E V S .
    S Y D N E Y O R G A N I Z I N G
    C O M M I T T E E F O R T H E
    O LY M P I C G A M E S ( S O C O G )
    • June 1999: Maguire filed a
    complaint with the Human
    Rights & Equal Opportunities
    Commission under the DDA.
    • Maguire could not access the
    contents of the Olympic Games
    website.
    • Maguire won.
    • SOCOG did not make the
    changes, and was fined
    AU$20,000

    View full-size slide

  19. – B R U C E M A G U I R E
    “It's an ongoing campaign to raise awareness
    about web accessibility and to keep asserting the
    fact that people with a disability have as much
    right to choice and inclusion as the rest of the
    community.”

    View full-size slide

  20. • National Federation for the
    Blind v. Target (2008 - paid
    US$6M)
    • National Agency for Payments
    and Social Inspections issued
    167 fines totaling $310,000
    (2011 - 2012)
    • National Council for
    Combatting Discrimination v.
    City Halls for public transit
    access (2014)
    O T H E R
    L A W S U I T S
    W H Y A C C E S S I B I L I T Y ?

    View full-size slide

  21. • Accessibility
    automatically
    improves the SEO of
    websites
    • Googlebot is the
    world’s most prolific
    blind user of the
    internet
    W H Y A C C E S S I B I L I T Y ?
    S E O
    Affirmative

    View full-size slide

  22. H O W - T O
    A C C E S S I B I L I T Y ?

    View full-size slide

  23. S TA N D A R D S
    H O W T O A C C E S S I B I L I T Y

    View full-size slide

  24. • Web Content Accessibility Guidelines (WCAG 2.0)
    • Section 508 (US)
    S TA N D A R D S
    W E B S TA N D A R D S

    View full-size slide

  25. • Does not sufficiently put user at heart of the process
    • Does not specifically address accessibility for those
    with learning or cognitive disabilities
    • Does not keep up with current technology (2008)
    • Guidelines are difficult to navigate
    S TA N D A R D S
    C R I T I C I S M S

    View full-size slide

  26. • Seattle Link Light Rail Train
    • Real world example of
    accessibility for those with
    cognitive disabilities
    • Each station has an image
    and color
    S TA N D A R D S
    C O G N I T I V E
    D I S A B I L I T I E S

    View full-size slide

  27. • Accessibility Guidelines (AG)
    • Approved on November 4, 2016
    • https://www.w3.org/WAI/GL/wiki/
    Process_of_Designing_Silver
    • You can participate!
    S TA N D A R D S
    S I LV E R !

    View full-size slide

  28. T E S T I N G
    H O W T O A C C E S S I B I L I T Y

    View full-size slide

  29. • Use the Tab key to move
    through a website
    • Try using standard
    keyboard shortcuts
    T E S T I N G
    K E Y B O A R D
    N AV I G AT I O N

    View full-size slide

  30. • JAWS
    • ZoomText
    • Window-Eyes
    • NVDA
    • VoiceOver
    • TalkBack
    T E S T I N G
    S C R E E N
    R E A D E R S

    View full-size slide

  31. S C R E E N R E A D E R S
    T E S T I N G

    View full-size slide

  32. • Braille readers
    • High contrast keyboards
    T E S T I N G
    A S S I S T I V E
    T E C H N O L O G Y

    View full-size slide

  33. • Mouth stick
    • Head wand
    • Chin controller
    T E S T I N G
    A S S I S T I V E
    T E C H N O L O G Y

    View full-size slide

  34. • Eye tracking device
    • Single switch onscreen
    keyboard
    T E S T I N G
    A S S I S T I V E
    T E C H N O L O G Y

    View full-size slide

  35. • Wave by WebAim
    • aXe by Deque University
    • tota11y by Khan Academy
    T E S T I N G
    W E B VA L I D AT O R S

    View full-size slide

  36. • WebAim
    • Contrast Checker
    • Accessible Colors
    T E S T I N G
    C O L O R C O N T R A S T

    View full-size slide

  37. T E S T I N G
    N O C O F F E E

    View full-size slide

  38. • Remove CSS
    • In person user testing
    • Blindfolds, blacked out
    glasses, turn off screen
    brightness
    • Color blindness or low
    vision simulator
    T E S T I N G
    O T H E R I D E A S

    View full-size slide

  39. C O D I N G
    H O W T O A C C E S S I B I L I T Y

    View full-size slide

  40. • Don’t use as
    • Don’t use as
    • Don’t use as
    C O D I N G
    S E M A N T I C H T M L

    View full-size slide

  41. - P U P P Y C AT
    “USE THE SWORD AS A SWORD.”

    View full-size slide

  42. • Clear heading structure
    • Use , , , , ,
    , and when appropriate to
    indicate layout
    C O D I N G
    S E M A N T I C H T M L

    View full-size slide

  43. • alt=“something descriptive and easily
    understandable”
    • alt=“” when decorative with no other function
    • Text description if a complex graphic, e.g. map or
    chart
    C O D I N G
    I M A G E S , M A P S , C H A R T S

    View full-size slide

  44. • Inputs need
    • Make sure they are associated!
    • for=“”

    name=“”
    • Consistency (Labels & Buttons across site)
    C O D I N G
    F O R M S

    View full-size slide

  45. • Non color indicator
    • Clear :hover and :focus states
    C O D I N G
    L I N K S & B U T T O N S

    View full-size slide

  46. • Don’t use tabindex if you can avoid it.
    • If you can’t, only use tabindex=0 or tabindex=-1
    • 0 indicates that the element should be placed in the
    default navigation order.
    • -1 removes the element from the default navigation
    flow and allows it to receive programmatic focus
    (from a link or with scripting).
    C O D I N G
    TA B O R D E R I N G

    View full-size slide

  47. • Closed captions
    • No auto play!
    • A way to pause, start, and stop
    • Transcript
    C O D I N G
    V I D E O S A N D A N I M AT I O N S

    View full-size slide

  48. A R I A
    H O W T O A C C E S S I B I L I T Y

    View full-size slide

  49. W 3 C
    WAI ARIA:
    Web Accessibility Initiative
    Accessible Rich Internet Applications

    View full-size slide

  50. B E C A R E F U L
    A R I A V S . A RYA

    View full-size slide

  51. • Roles
    • States
    • Properties
    A R I A
    S T R U C T U R E

    View full-size slide

  52. • Main indicator of type
    • Allows tools to present and support interaction with an
    object consistent with user expectations of other
    objects of that type, e.g. role=“form”
    A R I A
    R O L E S

    View full-size slide

  53. • Abstract
    • Landmark
    • Document
    • Widget
    A R I A
    R O L E S

    View full-size slide

  54. • aria-busy
    • aria-disabled
    • aria-grabbed
    • aria-hidden
    • aria-invalid
    A R I A
    S TAT E S

    View full-size slide

  55. • aria-atomic
    • aria-controls
    • aria-describedby
    • aria-dropeffect
    • aria-flowto
    • aria-haspopup
    • aria-label
    • aria-labelledby
    • aria-live
    • aria-owns
    • aria-relevant
    A R I A
    P R O P E R T I E S

    View full-size slide

  56. • Visible Link at top of page
    • Visible link elsewhere on page
    • Invisible link
    • Invisible link, visible with keyboard focus
    A R I A
    S K I P L I N K S

    View full-size slide

  57. P R E V E N T I N G
    R E G R E S S I O N S
    H O W T O A C C E S S I B I L I T Y

    View full-size slide

  58. • Unit Tests
    • Automation Tests
    • Modular, reusable components
    P R E V E N T I N G R E G R E S S I O N S
    T E S T S A N D R E U S E

    View full-size slide

  59. N A R R AT O R
    TA L K B A C K
    V O I C E O V E R
    D E M O T I M E !

    View full-size slide

  60. N A R R AT O R
    • Microsoft!
    • Start & Stop: Windows logo key + Ctrl + Enter
    • View All Commands: Caps Lock + F1

    View full-size slide

  61. TA L K B A C K
    • Android! 4.0+ has more options
    • How to turn on TalkBack
    • TalkBalk > Settings > Launch TalkBack tutorial
    • Touch to explore

    Double tap

    Two finger scroll

    View full-size slide

  62. V O I C E O V E R
    • Apple OSX and iOS
    • Start & Stop (Desktop)
    • Command + F5
    • Open VoiceOver Utility

    View full-size slide

  63. A N A 1 1 Y S T O RY
    About a place where I worked

    View full-size slide

  64. A L L I L A C K E R
    S TA R T E R

    View full-size slide

  65. • Benefits
    • Sales
    • Legal
    • Consumer
    • International
    A C Q U I R I N G B U Y I N
    S TA R T E R

    View full-size slide

  66. Accessibility audit on main consumer user flows

    View full-size slide

  67. C R O S S F U N C T I O N A L T E A M
    • Alby, Maggie, Daniel (Nashville), Lucas (Mendoza), Maxi (Mendoza),
    Octavio (Mendoza): Engineering
    • Tricia: Content Strategy
    • Randy: Account Exec (Schools)
    • Sun, Tom: Design
    • Allison: Customer Support (WeRock)
    • Senna: Quality Assurance (QA)
    • Julia: Legal

    View full-size slide

  68. • Google Drive (centralized)
    • Videos
    • Internal Docs
    D O C U M E N TAT I O N
    B E S T P R A C T I C E S
    E V E N T B R I T E

    View full-size slide

  69. • Color Contrast Analyser
    • tota11y (on Dev & QA)
    • eslint-plugin-jsx-a11y
    • Acceptance Tests
    W H AT W E U S E D
    T O O L S

    View full-size slide

  70. C O L O R C O N T R A S T A N A LY S E R
    ( F O R S K E T C H )
    T O O L S

    View full-size slide

  71. T O TA 1 1 Y
    T O O L S

    View full-size slide

  72. A C C E P TA N C E T E S T S
    W H AT W E U S E

    View full-size slide

  73. • Benchmarks
    • Jira Dashboard
    • Goals
    • Deadlines
    • Involve a Program Manager
    P R O J E C T M A N A G E M E N T
    A N A 1 1 Y S T O RY

    View full-size slide

  74. • 2 tickets
    • per team (~3-7 developers)
    • per sprint (two weeks)
    • for 10 sprints
    I N I T I A L E S T I M AT E
    A N A 1 1 Y S T O RY

    View full-size slide

  75. A C C E S S I B I L I T Y D A S H B O A R D
    A N A 1 1 Y S T O RY

    View full-size slide

  76. W O R K A L O N E
    D O N ’ T

    View full-size slide

  77. A C C E S S I B I L I T Y W O R K S H O P
    V O I C E O V E R

    View full-size slide

  78. - M E A F T E R E V E RY O N E F R E A K E D O U T
    “We must work as a team.”

    View full-size slide

  79. L U C A S PA D O VA N
    S P R E A D

    View full-size slide

  80. W H AT H A P P E N E D ?
    S O O O …

    View full-size slide

  81. - M E
    “It’s a work in progress.
    Sorry for any convenience caused.”

    View full-size slide

  82. F U T U R E P L A N S
    • Complete all of our Jira Tickets
    • Build out Accessibility Process checklist
    • For Product, Design, Engineering, QA
    • Focused effort from Frontend Foundry team

    View full-size slide

  83. R E S O U R C E S
    YAY !

    View full-size slide

  84. R E S O U R C E S
    • WebAim
    • w3 WAI WCAG
    • Web a11y Slack Channel
    • Bay Area Accessibility and Inclusive Design
    • Google Accessibility

    View full-size slide

  85. J E N N
    A 1 1 Y

    View full-size slide