Tales from the Accessibility Trenches - Highland Fling talk, Edinburgh, 19th April 2014
Upcoming SlideShare
Loading in...5
×
 

Like this? Share it with your network

Share

Tales from the Accessibility Trenches - Highland Fling talk, Edinburgh, 19th April 2014

on

  • 522 views

My set of slides for the talk Mark Palmer and I gave at the Highland Fling Sessions in Edinburgh on 19th April 2014

My set of slides for the talk Mark Palmer and I gave at the Highland Fling Sessions in Edinburgh on 19th April 2014

Statistics

Views

Total Views
522
Views on SlideShare
506
Embed Views
16

Actions

Likes
0
Downloads
0
Comments
0

1 Embed 16

https://twitter.com 16

Accessibility

Upload Details

Uploaded via as Microsoft PowerPoint

Usage Rights

© All Rights Reserved

Report content

Flagged as inappropriate Flag as inappropriate
Flag as inappropriate

Select your reason for flagging this presentation as inappropriate.

Cancel
  • Full Name Full Name Comment goes here.
    Are you sure you want to
    Your message goes here
    Processing…
Post Comment
Edit your comment
  • Was/is still a niche industry (when compared to e.g. Usability/UX)
  • Divide between the theory and the practice
  • Was/is still a niche industry (when compared to e.g. Usability/UX)
  • Was/is still a niche industry (when compared to e.g. Usability/UX)
  • Was/is still a niche industry (when compared to e.g. Usability/UX)
  • Was/is still a niche industry (when compared to e.g. Usability/UX)
  • Was/is still a niche industry (when compared to e.g. Usability/UX)
  • JavaScript is a tool – use it properly.

