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

Monkigras 1 Feb, 2019

bruce lawson
February 01, 2019
160

Monkigras 1 Feb, 2019

Accessibility: Back to the Future

bruce lawson

February 01, 2019
Tweet

Transcript

  1. @brucel
    §

    View Slide

  2. @brucel

    View Slide

  3. @brucel

    View Slide

  4. @brucel
    • Picture of TBL “web developer”

    View Slide

  5. Seren

    View Slide

  6. @brucel
    http://info.cern.ch/hypertext/WWW/TheProject.html

    View Slide

  7. @brucel

    View Slide

  8. @brucel

    View Slide

  9. @brucel

    View Slide

  10. @brucel
    We broke it
    • fixed width

    • bad contrast, fonts, colours

    • pixel-perfect layout

    • lack of captions for videos

    • lack of keyboard accessibility

    • removing focus indicator

    View Slide

  11. View Slide

  12. @brucel

    View Slide

  13. @brucel

    View Slide

  14. @brucel

    View Slide

  15. @brucel

    View Slide

  16. @brucel
    The Raw Materials

    View Slide

  17. @brucel
    b
    • web comping

    View Slide

  18. @brucel

    View Slide

  19. @brucel
    Top four
    1. Have a fundamental understanding of JavaScript

    “Of course you can’t do full-stack JavaScript development (or
    full-stack any web development for that matter), without
    learning JavaScript itself.”

    2. Front-End framework

    3. Bootstrap 4

    4. HTML/CSS

    View Slide

  20. @brucel
    As for HTML, there’s not much to learn right away and
    you can kind of learn as you go, but before making your
    first templates, know the difference between in-line elements
    like and how they differ from block ones like .
    This will save you a huge amount of headache when
    fiddling with your CSS code.

    View Slide

  21. @brucel
    • semantics !

    View Slide

  22. @brucel

    View Slide

  23. @brucel

    View Slide

  24. @brucel

    View Slide

  25. @brucel
    Screen reader users
    http://webaim.org/projects/screenreadersurvey5/ - used by kind permission

    View Slide

  26. @brucel

    View Slide

  27. @brucel



    Reading List
    datetime="2019-01-18">Friday 18 January 2019

    SOME STUFF
    Posted in accessibility web standards, reading list .
    Edit. Leave a comment

    View Slide

  28. @brucel

    View Slide

  29. @brucel

    View Slide

  30. @brucel

    View Slide

  31. @brucel

    View Slide

  32. @brucel

    View Slide

  33. @brucel
    Accessibility is part of Usability
    “high conformance with web
    accessibility guidelines may
    provide benefits to users
    without disabilities.”


    View Slide

  34. @brucel
    Schmutza, Sondereggera and Sauera

    • Sixty-one participants without disabilities used one of three
    websites differing in levels of accessibility

    • A high level of web accessibility led to better performance (i.e.,
    task completion time and task completion rate) than low or very
    low accessibility.

    • Likewise, high web accessibility improved user ratings (i.e.,
    perceived usability, aesthetics, workload and trustworthiness)
    compared to low or very low web accessibility.

    Department of Psychology, University of Fribourg, Fribourg, Switzerland
    www.unifr.ch/psycho/assets/files/KogErg/SchmutzSondereggerSauer2016.pdf

    View Slide

  35. @brucel

    View Slide

  36. View Slide

  37. View Slide

  38. https://kryogenix.org/code/browser/everyonehasjs.html

    View Slide

  39. @brucel
    https://www.reddit.com/r/webdev/comments/a7ydt9/the_practical_value_of_semantic_html/

    View Slide

  40. @brucel

    View Slide

  41. @brucel
    “Developer Experience” Bait-and-Switch
    We cannot continue to use as much JavaScript as is
    now “normal” and expect the web to flourish.

    To get this fixed, we need to confront the “developer
    experience” bait-and-switch. Tools that cost the
    poorest users to pay wealthy developers are bunk.

    Alex Russell https://infrequently.org/2018/09/the-developer-experience-bait-and-switch/

    View Slide

  42. Rise of The Smartphones

    View Slide

  43. View Slide

  44. Smartphones
    ▪ overwhelmingly Android
    ▪ low cost, low spec
    ▪ very little RAM, very limited storage
    ▪ dual SIM

    View Slide

  45. View Slide

  46. @brucel
    500MB data: hours worked
    https://360.here.com/2015/06/03/offline-navigation-really-matters-500mb-data-costs-week-wages/

    View Slide

  47. @brucel
    How To Make Internet Affordable
    Even with more phones than ever before, the cost of Internet
    is a major obstacle. In Nigeria, the data needed to watch
    just 2 minutes of online video a day can cost more than
    sending a child to school for a month.
    https://webwewant.org/news/how-to-make-internet-affordable/

    View Slide

  48. @brucel
    The Baseline Costs of JavaScript Frameworks
    Your React application will never load faster than about 1.1
    seconds on an average phone in India, no matter how much
    you optimize it. Your Angular app will always take at least
    2.7 seconds to boot up.
    Ankur Sethi, Nov 2018

    https://blog.uncommon.is/the-baseline-costs-of-javascript-frameworks-f768e2865d4a


    View Slide

  49. ICT access by population
    Total 

    global population
    ~7.4 billion
    High-speed

    internet
    1.1 billion
    Total 

    internet users
    3.2 billion
    Mobile phones
    5.2 billion
    Within
    mobile coverage
    7 billion
    World Bank: Digital Dividends 2016

    View Slide

  50. The world’s offline population
    Total 

    internet users
    3.2 billion
    High-speed

    internet
    1.1 billion
    India
    1.063 billion
    Countries
    outside of
    the top 20
    China
    755 million
    Indonesia
    213 million
    Pakistan
    165 million
    Bangladesh
    148 million
    Nigeria
    111 million
    Brazil
    98 million
    Ethiopia
    95 million
    Mexico
    70 million
    Congo, Dem. Rep.
    68 million
    Philippines
    63 million
    Russian Federation
    55 million
    Iran, Islamic Rep.
    54 million
    Myanmar
    53 million
    Vietnam
    52 million
    United States
    51 million
    Tanzania
    49 million
    Thailand
    48 million
    Egypt, Arab Rep.
    42 million
    Turkey
    41 million

    View Slide

  51. View Slide

  52. View Slide

  53. View Slide

  54. In India, only 96k of the 736k cell towers are
    3G enabled, but more critically, only 35k of
    those towers have a fiber optic connection to
    the backbone, which results in inconsistent
    connection.

    Flaky connection
    - India's mobile Internet: The revolution has begun Avdendus (2013)

    View Slide

  55. Making the internet universally accessible
    and affordable should be a global priority.

    World Bank

    View Slide

  56. Developing countries are home to 94% of the
    global offline population.

    - State of Connectivity 2014, internet.org

    View Slide

  57. Courtesy of Hesperian

    View Slide

  58. View Slide

  59. View Slide

  60. If you want to liberate a country, give them
    the internet.

    - Wael Ghonim, Egyptian internet activist

    View Slide

  61. View Slide

  62. an increase in Internet maturity similar to the
    one experienced in mature countries over the
    past 5 years creates an increase in real GDP
    per capita of $500 on average during this
    period.

    Internet matters
    - The Net’s sweeping impact on growth, jobs, and prosperity (McKinsey Global Institute)

    View Slide

  63. It took the Industrial Revolution of the 19th
    century 50 years to produce the same result.

    Internet matters
    - The Net’s sweeping impact on growth, jobs, and prosperity (McKinsey Global Institute)

    View Slide

  64. View Slide

  65. View Slide

  66. View Slide

  67. View Slide

  68. View Slide

  69. See people not
    problems

    View Slide

  70. View Slide

  71. View Slide

  72. View Slide

  73. @brucel
    • [image of a crowd of people - terrible stock
    photo?]

    View Slide

  74. @brucel

    View Slide

  75. @brucel

    View Slide

  76. @brucel

    View Slide

  77. @brucel

    View Slide

  78. @brucel

    View Slide

  79. @brucel

    View Slide

  80. @brucel

    View Slide

  81. View Slide

  82. @brucel
    Thank you!

    View Slide