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
26. …
I don’t know if I
have the
resources, time,
budget…
No awareness of organization’s structure
27. I don’t know if I
have the
resources, time,
budget…
No awareness of organization’s structure
FIX ALL THE
THINGS!
28. 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
29. 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
33. • 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)
35. • 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
38. • 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/
40. 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>
41. 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/
45. “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
46. 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/
47. • 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
49. 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?
50. 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?
51. 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/
52. 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
54. • 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!