Successfully reported this slideshow.
We use your LinkedIn profile and activity data to personalize ads and to show you more relevant ads. You can change your ad preferences anytime.

StripeCon New Zealand 2017 - Jacinta Cali - Accessibility

86 views

Published on

As Director of Website Projects at Internetrix, Jacinta Cali has website accessibility at the top of her mind with every project she works on. Jacinta talks about how we should be approaching every web project to make sure they are inclusive and accessible to all.

Published in: Technology
  • Be the first to comment

  • Be the first to like this

StripeCon New Zealand 2017 - Jacinta Cali - Accessibility

  1. 1. Jacinta Cali Director of Website Projects at Internetrix @Cali33 Accessibility
  2. 2. (web) Accessibility Jacinta Cali Director, Internetrix linkedin.com/in/jacintacali/ @Cali33
  3. 3. Wake up, Neo... How did I get here today?
  4. 4. Wake up, Neo... Why Accessibility?
  5. 5. Our aim Improve each person’s digital experience with the application of design thinking and make a positive difference to the internet.
  6. 6. Web Accessibility What is Accessibility?
  7. 7. My intent for today Get you thinking more about Accessibility and it’s benefits Update you on recent changes to the W3C’s WCAG Share real life SilverStripe case studies & useful tools
  8. 8. Web Accessibility creating an inclusive web
  9. 9. “We need to make every single thing accessible to every single person with a disability.” Stevie Wonder
  10. 10. Rethink your Audience accessibility is hard, but it matters
  11. 11. 15% live with a disability Source: World Health Organisation 2010
  12. 12. Web Accessibility The Disability Spectrum Vision Impaired Hearing Impaired Physical Cognitive
  13. 13. Web Accessibility Permanent Disability eg. Epilepsy
  14. 14. Web Accessibility Temporary Disability eg. blocked ears
  15. 15. Web Accessibility Situational Disability eg. panic attack
  16. 16. “We need to make every single thing accessible to every single person. with a disability.”
  17. 17. The W3C Guides WCAG
  18. 18. Web Accessibility Key WCAG considerations: Text Based Alternatives Tech Compatible Intuitive Design Time-limit Conscious Media Alternatives Keyboard Accessible
  19. 19. Web Accessibility W3C’s WCAG timeline › 1999 - WCAG 1.0 released by W3C › 2008 - WCAG 2.0 (current version) released › 2012 - WCAG 2.0 became ISO standard › 2017 - WCAG 2.1 draft under public review › 2018 - Expected release of WCAG 2.1 › 2019 - A new version “Silver” 3.0 is coming
  20. 20. What’s new in WCAG 2.1 it adds to 2.0
  21. 21. Web Accessibility 4:5:1 & 3:1 contrast controls Elements have 4:5:1 contrast Change text without losing function Tooltips are easy to interact with ... 21 new WCAG 2.1 additions: Password memorise Override keyboard shortcuts Use only one finger or touch point Equivalent labels ... Events are triggered on touch up Alternatives to device info Responsive design down to 320px Elements can be identified Notify users when content changes Don’t interfere with inputs Provide method to prevent interruptions Interactive elements 44x44(px)...
  22. 22. Web Accessibility 4:5:1 & 3:1 contrast controls Elements have 4:5:1 contrast Change text without losing function Tooltips are easy to interact with A few Key WCAG 2.1 highlights: Password memorise Override keyboard shortcuts Use only one finger or touch point Equivalent labels Events are triggered on touch up Alternatives to device info Responsive design down to 320px Elements can be identified Notify users when content changes Don’t interfere with inputs Provide method to prevent interruptions Interactive elements 44x44(px)
  23. 23. Purpose of Controls Conventional name of elements can be determined Eg. Use Semantic HTML5 elements <aside> <section> <nav> instead of <div class=”nav”>
  24. 24. Accidental Activation Events are triggered on touch up with activation of a component (up-event)
  25. 25. Graphics Contrast Have a contrast ratio of at least 4.5:1 against the adjacent colour(s) Or at least 3:1 ration for Thicker graphics
  26. 26. Target Size: Pointer Inputs A minimum 44x44px touch space rule is required for major interactive elements
  27. 27. Authentication Alternative Authenticating doesn’t force you to remember your password
  28. 28. To read the full draft go to: w3.org/TR/WCAG21
  29. 29. Project Case Study WCAG 2.0 accessibility for nsw.gov.au
  30. 30. 2017 Project Showcase: nsw.gov.au - Lots of content - Has interactive pages - Has interactivity between departments - Lots of external links
  31. 31. The Project The Accessibility Process › Audit (human usability + automated tests) › Report findings › Rectify issues › Repeat... until it passes
  32. 32. What Worked Well
  33. 33. The Project Tracking our Accessibility Progress
  34. 34. What Worked Well Accessibility was introduced early in the design phase Colours, font size & content design
  35. 35. What Worked Well Straightforward solutions that made content editors lives easier. Such as...
  36. 36. What Worked Well Hidden spans for screen readers External links
  37. 37. What Worked Well Translucent background overlays
  38. 38. What Worked Well Keyboard navigation
  39. 39. What Worked Well Forms Modification Form labels and error messages
  40. 40. Our Preferred Approach The slider - initially looked like...
  41. 41. Our Preferred Approach The slider - ended up as...
  42. 42. Our Preferred Approach Project Constraints › Limited User Testing › Later in dev › Audit of the content
  43. 43. Our Recommended Process How we prefer to do it
  44. 44. Our Preferred Approach Accessibility first, before code
  45. 45. Our Preferred Approach Earlier (and more) User Research
  46. 46. Useful Resources...
  47. 47. Useful Resources WCAG 2.0 - Quick Reference https://www.w3.org/WAI/WCAG20/quickref
  48. 48. Useful Resources Accessibility Developer Tools Offered by Google Accessibility - Great for ARIA tag error checks
  49. 49. Useful Resources Tenon.io https://tenon.io helps identify accessibility issues in any environment including on your local host
  50. 50. Useful Resources Dyslexiefont dyslexiefont.com specially designed for people with dyslexia, in order to make reading easier
  51. 51. Useful Resources Webaim Colour Contrast Checker http://webaim.org/resources/contrastchecker/
  52. 52. Useful Resources Accessible colour palette builder https://toolness.github.io/accessible-color-matrix/
  53. 53. Useful Resources Screen readers For Windows NV Access ● Free to use (or donate) ● Gaining popularity ● Easy to install and quick to use ● https://www.nvaccess.org/ For Mac VoiceOver ● Inbuilt in all recent systems ● Super quick to turn on and off
  54. 54. Useful Resources A11y Project http://a11yproject.com
  55. 55. “Each small task of everyday life is part of the total harmony of the universe.” - St. Theresa of Lisieux
  56. 56. Our Preferred Approach › Design for accessibility before you build › Stay up to date, check out v2.1 of WCAG › Audit for accessibility at all stages of any project › Test with real people with real disabilities › A more accessible site is better for everyone In Conclusion
  57. 57. Thanks for listening I’m Jacinta Cali linkedin.com/in/jacintacali/ @internetrix @Cali33
  58. 58. Internetrix is an award winning Digital Agency that creates and supports online to make a difference. Pick up the phone, live chat, or email us if you would like to hear how our skills and knowledge can help you. Get in touch: Email: irx.info@internetrix.com.au | Phone: 02 4253 5300 | @internetrix

×