$30 off During Our Annual Pro Sale. View Details »

Making your products accessible to everyone

Making your products accessible to everyone

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

Anand Chowdhary

September 28, 2019
Tweet

More Decks by Anand Chowdhary

Other Decks in Technology

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