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

Building a better, accessible web

Avatar for Matt Stow Matt Stow
December 14, 2016

Building a better, accessible web

Detailing why accessibility matters, the types of disabilities there are/how to cater for them, and how to write good, semantic HTML and utilise ARIA to create accessible, robust web applications.

View the original, animated HTML version here: https://slides.com/stowball/accessible-web

Here is a complete list of links in the deck:

* https://www.w3.org/standards/
* http://www.humanrights.gov.au/face-facts-disability-rights
* http://www.and.org.au/
* http://www.humanrights.gov.au/world-wide-web-access-disability-discrimination-act-advisory-notes-ver-41-2014#required
* http://www.humanrights.gov.au/world-wide-web-access-disability-discrimination-act-advisory-notes-ver-41-2014#transition
* https://medium.com/@stevenfabre/invisible-animation-ffa27d0b77e5#.4hgbvsc8l
* https://css-tricks.com/dropdown-menus-with-more-forgiving-mouse-movement-paths/
* https://www.ashleynolan.co.uk/blog/frontend-tooling-survey-2016-results
* http://colororacle.org/
* https://chrome.google.com/webstore/detail/nocoffee/jjeeggmbnhckmgdhmgdckeigabjfbddl
* http://lukyvj.github.io/accecss
* http://www.aremycolorsaccessible.com/
* http://webaim.org/projects/screenreadersurvey6
* https://www.w3.org/WAI/WCAG20/quickref/?showtechniques=311,313#principle1
https://www.w3.org/WAI/WCAG20/quickref/?showtechniques=311,313#principle2
* https://www.w3.org/WAI/WCAG20/quickref/?showtechniques=311,313#principle3
* https://www.w3.org/WAI/WCAG20/quickref/?showtechniques=311,313#principle4
* https://gist.github.com/stowball/2704364c1ceefb1d7eaf570b903463b3
* https://github.com/stowball/keyboard-focus
* https://www.w3.org/TR/wai-aria-1.1/#widget_roles
* https://www.w3.org/TR/wai-aria-1.1/#global_states
* https://www.w3.org/TR/wai-aria-practices/
* http://heydonworks.com/practical_aria_examples/
* https://dequeuniversity.com/resources/
* http://oaa-accessibility.org/
* http://codepen.io/stowball/collections/public/
* http://slides.com/stowball/accessible-web

Avatar for Matt Stow

Matt Stow

December 14, 2016
Tweet

Other Decks in Technology