Tales from the Accessibility Trenches - Highland Fling talk, Edinburgh, 19th April 2014 Presentation Transcript

  • 1. Tales from the Accessibility Trenches Graeme Coleman, Mark Palmer @graemecoleman, @caledoniaman
  • 2. Who are we? • Graeme Coleman (@graemecoleman) – Accessibility consultant at The Paciello Group (http://www.paciellogroup.com) • Mark Palmer (@caledoniaman) – Independent accessibility consultant – shout@markpalmer.org
  • 3. • Was once a trainee accountant here in Edinburgh… • Had a bit (but not a lot) of web development experience • MSc then PhD at the University of Dundee • Joined the Digital Media Access Group in 2007 Graeme’s Background
  • 4. • UI Developer for HBOS for 7 years • Accessibility consultant with an Edinburgh UX consultancy for 7 years • Currently employed within the Civil Service as UX Specialist • Also freelancing as an Accessibility Consultant Mark’s Background
  • 5. What interests us? How can we ensure that the content we put on the web is accessible to everyone, including people with disabilities?
  • 6. The stats • 650 million people worldwide have a disability of some kind • That’s around 10% of us…! • By the time we retire, over 30% of us will have some form of disability (however minor) Source: “A Web for Everyone” (Horton & Quesenbery, 2013)
  • 7. Forms of disability • Our users may be: – Blind (and use a screen reader) – Visually impaired (and use a screen magnifier) – Color blind (and unable to distinguish between, say, red and green) – Mobility impaired (which prevents or limits use of the mouse) – Cognitively impaired (for example, dyslexia, and use a Windows high contrast theme)
  • 8. Forms of disability • Our users may also be: – Older people with a combination of minor age related impairments – Using a small screen device – Coping with fatigue, weakness, or stress
  • 9. Design for Flexibility • We have no idea: – Who will be accessing our content – How they will be accessing our content
  • 10. How did I get involved in web accessibility?
  • 11. “When I grow up, I want to be a web accessibility consultant!” - No
  • 12. Early Days I HAVE NO IDEA WHAT I’M DOING
  • 13. Source: http://creativenerds.co.uk/freebies/slick-but-clean-free-social-media-icon-set/
  • 14. I’m a web accessibility consultant What do you do? …
  • 15. …yeah, we don’t have the capacity to make these changes Web accessibility is important because…
  • 16. http://www.slideshare.net/johnfoliot/fireman-cop
  • 17. The Blue Meanie Source: https://flic.kr/p/4z4EkR
  • 18. It’s not accessible. Do you like my new widget? Took me months to build, and… Negative mantra
  • 19. No. But…can you help me make it accessible? Limited or no remediation advice
  • 20. FIX ALL THE THINGS! Where do I start… Limited or no help with prioritizing
  • 21. … I don’t know if I have the resources, time, budget… No awareness of organization’s structure
  • 22. I don’t know if I have the resources, time, budget… No awareness of organization’s structure FIX ALL THE THINGS!
  • 23. A positive approach • Clearly explain why something poses an accessibility barrier • Provide illustrative examples, with steps to reproduce if necessary • Provide clear recommendations for remediation, with code if necessary • Help the client prioritize based on accessibility impact and resources required
  • 24. My perspective on accessibility • You should not have to completely redesign your site (except in very, very, very rare circumstances) • Most accessibility advice will remediate issues “under the hood” • The main aesthetic/visible changes I may suggest relate to: – colour contrast, table reorganization, and sectioning content
  • 25. Six Accessibility Tips
  • 26. Tip 1: Don’t assume specific input devices
  • 27. • Test that interactive components can be accessed via the keyboard: – Can you “tab” to it using the Tab key? – Does it respond to the Enter key/space bar? • Make sure that: – There is a clear indication of focus (don’t use outline: none;) – Navigation order is logical – Custom dialog boxes “grab” focus (but watch for keyboard traps)
  • 28. Tip 2: Use semantic markup
  • 29. • Give each page an appropriate title – The first item a screen reader will announce when the page is opened • Provide a logical heading structure • Use HTML elements as per the specification: – Use list elements for lists, button elements for buttons, table elements for data tables… • http://www.paciellogroup.com/resources/w at
  • 30. But: What about custom widgets?
  • 31. Tip 3: WAI-ARIA
  • 32. • Web Accessibility Initiative Accessible Rich Internet Applications • Provides additional semantic meaning to HTML elements for use by assistive technologies • As of 20th March 2014, WAI-ARIA is a W3C recommendation • http://www.w3.org/TR/wai-aria/
  • 33. WAI-ARIA example <div>Custom Button</div>
  • 34. WAI-ARIA example Note: Further scripting is required to ensure the above responds to both Enter and Space keys http://blog.paciellogroup.com/2011/04/html5- accessibility-chops-just-use-a-button/ <div role=“button”>Custom Button</div>
  • 35. WAI-ARIA – the caveats • If a native element already exists, use it! – It will already have the necessary semantics and behaviour built in by default • Use WAI-ARIA when: – Styling possibilities for the native element are limited – The feature is not (yet) available/well supported in HTML (e.g. a dialog box, treeview) • http://www.w3.org/TR/aria-in-html/
  • 36. WAI-ARIA design patterns http://www.w3.org/TR/wai-aria-practices/#aria_ex
  • 37. Don’t reinvent the wheel… http://hanshillen.github.io/jqtest/
  • 38. Tip 4: Progressively enhance
  • 39. “Just stop saying that JavaScript as a platform is by its very existence an accessibility problem. It's not, and saying so is an obstacle to all of the people working to use it to the advantage of everyone.’” Matt May, December 2012 http://lists.w3.org/Archives/Public/w3c-wai- ig/2012OctDec/0223.html
  • 40. Percentage of screen reader users who browse with JavaScript enabled (total n=1465): 97.6% WebAIM screen reader survey 5, Feb. 2014 http://webaim.org/blog/survey-5-results/
  • 41. • Take a “content first” approach – Everyone gets access to the important information • A content first approach provides a fallback for breakage – This will give you an idea of how assistive technology users experience your site
  • 42. Tip 5: Use colour sensibly
  • 43. Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum. • Can you distinguish between foreground and background colour combinations? • Problematic when viewing on a mobile device outside in the sunshine • Pro Tip: Print the page out in greyscale – is it still readable?
  • 44. Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum. • Can you distinguish between foreground and background colour combinations? • Problematic when viewing on a mobile device outside in the sunshine • Pro Tip: Print the page out in greyscale – is it still readable?
  • 45. GoodBad Choose a colour for your t-shirt: Choose a colour for your t-shirt X Red Green Blue Yellow Required fields are indicated in red text * = Required Field First name: Middle name: Surname: First name: * Middle name: Surname: * http://24ways.org/2012/colour-accessibility/
  • 46. Tools for checking use of color • Colour Contrast Analyser: – http://www.paciellogroup.com/resources/contrast Analyser • Color Contrast Check: – http://snook.ca/technical/colour_contrast/colour.ht ml • Luminosity Colour Contrast Ratio Analyser: – http://juicystudio.com/services/luminositycontrastr atio.php
  • 47. Tip 6: Ask
  • 48. • Involve different types of users (and accessibility consultants!) in the design process, from as early as possible • Ask assistive technology users to demonstrate how they use their devices • There are many videos on YouTube of people using assistive devices – check them out!
  • 49. Useful Resources • TPG blog: http://blog.paciellogroup.com/ • Marco’s blog: http://www.marcozehe.de/ • WebAIM: http://webaim.org/
  • 50. Thank You! Graeme Coleman @graemecoleman Now over to Mark…