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.
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
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
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
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…
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/
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/
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
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
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
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
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
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/)