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.
Tales from the
Accessibility Trenches
Graeme Coleman, Mark Palmer
@graemecoleman, @caledoniaman
Who are we?
• Graeme Coleman (@graemecoleman)
– Accessibility consultant at The Paciello Group
(http://www.paciellogroup.c...
• Was once a trainee accountant here in
Edinburgh…
• Had a bit (but not a lot) of web
development experience
• MSc then Ph...
• UI Developer for HBOS for 7 years
• Accessibility consultant with an Edinburgh
UX consultancy for 7 years
• Currently em...
What interests us?
How can we ensure that the content we put
on the web is accessible to everyone,
including people with d...
The stats
• 650 million people worldwide have a disability
of some kind
• That’s around 10% of us…!
• By the time we retir...
Forms of disability
• Our users may be:
– Blind (and use a screen reader)
– Visually impaired (and use a screen
magnifier)...
Forms of disability
• Our users may also be:
– Older people with a combination of minor age
related impairments
– Using a ...
Design for Flexibility
• We have no idea:
– Who will be accessing our content
– How they will be accessing our content
How did I get involved in web
accessibility?
“When I grow
up, I want to be a
web accessibility
consultant!”
- No
Early Days
I HAVE NO IDEA
WHAT I’M DOING
Source:
http://creativenerds.co.uk/freebies/slick-but-clean-free-social-media-icon-set/
I’m a web
accessibility
consultant
What do you
do?
…
…yeah, we
don’t have the
capacity to
make these
changes
Web
accessibility is
important
because…
http://www.slideshare.net/johnfoliot/fireman-cop
The Blue Meanie
Source: https://flic.kr/p/4z4EkR
It’s not
accessible.
Do you like my
new widget?
Took me months
to build, and…
Negative mantra
No.
But…can you
help me make
it accessible?
Limited or no remediation advice
FIX ALL THE
THINGS!
Where do I
start…
Limited or no help with prioritizing
…
I don’t know if I
have the
resources, time,
budget…
No awareness of organization’s structure
I don’t know if I
have the
resources, time,
budget…
No awareness of organization’s structure
FIX ALL THE
THINGS!
A positive approach
• Clearly explain why something poses an
accessibility barrier
• Provide illustrative examples, with s...
My perspective on accessibility
• You should not have to completely
redesign your site (except in very, very,
very rare ci...
Six Accessibility Tips
Tip 1:
Don’t assume specific input devices
• Test that interactive components can be
accessed via the keyboard:
– Can you “tab” to it using the Tab key?
– Does it re...
Tip 2:
Use semantic markup
• Give each page an appropriate title
– The first item a screen reader will announce
when the page is opened
• Provide a l...
But:
What about custom widgets?
Tip 3:
WAI-ARIA
• Web Accessibility Initiative
Accessible Rich Internet Applications
• Provides additional semantic meaning to
HTML elemen...
WAI-ARIA example
<div>Custom Button</div>
WAI-ARIA example
Note:
Further scripting is required to ensure the above
responds to both Enter and Space keys
http://blog...
WAI-ARIA – the caveats
• If a native element already exists, use it!
– It will already have the necessary semantics and
be...
WAI-ARIA design patterns
http://www.w3.org/TR/wai-aria-practices/#aria_ex
Don’t reinvent the wheel…
http://hanshillen.github.io/jqtest/
Tip 4:
Progressively enhance
“Just stop saying that JavaScript as a
platform is by its very existence an
accessibility problem. It's not, and saying so...
Percentage of screen reader users who
browse with JavaScript enabled (total
n=1465):
97.6%
WebAIM screen reader survey 5, ...
• Take a “content first” approach
– Everyone gets access to the important
information
• A content first approach provides ...
Tip 5:
Use colour sensibly
Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor
incididunt ut labore et dolore magna aliqu...
Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor
incididunt ut labore et dolore magna aliqu...
GoodBad
Choose a colour for your t-shirt: Choose a colour for your t-shirt
X
Red
Green
Blue
Yellow
Required fields are ind...
Tools for checking use of color
• Colour Contrast Analyser:
– http://www.paciellogroup.com/resources/contrast
Analyser
• C...
Tip 6:
Ask
• Involve different types of users (and
accessibility consultants!) in the design
process, from as early as possible
• Ask...
Useful Resources
• TPG blog: http://blog.paciellogroup.com/
• Marco’s blog: http://www.marcozehe.de/
• WebAIM: http://weba...
Thank You!
Graeme Coleman
@graemecoleman
Now over to Mark…
Tales from the Accessibility Trenches - Highland Fling talk, Edinburgh, 19th April 2014
Tales from the Accessibility Trenches - Highland Fling talk, Edinburgh, 19th April 2014
Tales from the Accessibility Trenches - Highland Fling talk, Edinburgh, 19th April 2014
Tales from the Accessibility Trenches - Highland Fling talk, Edinburgh, 19th April 2014
Tales from the Accessibility Trenches - Highland Fling talk, Edinburgh, 19th April 2014
Tales from the Accessibility Trenches - Highland Fling talk, Edinburgh, 19th April 2014
Upcoming SlideShare
Loading in …5
×

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

1,157 views

Published on

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

Published in: Internet, Design, Technology
  • Be the first to comment

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

  1. 1. Tales from the Accessibility Trenches Graeme Coleman, Mark Palmer @graemecoleman, @caledoniaman
  2. 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. 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. 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. 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. 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. 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. 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. 9. Design for Flexibility • We have no idea: – Who will be accessing our content – How they will be accessing our content
  10. 10. How did I get involved in web accessibility?
  11. 11. “When I grow up, I want to be a web accessibility consultant!” - No
  12. 12. Early Days I HAVE NO IDEA WHAT I’M DOING
  13. 13. Source: http://creativenerds.co.uk/freebies/slick-but-clean-free-social-media-icon-set/
  14. 14. I’m a web accessibility consultant What do you do? …
  15. 15. …yeah, we don’t have the capacity to make these changes Web accessibility is important because…
  16. 16. http://www.slideshare.net/johnfoliot/fireman-cop
  17. 17. The Blue Meanie Source: https://flic.kr/p/4z4EkR
  18. 18. It’s not accessible. Do you like my new widget? Took me months to build, and… Negative mantra
  19. 19. No. But…can you help me make it accessible? Limited or no remediation advice
  20. 20. FIX ALL THE THINGS! Where do I start… Limited or no help with prioritizing
  21. 21. … I don’t know if I have the resources, time, budget… No awareness of organization’s structure
  22. 22. I don’t know if I have the resources, time, budget… No awareness of organization’s structure FIX ALL THE THINGS!
  23. 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. 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. 25. Six Accessibility Tips
  26. 26. Tip 1: Don’t assume specific input devices
  27. 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. 28. Tip 2: Use semantic markup
  29. 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. 30. But: What about custom widgets?
  31. 31. Tip 3: WAI-ARIA
  32. 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. 33. WAI-ARIA example <div>Custom Button</div>
  34. 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. 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. 36. WAI-ARIA design patterns http://www.w3.org/TR/wai-aria-practices/#aria_ex
  37. 37. Don’t reinvent the wheel… http://hanshillen.github.io/jqtest/
  38. 38. Tip 4: Progressively enhance
  39. 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. 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. 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. 42. Tip 5: Use colour sensibly
  43. 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. 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. 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. 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. 47. Tip 6: Ask
  48. 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. 49. Useful Resources • TPG blog: http://blog.paciellogroup.com/ • Marco’s blog: http://www.marcozehe.de/ • WebAIM: http://webaim.org/
  50. 50. Thank You! Graeme Coleman @graemecoleman Now over to Mark…

×