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

Accessibility Now: Amsterdam 26 September 2017

6f3ec7315ad0715ae2a5f89a52877218?s=47 bruce lawson
September 26, 2017

Accessibility Now: Amsterdam 26 September 2017

Accessibility - not just for mierenneukers!


bruce lawson

September 26, 2017

More Decks by bruce lawson

Other Decks in Technology


  1. @brucel Accessibility not just for mierenneukers! Web Accessibility Live 26

    September 2017, Amsterdam 1
  2. @brucel About me ?? • Consultant for Wix • Ex-Deputy

    CTO, Opera Software • BS8878 committee member • name in HTML5 spec! • Co-author “Introducing HTML5”, “Web Accessibility: Web Standards and Regulatory Compliance”
  3. @brucel Mierenneuken literally: “ant fucking”

  4. @brucel

  5. @brucel Metaphorically .. •nit-picker •hair-splitter

  6. @brucel

  7. @brucel

  8. @brucel Nit picking “Fussy or pedantic fault-finding”

  9. @brucel

  10. @brucel

  11. @brucel

  12. @brucel

  13. What is the web?

  14. None
  15. None
  16. None
  17. @brucel • [image of a crowd of people - terrible

    stock photo?]
  18. @brucel

  19. @brucel

  20. @brucel

  21. @brucel

  22. @brucel

  23. @brucel

  24. @brucel

  25. @brucel World Bank: “The world’s 1 billion persons with disabilities—80

    per- cent of whom live in developing countries—can lead more productive lives with the help of text, voice, and video communication.”
  26. @brucel “But the mere existence of technology is an insufficient

    condition to bridge the gaps in the socioeconomic inclusion of persons with disabilities. A supportive ecosystem is needed to drive the implementation of accessible digital technologies.” - “Digital Dividends” - World Bank (2016)
  27. @brucel “But if not designed to be accessible, digital technologies

    can widen the disparities between persons with and without disabilities."
  28. @brucel

  29. @brucel

  30. @brucel

  31. @brucel

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

  33. @brucel Why do we choose to break the web? •

    bad contrast, fonts, colours • lack of captions for videos • images • pixel-perfect layout • lack of keyboard accessibility • removing focus indicator
  34. @brucel https://axesslab.com/accessibility-according-to-pwd

  35. @brucel

  36. @brucel

  37. @brucel

  38. @brucel

  39. @brucel

  40. @brucel

  41. @brucel

  42. Misusing tools

  43. @brucel Icon fonts https://speakerdeck.com/ninjanails/death-to-icon-fonts

  44. @brucel Bad markup http://webaim.org/projects/screenreadersurvey5/ - used by kind permission

  45. @brucel WAI ARIA WAI-ARIA provides a framework for adding attributes

    to identify features for user interaction, how they relate to each other, and their current state. WAI-ARIA describes new navigation techniques to mark regions and common Web structures as menus, primary content, secondary content, banner information, and other types of Web structures.
  46. @brucel ARIA landmark roles role="contentinfo", "main", "banner" ...

  47. Built-in beats bolt-on

  48. @brucel

  49. @brucel

  50. @brucel Don't overuse landmarks http://webaim.org/projects/screenreadersurvey5/ - Used by kind permission.

  51. @brucel

  52. @brucel Whose responsibility? • Managers? • Designers? • Browser makers?

    • Standards/ Spec writers? • Framework authors? • Consumers? • Developers?
  53. @brucel Managers! • Lead your teams with a culture of

    accessibility. • A11y makes financial sense (more customers) • Much, much cheaper to build in a11y than remediate. •
  54. @brucel Constitution for a site • “The user is sovereign.

    The site must be designed around user needs, not organisational structure or operational convenience. • Wherever possible, users should be consulted in formal user- testing. (Those of us within the organisation rarely have the same needs or expectations, and are therefore rarely reliable proxies.) • All content on the site must be accessible to people with disabilities. Where this clashes with aesthetics or organisational convenience, it trumps them. http://www.brucelawson.co.uk/2006/constitution-of-a-new-website/
  55. @brucel Designers • Aesthetic design is subservient to function. Aesthetic

    design is subjective. Where internal stakeholders cannot agree, user-testing should take place. • In both design and content, simplicity beats complexity, increasing the range of devices that can be used to access the Site (including old machines and mobile browsers). Therefore, any proposed technological bells and whistles must have a demonstrable value to visitors.
  56. @brucel Browser vendors http://html5accessibility.com/

  57. @brucel Standards/ spec writers Design features to be accessible to

    users with disabilities. Access by everyone regardless of ability is essential. This does not mean that features should be omitted entirely if not all users can make full use of them, but alternate mechanisms should be provided. HTML Design Principles - https://www.w3.org/TR/html-design-principles/
  58. @brucel but Web Components

  59. @brucel

  60. @brucel Web Components WTF? Web components are a set of

    web platform APIs that allow you to create new custom, reusable, encapsulated HTML tags to use in web pages and web apps. Custom components and widgets build on the Web Component standards, will work across modern browsers, and can be used with any JavaScript library or framework that works with HTML. https://www.webcomponents.org/introduction
  61. @brucel Custom elements <sexy-button>Click me!</sexy-button>

  62. @brucel Customized elements <button is="sexy-button"> “a simple customized built-in element

    ... would automatically inherit the semantics and behaviour of the button element, with no need to implement these behaviours manually. In general, for any elements with nontrivial behaviour and semantics that build on top of existing elements of HTML, customized built-in elements will be easier to develop, maintain, and consume.”
  63. @brucel Blocked by Apple “I'll note that we've vocally and

    repeatedly objected to having is=, and in fact, stated publicly that we won't implement this feature” - Ryosuke Niwa https://github.com/w3c/webcomponents/issues/509#issuecomment-224212371
  64. @brucel https://bugs.chromium.org/p/chromium/issues/detail?id=652579

  65. @brucel

  66. @brucel

  67. @brucel JavaScript frameworks

  68. @brucel Framework authors • Accept pull requests! It's OK not

    to be perfect, but accept suggestions with humility. • Use proper semantics if possible, otherwise use ARIA.
  69. @brucel

  70. @brucel ARIA isn’t magic You still need to • maintain

    state and value • make sure things are keyboard-focusable • listen for keypresses • test!
  71. @brucel Developers • “the technologies needed to receive the website

    should not be tied to one vendor, and should be free of charge to the user. The code that runs the website must conform to the rules of the various languages used.” • TAKE HOME: respect the tools (HTML, CSS, JS)
  72. @brucel

  73. @brucel Users • Users have a responsibility to come with

    up-to-date browsers and decent AT. • With evergreen browsers, this is easier than ever before. Lots of free screenreaders eg VoiceOver, Talkback, NVDA. • If you come to my site with IE6 and an old version of JAWS, don’t tell me that it’s inaccessible.
  74. @brucel Perfect is the enemy of Good

  75. @brucel

  76. @brucel

  77. @brucel

  78. No no No no no no No no no no

    no no there’s no limits
  79. to what you can achieve through gradual incremental improvements.

  80. @brucel Be better, not perfect • There is no such

    thing as AAA compliance. You’ll never be accessible to everyone. • But you can always do something to improve accessibility for someone.
  81. @brucel Little things • HTML5 sectioning elements • <main> element

    • don’t disable browser’s focus ring! • alt text
  82. @brucel

  83. @brucel Share where possible

  84. @brucel

  85. @brucel

  86. Implement phases of improvements

  87. None
  88. @brucel Wix • enable navigation by keyboard • provide Screen

    Reader compatibility • build infrastructure for accessibility development and testing.
  89. @brucel

  90. @brucel

  91. @brucel • map Israel

  92. @brucel • World map

  93. @brucel 100 million

  94. Improvements to Standards

  95. @brucel

  96. @brucel

  97. @brucel

  98. @brucel CSS @media screen and (max-width: 600px) { body {display:

    flex; flex-direction:column;} header {order:1} nav {order:4) main {order:2} footer {order:3} }
  99. @brucel

  100. It depends!

  101. None
  102. Crowd image!!

  103. @brucel

  104. Thanks!