Presentation given to students on the Bachelor in Web Development degree at the Business Academy Southwest (https://www.easv.dk/en) in Esbjerg, Denmark on the 17th November 2017.

1. Tales from the
Accessibility Trenches
Graeme Coleman,
@graemecoleman
Friday 17th November, 2017

2. Today’s Session
• My background and interests
• Disability and the Web
• My six accessibility tips
• How you can get involved in (Web)
accessibility
• The future for accessibility
• Further reading
• (if we have time) a little case study

3. Who am I?
• Senior accessibility engineer at The
Paciello Group
(http://www.paciellogroup.com)
• Amongst other activities, we help
organizations make sure (predominately)
Web-based products meet accessibility
standards and guidelines, e.g. Web
Content Accessibility Guidelines (WCAG)
2.0

4. My Background
• Previously a trainee accountant (!!!)
• Had a bit (but not a lot) of prior (web)
development experience
• MSc then PhD at the University of Dundee
in Scotland
• Joined the Digital Media Access Group in
2007
• Joined the Paciello Group in 2013

5. What interests me?
How can we ensure that the content we put
on the Web is accessible to everyone,
including people with disabilities?

6. The statistics
• 650 million people worldwide have some form
of disability
• 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
• People may be:
– Blind (and use a screen reader)
– Visually impaired (and use a screen
magnifier)
– Colour blind (and unable to distinguish
between, say, red and green)
– Mobility impaired (which prevents or limits use
of the mouse/touchscreen)
– Cognitively impaired (for example, dyslexia,
and use a High Contrast theme)

8. Situational disabilities
• People may also be:
– Older, with a combination of minor age related
impairments (but may not report them)
– Using a small screen device with weak WiFi
– Coping with fatigue, weakness, or stress

10. Source:
http://creativenerds.co.uk/freebies/slick-but-clean-free-social-media-icon-set/

11. Design for Flexibility
• We have no idea:
– Who will be accessing content
– How they will be accessing content
– When they will be accessing content

12. Six Accessibility Tips

13. Tip 1:
Don’t assume specific input/output
devices

16. • Test that interactive components can be
operated using the keyboard:
– Can you “tab” to it using the Tab key?
– Does it respond to the Enter key/space
bar/arrow keys?
• Make sure that:
– There is a clear, visible indication of focus
(avoid outline: none; in CSS)
– Navigation and reading order is logical

17. • If you have a mobile device, switch on the built-in
screen reader:
– Android: TalkBack (Settings  Accessibility  TalkBack)
– iOS: VoiceOver (Settings  General  Accessibility 
VoiceOver)
– https://developer.paciellogroup.com/blog/2017/11/mobile-
accessibility-testing-guide-for-android-and-ios-free/
• Make sure that:
– All page content can be accessed when ”swiping” through
a page
– Buttons are announced as buttons, links as links, etc.
– All interactive controls can be operated when the screen
reader is active
– Error messages are announced by the screen reader

18. Tip 2:
Use semantic markup

19. • Make sure each page has an appropriate
<title>
– The first item a screen reader will announce
when the page is opened
• Make sure a logical heading structure is
provided
• Make sure HTML elements are used as
per the specification:
– Use list elements for lists, button elements for
buttons, table elements for data tables…

20. But:
What about custom widgets?

21. Tip 3:
Use WAI-ARIA*
* where appropriate

22. • Web Accessibility Initiative
Accessible Rich Internet Applications
• Provides additional semantic meaning to
HTML elements for use by assistive
technologies
• http://www.w3.org/TR/wai-aria/

23. WAI-ARIA example
<div>Custom Button</div>

24. 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>

25. WAI-ARIA – the caveats
• If a native HTML 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 custom dialog box,
expandable/collapsible content, chat)
• http://www.w3.org/TR/aria-in-html/

26. WAI-ARIA design patterns
http://www.w3.org/TR/wai-aria-practices

27. Don’t reinvent the wheel…
http://hanshillen.github.io/jqtest/

28. Tip 4:
Progressively enhance

29. • 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

30. Tip 5:
Use colour sensibly

31. 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?

32. 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?

33. 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/

34. 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

35. Tip 6:
Ask

36. • Involve different types of users from as
early as possible in the design process
• Ask assistive technology users to
demonstrate how they use their products
• There are many videos on YouTube of
people using assistive devices – check
them out!
• Be aware that what works for one person
might not work for everyone with that
disability

37. Getting involved in (web) accessibility

38. “When I grow up,
I want to be a web
accessibility
consultant!”
- Nobody, ever

39. • You need to be:
– Reasonably knowledgeable about HTML and
CSS
– Reasonably knowledgeable about JavaScript
and related frameworks (but this is a bonus)
• However, the most important skills are:
– Empathy (don’t “other” your audience)
– A willingness to argue your case
– A willingness to ask questions

40. Early Days
I HAVE NO IDEA
WHAT I’M DOING

41. What do you
do?
I’m a web
accessibility
consultant
…

42. Negative approach

43. The “Blue Meanie” problem
Image source:
http://www.midlothianadvertiser.co.uk/news/here-
come-the-blue-meanies-1-3817526

44. It’s not
accessible.
Do you like my
new widget?
Took me months
to build, and…
Negative mantra

45. No.
But…can you
help me make
it accessible?
Limited or no remediation advice

46. FIX ALL THE
THINGS!
Where do I
start…
Limited or no help with prioritizing

47. …
I don’t know if I
have the
resources, time,
budget…
No awareness of organization’s structure

48. I don’t know if I
have the
resources, time,
budget…
No awareness of organization’s structure
FIX ALL THE
THINGS!

49. Positive approach

50. http://www.slideshare.net/johnfoliot/fireman-cop

51. A positive approach
• Get in early
• Clearly explain why something poses/will
pose 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

52. Beyond the Web

53. • Hardware accessibility (e.g. televisions)
• Native applications (iOS, Android apps)
• Virtual assistants (Amazon Alexa, OK
Google)
• Internet of Things
• Video games (check out
http://gameaccessibilityguidelines.com/)

54. Further Reading

55. A Web for Everyone
Designing Accessible User Experiences
Sarah Horton &
Whitney Quesenbery
http://rosenfeldmedia.com/books/a-web-for-everyone/

56. Accessibility for Everyone
Laura Kalbag
https://abookapart.com/products/accessibility-for-everyone

57. Inclusive Design Patterns
Heydon Pickering
Coding Accessibility into Web Design
https://www.smashingmagazine.com/inclusive-design-
patterns/

58. Other Useful Resources
• TPG blog: http://blog.paciellogroup.com/
• TPG Inclusive Design Principles:
http://inclusivedesignprinciples.org/
• WebAIM: http://webaim.org/

59. Thank You!
Graeme Coleman
@graemecoleman