Transcript

  1. “We should be able to access the web … regardless

    of the software we use, the computer we have, the language we speak … and regardless of our sensory or interaction modes” w3.org/standards/
  2. Statistics Around 40% (6.8 million) of Australians aged 18+ have

    a disability or long-term health condition 53% of people aged 65+ report to having some form of disability Australian Human Rights Commission
  3. “ ‘People with disability’ is the only minority group that

    anyone can join at any time” Australian Network on Disability
  4. #PlotTwist Equal Access is Required by Law “…websites whose development

    commences after July 1 2010 should comply with WCAG 2.0 to a minimum of AA-Level…” Section 2.2 of the Disability Discrimination Act Section 4.2 of the Disability Discrimination Act
  5. Hearing impairments Who’s affected? People with full or partial hearing

    loss Quick wins Provide captions and/or transcripts for audio and video Non-native speakers also benefit
  6. Cognitive & learning disabilities Who’s affected? People with ADD, autism,

    dementia, dyslexia and more Quick wins Avoid justified text and ALL CAPS; use sans-serif fonts Simplify the language used and reduce the amount of text Reduce the complexity of the UI’s appearance and functions Use Invisible Animation
  7. Mobility & physical impairments Who’s affected? People with limited dexterity

    or upper limb disabilities Quick wins Mouse hover actions Ensure a sensible tabbing order Visible focus states for all interactive elements need to be forgiving
  8. Vision disabilities Who’s affected? Quick wins People with colour blindness

    People with low or no vision Ensure text alternatives for images & visually absent text Ensure your palette has a suitable colour contrast ratio (for low or no vision)
  9. Colour blindness Deuteranopia (red-green) Protanopia (another red-green) Tritanopia (blue-yellow) Up

    to 10% of the population may be affected You can’t rely on colour alone to convey information (red-green) (another red-green) (blue-yellow)
  10. Simulating colour blindness Photoshop’s Proof Setup cross-platform app Chrome extension

    Sass mixin Color Oracle NoCoffee Vision Simulator AcceCSS All have slightly different features and results, and are useful at different times in the process
  11. Colour contrast ratio Text ratio needs to be 3 –

    4.5:1 depending on size But don't make the ratio too high! Test with aremycolorsaccessible.com
  12. Tools used by the vision impaired Screen magnifiers and browser

    zoom 1. Windows 2. Mac and iOS 3. Chrome on desktop 4. Android Screen readers such as JAWS , NVDA , VoiceOver , Windows-Eyes , ChromeVox and TalkBack 1 1 2 1 3 4
  13. Screen reader statistics 85% of users primarily use Windows 49%

    of those use screen readers with IE 69% use screen readers on mobile 70% of those use iOS as their mobile platform WebAim Screen Reader User Survey #6 Results
  14. Screen reader features Quick access to landmarks, headings, lists and

    links Shortcuts for navigating to, and using form controls Connect to Braille displays and a lot more… I highly recommend doing the VoiceOver Training course that's built in to macOS to learn more
  15. How to build for #a11y 1. Follow the Web Content

    Accessibility Guidelines (WCAG) 2. Use semantic HTML (and understand the impact of CSS) 3. Implement WAI-ARIA (often with JavaScript) #
  16. What is WCAG 2.0? A W3C standard which recommends how

    to make web content more accessible to people with disabilities It's generic, so doesn‘t dictate technology choices Divided in to 12 major guidelines across 4 core principles Each sub-guideline has a conformance rating from A–AAA
  17. WCAG at a glance Principle 1: Perceivable Provide text alternatives

    for non-text content Provide captions/alternatives for multimedia w3.org/WAI/WCAG20/quickref/?showtechniques=311,313#principle1 Create content that can be presented in different ways without losing meaning Make it easier for users to see and hear content
  18. WCAG at a glance Principle 2: Operable Make all functionality

    available from a keyboard Give users enough time to read and use content Do not use content that causes seizures Help users navigate and find content w3.org/WAI/WCAG20/quickref/?showtechniques=311,313#principle2
  19. WCAG at a glance Principle 3: Understandable Make text readable

    and understandable Make content appear and operate in predictable ways Help users avoid and correct mistakes w3.org/WAI/WCAG20/quickref/?showtechniques=311,313#principle3
  20. WCAG at a glance Principle 4: Robust Maximise compatibility with

    current and future user agents w3.org/WAI/WCAG20/quickref/?showtechniques=311,313#principle4
  21. Use semantic HTML Add a valid `lang` attribute to <html>

    Don‘t disable zooming Use appropriate HTML5 elements Don‘t skip heading levels Use native browser controls where possible Only <a> and <button> should be “clickable” All form elements must be labelled Placeholders aren‘t labels
  22. Understand the impact of CSS Test without CSS to ensure

    a logical source order Minimum of 14px font size for body content Pseudo content is read out, so it has to be meaningful OK to use a utility class to hide content Don‘t remove `:focus` outlines – or provide alternatives `visibility: hidden` hides from ATs but is animatable! .visually-hidden
  23. Smart :focus styles github.com/stowball/keyboard-focus function keyboardFocus (e) { if (e.keyCode

    !== 9) { return; } document.documentElement.classList.add('keyboard-focus'); document.removeEventListener('keydown', keyboardFocus, false); } document.addEventListener('keydown', keyboardFocus, false); :focus { box-shadow: none; outline: none; } .no-js :focus, .keyboard-focus .element-with-custom:focus { box-shadow: 0 0 2px 1px #00cdcb; }
  24. Animating visibility: hidden .chip.is-hidden { max-width: 0; opacity: 0; transition:

    opacity ease 0.25s, transform ease 0.25s, margin ease 0.45s 0.15s, max-width ease 0.45s 0.15s, visibility 0s 0.6s; transform: scale(0); visibility: hidden; }
  25. What is WAI-ARIA? A spec on how to increase the

    accessibility of Rich Internet Applications Uses role attributes to describe the type of element Uses property attributes to describe relationships, functions and UI states
  26. Common ARIA properties aria-current (state) aria-expanded (state) aria-haspopup aria-hidden (state)

    aria-invalid (state) aria-label aria-pressed (state) aria-selected (state) w3.org/TR/wai-aria-1.1/#global_states Widgets aria-atomic aria-controls aria-labelledby aria-live aria-owns Others
  27. <nav role="navigation" aria-label="Main"> <button aria-label="Navigation" aria-controls="menu" aria-haspopup="true" aria-expanded="false" aria-pressed="false" >

    </button> <ul id="menu"> <li><a href="#">Home</a></li> <li><a href="#">About</a></li> </ul> </nav> var $button = $('button'); var isMenuOpen = false; $ $button.on('click', function () { isMenuOpen = !isMenuOpen; $button.attr('aria-expanded', isMenuOpen); $button.attr('aria-pressed', isMenuOpen); }); button[aria-pressed="true"] { /* change caret indicator */ } button[aria-expanded="true"] + #menu { /* show menu */ } var $button = $('button'); var isMenuOpen = false;
  28. <div class="product"> <!-- This should be in a form with

    a server-side fallback --> <h3>Super Mario T-shirt</h3> <button class="btn btn-default"> Add <span class="u-visually-hidden">Super Mario T-shirt</span> to cart </button> </div> <div id="toaster" role="alert" aria-atomic="true" aria-live="assertive"></div> var $button = $('button'); var $toaster = $('#toaster'); $button.on('click', function () { $toaster .html('<span class="u-visually-hidden">Super Mario T-shirt has been </span>' + 'Added to your cart').addClass('is-visible'); setTimeout(function () { $toaster.removeClass('is-visible'); }, 1500); }); .u-visually-hidden { /* https://gist.github.com/stowball/2704364c1ceefb1d7eaf570b903463b3 */ }
  29. Implementation resources WAI-ARIA Authoring Practices 1.1 Heydon Pickering's Practical ARIA

    Examples Deque University's Examples OpenAjax Accessibility Examples My Accessible Widgets CodePen collection