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

Accessibility Now: Amsterdam 26 September 2017

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 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”
  2. @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.”
  3. @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)
  4. @brucel “But if not designed to be accessible, digital technologies

    can widen the disparities between persons with and without disabilities."
  5. @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
  6. @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.
  7. @brucel Whose responsibility? • Managers? • Designers? • Browser makers?

    • Standards/ Spec writers? • Framework authors? • Consumers? • Developers?
  8. @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. •
  9. @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/
  10. @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.
  11. @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/
  12. @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
  13. @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.”
  14. @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
  15. @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.
  16. @brucel ARIA isn’t magic You still need to • maintain

    state and value • make sure things are keyboard-focusable • listen for keypresses • test!
  17. @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)
  18. @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.
  19. No no No no no no No no no no

    no no there’s no limits
  20. @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.
  21. @brucel Little things • HTML5 sectioning elements • <main> element

    • don’t disable browser’s focus ring! • alt text
  22. @brucel Wix • enable navigation by keyboard • provide Screen

    Reader compatibility • build infrastructure for accessibility development and testing.
  23. @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} }