Making your products accessible to everyone

I spoke about accessibility on the web at Women Who Code Cloud 2019 in San Francisco.

Transcript

1. Anand Chowdhary
   Oswald Labs
   Making your products
   accessible to everyone
   

   View Slide

2. 2008
   Published my first website to the web
   Using a .co.nr free domain name
   2016
   Founded Oswald Labs
   Started doing R&D in accessibility technology
   2018
   Forbes 30 Under 30
   Also featured in 30 articles and interviews
   

   View Slide

3. Government of
   National Capital Territory
   of Delhi
   

   View Slide

4. Standards
   Customization
   Cloud & APIs
   1
   2
   3
   

   View Slide

5. Standards
   1
   W3C WAI WCAG
   

   View Slide

6. W3C WAI WCAG
   World
   Wide
   Web
   Consortium
   Web
   Accessibility
   Initiative
   Web
   Content
   Accessibility
   Guidelines
   

   View Slide

7. 329M
   Population of the

   United States (2019
   1
   3
   700M
   Lower estimate of
   number of dyslexics
   Upper estimate is as high as 1.4 billion
   2
   DY S L E X I A
   

   View Slide

8. 1B
   Estimated number of
   people with disabilities
   4
   OT H E R 

   D I SA B I L I T I E S
   3
   700M
   Lower estimate of
   number of dyslexics
   Upper estimate is as high as 1.4 billion
   2
   DY S L E X I A
   

   View Slide

9. Don’t make any assumptions

   about your users.
   

   View Slide

10. My setup at home
    13” MacBook Air
    My setup at work
    15” MacBook Pro with a
    monitor, keyboard, mouse
    

    View Slide

11. INPUT
    Mouse
    Keyboard
    Dictation
    Optical tracking
    Sip-and-puff
    OUTPUT
    Screen
    Screen reader
    Braille
    Voice UI
    

    View Slide

12. Semantics
    Content & labels
    Color contrast
    1
    2
    3
    

    View Slide

13. 

    

    

    

    !

    

    
    H1!
    !

    !

    !

    !

    !
    HTML
    Semantics
    1
    Just using the right
    markup makes your
    website accessible on its
    own.
    

    View Slide

14. 

    

    

    

    !

    

    
    H1!
    !

    !

    !

    !

    !
    HTML
    lang="en"
    Tell screen readers which
    language (and accent) to
    read in, and help SEO
    with localization.
    

    View Slide

15. 

    

    

    

    !

    

    
    H1!
    !

    !

    !

    !

    !
    HTML
    charset="utf-8"
    Tell the rendering engine
    which character encoding
    to use (when in doubt,
    use UTF8
    

    View Slide

16. 

    

    

    

    !

    

    H1!
    !

    !

    !

    !

    !
    HTML
    
    The header element
    provides semantic
    information: this is the
    masthead.
    

    View Slide

17. 

    

    

    

    !

    

    
    H1!
    !

    !

    !

    !

    !
    HTML
    
    Heading elements are
    powerful landmarks
    which help screen
    readers navigate.
    

    View Slide

18. 

    

    

    

    !

    

    
    H1!
    !

    !

    !

    !

    !
    HTML
    
    Finally, this is the main
    content of your website.
    Users should be able to
    skip to this content.
    

    View Slide

19. List of landmarks on a webpage 7
    

    View Slide

20. View Slide

21. Content & labels
    2
    Reading level: 80 word paragraphs in high-school level
    Internationalization: Multi-lingual content availability
    Alternate text: Add alternate text to visual elements
    Captioning: Use [CC for media elements
    

    View Slide

22. Demo: We can find labels using the
    Accessibility Tree
    

    View Slide

23. alt="Alternate text"
    title="Title text"
    aria-label="ARIA label"
    aria-labelledby="#ref"
    >
    A span
    with an ID!
    Inner text!
    !
    HTML
    Sandbox link: https://codesandbox.io/s/
    xenodochial-greider-gg8nq
    What’s the label
    for this button?
    etc.ch/mtCP
    

    View Slide

24. Use both labels and icons
    Not everyone will understand the metaphor
    Labels help people with visual impairments
    Icons help unlettered people (Shravan example)
    Use empty alternate text for icon images
    

    View Slide

25. Color contrast
    3
    4.51
    Level AA
    71
    Level AAA
    21
    Links & text
    A A A
    

    View Slide

26. Manually testing
    accessibility
    Automated web
    testing tools
    

    View Slide

27. Manually testing accessibility
    SCREEN READERS
    VoiceOver
    JAWS
    NVDA
    SCREEN READERS
    ChromeVox
    TalkBack
    Microsoft Narrator
    

    View Slide

28. Automated testing tools
    EXTENSIONS
    Lighthouse
    WAVE
    a11y.css
    CLI UTILITIES
    A11y
    Pa11y
    Axe
    

    View Slide

29. Demo: We can find issues on the WWCode
    Cloud site using Lighthouse
    

    View Slide

30. [aria-hidden], .sr-only, display: none
    Remove a node from the Accessibility tree with aria-
    hidden, but show it to sighted users
    Hide a node from sighted users, but keep it in the
    Accessibility tree with .sr-only
    display: none is a combination, but stays in DOM
    

    View Slide

31. 1B
    Estimated number of
    people with disabilities
    4
    P E O P L E W I T H 

    D I SA B I L I T I E S
    7.7B
    Estimated number of
    people on Earth
    6
    WO R L D 

    P O P U L AT I O N
    

    View Slide

32. Customization
    2
    Dark theme Reduced motion Even more
    

    View Slide

33. @media (prefers-color-
    scheme: dark) {

    .dark-mode-screen {

    width: 100vw;

    height: 100vh;
    position: fixed;

    top: 0;

    left: 0;

    background: white;

    mix-blend-mode:
    difference;

    }

    }
    CSS
    Simple dark
    theme example
    Source link: https://dev.to/wgao19/night-mode-
    with-mix-blend-mode-difference-23lm
    

    View Slide

34. @media (prefers-reduced-
    motion: reduce) {

    * {

    transition: none !
    important;

    animation: none !
    important;

    }
    }
    CSS
    Simple reduced
    motion example
    https://github.com/AnandChowdhary/prefers-
    reduced-motion tells you the same in JS.
    

    View Slide

35. View Slide

36. Cloud & APIs
    3
    USE CASES
    Read aloud
    AutoALT
    Translation
    CLOUD APIS
    AWS Polly, GCP
    Azure Vision
    Oswald Labs Platform
    

    View Slide

37. async captionIt() {

    const images = 

    document.

    querySelectorAll(

    "img:not([alt])"

    );
    images.forEach(img !=> {

    img.setAttribute(

    "src",

    await caption(img);

    );

    });

    }
    JAVASCRIPT
    Simple AutoALT
    using Cloud API
    Oswald Labs Platform APIs make it easy to
    generate image captions using deep learning.
    

    View Slide

38. async caption(img) {

    const f = await fetch(

    `${BASE_URL}?url=${
    img.getAttribute(

    "src"

    );

    }`

    );

    return

    (await f.json())

    .caption;

    }
    JAVASCRIPT
    Simple AutoALT
    using Cloud API
    Oswald Labs Platform APIs make it easy to
    generate image captions using deep learning.
    

    View Slide

39. Demo: Instagram and Facebook use deep
    learning to generate captions
    

    View Slide

40. Standards
    Customization
    Cloud & APIs
    1
    2
    3
    

    View Slide

41. Anand Chowdhary
    Oswald Labs
    anandchowdhary.com
    AnandChowdhary
    

    View Slide

42. References
    1.The population of the United States is 329,679,329 on September 20, 2019, according to the U.S. Census
    Bureau’s population clock available at https://www.census.gov/popclock/.
    2.The lower limit for the number of people with dyslexia is 10% of the world population according to the sentence
    “Researchers estimate that dyslexia affects at least one in 10 people” on https://www.sreb.org/blog-post/dont-
    be-afraid-say-dyslexia.
    3.The upper estimate for the number of people with dyslexia is 20% of the world population, as stated in the
    sentence “According to a Yale study 1 out of 5 people suffer from dyslexia” on https://www.edubloxtutor.com/
    facts-about-dyslexia/.
    4.According to the World Bank, “One billion people, or 15% of the world’s population, experience some form of
    disability” https://www.worldbank.org/en/topic/disability
    5.The A, AA, and link color contrast ratio requirements, along with the WCAG, are available at https://www.w3.org.
    6.The world population as of September 28, 2019, is 7.733 billion according to https://worldmeters.info.
    7.Image for list of landmarks on a webpage: https://www.w3.org/TR/2017/NOTE-wai-aria-practices-1.120171214/
    examples/landmarks/images/landmarks-vo.png.
    

    View Slide