Presentation I delivered on Global Accessibility Awareness Day - May 15th 2014. It was delivered as part of Inclusive Design 24 - 24 hours of accessibility webinars. The event was sponsored by the Paciello Group and Adobe. The presentation is aimed at developers and website administrators who may have heard about accessibility, but who'd like to learn more. It sets out a series of yes/no questions that anyone can answer about their own websites - using simple techniques and a couple of useful tools that you can download. The presentation doesn't cover all aspects of web accessibility, but if you can answer these questions correctly about your website, then it's going to be more accessible than many.

1. Coolfields Consulting www.coolfields.co.uk
@coolfields
So, how do I know if my website
is accessible?
Graham Armfield
Web Accessibility Consultant
WordPress Developer
graham.armfield@coolfields.co.uk
@coolfields

2. What I’m going to cover
Web Content Accessibility Guidelines
(Version 2) published by the
Web Accessibility Initiative of the
World Wide Web Consortium
http://www.w3.org/TR/WCAG20/
A.K.A. WCAG2.0
• Good resource for accessibility
• But can be hard to interpret
@coolfields

3. What I’m going to cover
So how about a simple yes/no checklist?
Easy to check – with free tools
@coolfields

4. Health warning
In time available I can only cover some
common accessibility issues.
But, if you can answer these questions
correctly, your site will be more accessible
than many.
4@coolfields

5. Coolfields Consulting www.coolfields.co.uk
@coolfields
Keyboard Interaction

6. Keyboard interaction
You need to answer Yes to these:
1) Can I easily access all parts of the site
with the keyboard only?
2) Can I easily see where keyboard focus is?
6@coolfields

7. Keyboard interaction
7
Hover states

8. Keyboard interaction
8
Hover states
Keyboard focus

9. Keyboard interaction
CSS
a:hover {background:#fff, color:#000}
a:hover, a:focus {background:#fff, color:#000}
Don't do this: a:focus {outline:none}
9@coolfields

10. Keyboard interaction
10@coolfields
Keyboard accessible
dropdown menus
are possible

11. Keyboard interaction
11
You need to answer Yes to this:
3) Can I easily access all functionality with
the keyboard only?
@coolfields

12. Keyboard interaction
12

13. Keyboard interaction
13
When lightbox
opens, focus
remains on
page below

14. Keyboard interaction
14
You need to answer Yes to this:
4) Does the keyboard tab order make sense?
@coolfields

15. Coolfields Consulting www.coolfields.co.uk
@coolfields
Photo:
Links

16. Links
Can you answer Yes to this one?
5) Are the links obviously links?
16@coolfields

17. Links
Can you answer Yes to this one?
6) Do all links provide enough information to
state where they lead to?
17

18. Links
Can you answer Yes to this one?
6) Do all links provide enough information to
state where they lead to?
18

19. Links
Can you answer No to this one?
7) Do any of your links open new windows
or panels without letting the user know in
advance?
19
Lightbox functionality –
there is no warning that
this panel will open

20. Coolfields Consulting www.coolfields.co.uk
@coolfields
Media

21. Media
Can you answer Yes to this?
8) Do all images have appropriate alternate
text?
(appropriate may mean empty ie alt="")
21@coolfields

22. Media
Using the Wave Toolbar
22@coolfields

23. Media
Can you answer Yes to this?
9) Do all videos have captions?
23@coolfields

24. Coolfields Consulting www.coolfields.co.uk
@coolfields
Signposting Content
Photo: thepicturedrome

25. Signposting content
Can you answer Yes to this?
10) Are the page titles unique and
meaningful?
25@coolfields

26. Signposting content
Can you answer Yes to this?
11) Do pages have appropriate headings and
subheadings?
26@coolfields

27. Using headings
27
Headings list from
NVDA screen reader
Note: NVDA exposes
heading hierarchy
Heading are used as
a navigation feature

28. Using headings
28

29. Coolfields Consulting www.coolfields.co.uk
@coolfields
Text

30. Text
Can you answer Yes to this one?
12) Can I resize text in a page without
breaking the layout?
30@coolfields

31. Normal size
NB: Resizing and zooming are not the same thing
Text
31@coolfields
Larger size

32. Text
Can you answer No to this one?
13) Is any of the text fully justified?
32@coolfields

33. Text
33
Left aligned text

34. Text
34
Left aligned textFully justified text

35. "Rivers of white space"
Text
35
Left aligned textFully justified text

36. Coolfields Consulting www.coolfields.co.uk
@coolfields
User Input
Photo: AlecCouros

37. User input
Can you answer Yes to this one?
14) Do all form fields have an accompanying
label?
37@coolfields

38. User input
38

39. User input
39

40. Coolfields Consulting www.coolfields.co.uk
@coolfields
Colour & Shape

41. Colour & shape
Can you answer Yes to this one?
15) Is the colour contrast sufficient?
41

42. Colour contrast
42

43. Colour contrast
43
Colour Contrast
Analyzer Tool

44. Colour contrast
44@coolfields

45. Colour & shape
Can you answer No to this one?
16) Is meaning conveyed by colour or shape
only?
45@coolfields

46. Colour & shape
46
Project Name Status Fully
Resourced?
Easy peasy project a
Quite a tricky project a
So glad I'm not on that project r
Going OK a
@coolfields

47. Colour & shape
47
Project Name Status Fully
Resourced?
Easy peasy project a
Quite a tricky project a
So glad I'm not on that project r
Going OK a
@coolfields
Green
Green
Amber
Red

48. Useful links
Colour Contrast Analyzer
• http://paciellogroup.com/resources/contrastAnalyser
Wave Toolbar
• http://wave.webaim.org/toolbar/
48

49. Thanks for listening
Any questions?
graham.armfield@coolfields.co.uk
@coolfields
49

50. Some things I didn't cover
• Form submission errors
• Movement/flashing on
pages
• Audio on pages
• Updating content after
page loaded
• Timeouts
• Data tables
50@coolfields
• Keyboard traps
• CAPTCHAs
• Skip links
• Alternate navigation
• Indicating language
• Triggering actions
• Automated page
refreshing
• PDFs

51. All the questions together
1) Can I easily access all parts of the site with
the keyboard only? Right answer - Yes
2) Can I easily see where keyboard focus is?
Right answer – Yes
3) Can I easily access all functionality with the
keyboard only? Right answer – Yes
4) Does the keyboard tab order make sense?
Right answer – Yes
5) Are the links obviously links? Right answer –
Yes
6) Do all links provided enough information to
state where they lead to? Right answer – Yes
7) Do any of your links open new windows or
panels without letting the user know in advance?
Right answer – No
8) Do all images have appropriate alternate text?
Right answer - Yes
51@coolfields
9) Do all videos have captions? Right answer –
Yes
10) Are page titles unique and meaningful? Right
answer – Yes
11) Do pages have appropriate headings and
subheadings? Right answer – Yes
12) Can I resize text in a page without breaking
the layout? Right answer – Yes
13 ) Is any of the text fully justified? Right
answer – No
14) Do all form fields have an accompanying
label? Right answer – Yes
15) Is the colour contrast sufficient? Right
answer – Yes
16) Is meaning conveyed by colour and shape
only? Right answer - No