Upload
graemecoleman
View
701
Download
0
Embed Size (px)
DESCRIPTION
My set of slides for the talk Mark Palmer and I gave at the Highland Fling Sessions in Edinburgh on 19th April 2014
Citation preview
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.com)
• Mark Palmer (@caledoniaman)– Independent accessibility consultant– [email protected]
• 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
• 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
What interests us?
How can we ensure that the content we put on the web is accessible to everyone, including people with disabilities?
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)
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)
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
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 IDEAWHAT 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 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
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
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 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)
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 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/wat
But:
What about custom widgets?
Tip 3:
WAI-ARIA
• 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/
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 keyshttp://blog.paciellogroup.com/2011/04/html5-
accessibility-chops-just-use-a-button/
<div role=“button”>Custom Button</div>
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/
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 is an obstacle to all of the people working to use it to the advantage of everyone.’”
Matt May, December 2012http://lists.w3.org/Archives/Public/w3c-wai-ig/2012OctDec/0223.html
Percentage of screen reader users who browse with JavaScript enabled (total n=1465):
97.6%
WebAIM screen reader survey 5, Feb. 2014http://webaim.org/blog/survey-5-results/
• 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
Tip 5:
Use colour sensibly
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?
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?
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/
Tools for checking use of color
• Colour Contrast Analyser: – http://www.paciellogroup.com/resources/
contrastAnalyser
• Color Contrast Check:– http://snook.ca/technical/colour_contrast/
colour.html
• Luminosity Colour Contrast Ratio Analyser:– http://juicystudio.com/services/
luminositycontrastratio.php
Tip 6:
Ask
• 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!
Useful Resources
• TPG blog: http://blog.paciellogroup.com/
• Marco’s blog: http://www.marcozehe.de/
• WebAIM: http://webaim.org/
Thank You!
Graeme Coleman@graemecoleman
Now over to Mark…