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

Universal web design [HackerYou a11y club]

newtron
October 24, 2016

Universal web design [HackerYou a11y club]

HackerYou a11y club
2016-10-24

newtron

October 24, 2016
Tweet

More Decks by newtron

Other Decks in Technology

Transcript

  1. UNIVERSAL WEB DESIGN
    DAVE NE WTON • @N EWTRON
    HACKE RYO U A 11Y CLUB 2016

    View Slide

  2. 1950

    View Slide

  3. Image: Boileau

    View Slide

  4. Image: Baanlaesuan

    View Slide

  5. Image: Goodnight Raleigh

    View Slide

  6. Image: Museum of Disability History

    View Slide

  7. Rehabilitation Act (1973)
    Americans with Disabilities Act (1990)
    Vocational Rehabilitation Amendment Act (1965)
    Architectural Barriers Act (1968)
    Education for Handicapped Children Act (1975)
    Fair Housing Amendments Act (1988)
    Image: Museum of Disability History

    View Slide

  8. Image: Wikimedia Commons

    View Slide

  9. Image: Flashmoment

    View Slide

  10. Image: Wikimedia Commons

    View Slide

  11. “ Universal design is the design of
    products and environments to be
    usable by all people… ”

    —Ron Mace

    View Slide

  12. Images: CREEC , Encore

    View Slide

  13. Now

    View Slide

  14. View Slide

  15. Disability

    View Slide

  16. Disability
    Performance

    View Slide

  17. Disability
    Performance
    Browsers/devices

    View Slide

  18. “ Your success as a developer is not
    determined by the tools that you use, or even
    the style of your code, it is the business
    impact that your code has… ”

    —Steven Michael Thomas

    View Slide

  19. Make it
    easy
    Make it
    possible

    View Slide

  20. Make it
    easy
    Make it
    possible
    (maybe)

    View Slide

  21. Make it
    easy
    Make it
    possible
    (maybe)

    View Slide

  22. Make it
    easy
    Make it
    possible
    (maybe)

    View Slide

  23. Disability

    View Slide

  24. View Slide

  25. 19% of people have a disability
    CDC
    Colour Blind Awareness
    UNH

    View Slide

  26. 19% of people have a disability
    —

    4% of adults have cognitive disabilities
    8% of men (and 0.5% of women) are color blind
    9% of adults have vision trouble
    15% of adults have physical functioning difficulty
    17% of adults have hearing trouble
    CDC
    Colour Blind Awareness
    UNH

    View Slide

  27. 19% of people have a disability
    —

    4% of adults have cognitive disabilities
    8% of men (and 0.5% of women) are color blind
    9% of adults have vision trouble
    15% of adults have physical functioning difficulty
    17% of adults have hearing trouble
    —

    100% of people will be disabled in some way, at some point
    CDC
    Colour Blind Awareness
    UNH

    View Slide

  28. The disability market is about the size of China
    and is emerging as other markets have in the past—
    1.3 billion people and $1.2 trillion in annual disposable income
    Return on Disability

    View Slide

  29. Performance

    View Slide

  30. View Slide

  31. 33% of US adults don’t have home broadband
    Pew

    View Slide

  32. 33% of US adults don’t have home broadband
    —

    46% of black adults
    50% of Hispanic adults
    —

    37% of adults who make $20k–$50k/year
    59% of adults who make under $20k/year
    —

    45% of adults in rural areas
    Pew

    View Slide

  33. View Slide

  34. 19% of mobile connections in the US aren’t 4G/LTE
    OpenSignal 

    Ericsson

    View Slide

  35. 19% of mobile connections in the US aren’t 4G/LTE
    24% of mobile connections in Canada
    OpenSignal 

    Ericsson

    View Slide

  36. 19% of mobile connections in the US aren’t 4G/LTE
    24% of mobile connections in Canada
    47% of mobile connections in the UK
    51% of mobile connections in India
    OpenSignal 

    Ericsson

    View Slide

  37. 19% of mobile connections in the US aren’t 4G/LTE
    24% of mobile connections in Canada
    47% of mobile connections in the UK
    51% of mobile connections in India
    75% of mobile connections in Indonesia are 2G
    OpenSignal 

    Ericsson

    View Slide

  38. Browser and device support

    View Slide

  39. Image: OpenSignal

    View Slide

  40. If you only support IE11+ and latest two versions of Chrome, Firefox, Opera, Safari:
    360 Safe Browser
    Android
    BlackBerry
    Coc Coc
    IE (old)
    IEMobile (old)
    Maxthon
    MeeGo
    Microsoft-WebDAV
    Mozilla
    NetFront
    Nokia
    Phantom
    Puffin
    QQ Browser
    Samsung Internet
    StatCounter
    Sogou Explorer
    Sony PS3
    Sony PS4
    SonyEricsson
    Tizen
    UC Browser
    Yandex Browser
    Other/unknown

    View Slide

  41. If you only support IE11+ and latest two versions of Chrome, Firefox, Opera, Safari:
    you don’t support 30.03% of network traffic
    360 Safe Browser
    Android
    BlackBerry
    Coc Coc
    IE (old)
    IEMobile (old)
    Maxthon
    MeeGo
    Microsoft-WebDAV
    Mozilla
    NetFront
    Nokia
    Phantom
    Puffin
    QQ Browser
    Samsung Internet
    + older Chrome/Chromium, Firefox, Opera/Opera Mini, Safari
    StatCounter
    Sogou Explorer
    Sony PS3
    Sony PS4
    SonyEricsson
    Tizen
    UC Browser
    Yandex Browser
    Other/unknown

    View Slide

  42. Opera Mini
    UC Browser
    StatCounter

    View Slide

  43. Opera Mini UC Browser
    StatCounter

    View Slide

  44. View Slide

  45. JavaScript is not the enemy

    View Slide

  46. JavaScript is not the enemy
    JavaScript is your friend

    View Slide

  47. JavaScript is not the enemy
    JavaScript is your friend
    but…

    View Slide

  48. View Slide

  49. 1.1% of visits get a broken JavaScript experience
    gov.uk

    View Slide

  50. 1.1% of visits get a broken JavaScript experience

    0.1% turn it off or have a browser that doesn’t support it
    gov.uk

    View Slide

  51. 1.1% of visits get a broken JavaScript experience

    0.1% turn it off or have a browser that doesn’t support it
    0.9% have JS that messes up
    gov.uk

    View Slide

  52. page/script download malware blocking/manipulating scripts
    script parsing plugins/apps blocking/manipulate scripts
    firewalls CDN failure
    flakey/dropped connections poorly-written JS
    ISP blocking/manipulating scripts browsers without modern JS support
    1.1% of visits get a broken JavaScript experience

    0.1% turn it off or have a browser that doesn’t support it
    0.9% have JS that messes up
    gov.uk

    View Slide

  53. Image: Why availability matters

    View Slide

  54. Image: Why availability matters

    View Slide

  55. Tomorrow

    View Slide

  56. View Slide

  57. Resilience

    View Slide

  58. “ At Internet scale, the best you can hope for is
    to build a reliable software platform on top of
    components that are completely unreliable.
    That puts you in an environment where
    complex failures are both inevitable and
    unpredictable. ”

    —Jesse Robbins
    ACM Queue

    View Slide

  59. separate but equal?
    nope.

    View Slide

  60. Guess this wasn’t worthwhile…

    View Slide

  61. Tap here to get
    the features
    you need

    View Slide

  62. Click here to feel othered

    View Slide

  63. I C PAPER

    View Slide

  64. I C PAPER
    PAPER

    View Slide

  65. Performance
    Accessibility
    Progressive
    Enhancement
    Responsive web design

    View Slide

  66. let’s talk about
    progressive enhancement
    for a moment

    View Slide

  67. Map your work
    to your users’ reality

    View Slide

  68. “ Universal design is the design of
    products and environments to be
    usable by all people… ”

    —Ron Mace

    View Slide

  69. Universal web design is making
    the web usable by all people.

    View Slide

  70. UNIVERSAL WEB DESIGN
    DAVE NE WTON • @N EWTRON
    HACKE RYO U A 11Y CLUB 2016

    View Slide