1. So, how do I know if my WordPress website
is accessible?
Photo by Kari Leigh London
Graham Armfield
Coolfields Consulting

2. A bit about me
2
I’m a…
Web Accessibility Consultant
WordPress Developer
@coolfields
Photo by Kari Leigh London
coolfields.co.uk

3. Accessibility can help everyone
Why is accessibility important?

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

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

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

7. Coolfields Consulting www.coolfields.co.uk
Keyboard Interaction

8. Why keyboard accessibility is vital
Some people can't use a mouse or trackpad or touch
commands.
They may rely on keyboards to use their machines -
including browsing websites.
Also, desktop/laptop screen readers are operated using
keystrokes.
8@coolfields

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

10. Visible keyboard focus
10
Clear keyboard
focus everywhere.

11. Keyboard focus and interaction
11@coolfields
Clear keyboard focus everywhere.
And sub-navigation is keyboard accessible.

12. Keyboard interaction
12
Hovering over navigation
link - shows highlight
and submenu.
Tabbing to the same link
- no focus indication, no
sub-menu.

13. Keyboard interaction
14
You need to answer Yes to these:
3) Can I easily access all functionality with
the keyboard only?
4) Does the keyboard tab order make sense?
@coolfields

14. Keyboard interaction
15
Many WordPress
websites use
'lightbox' plugins.
They show a full-
size version of the
image when the
smaller image is
clicked on, or
actioned with
keyboard.

15. Keyboard interaction
16
Img of Lightbox
But when this
lightbox opens,
keyboard focus
remains on the
page below

16. Keyboard interaction
17
Language
selector

17. Keyboard interaction
18
When language
selector opens,
keyboard focus is still
on underlying screen.

18. Coolfields Consulting www.coolfields.co.ukPhoto:
Links

19. Can you answer Yes to this one?
5) Are your links obviously links?
Links
20@coolfields

20. Making links look like links
21@coolfields
Users who are colour blind or who have poor vision may struggle to see
links with no underline.

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

22. Are your links meaningful?
Which version is easier for a screen reader
user?
Elements list in NVDA
screen reader

23. 24

24. Are your blog links meaningful?
25
1
1
2
3 4
5
6 7
2
3
4
5
6
7
Do all these links
make sense to a
screen reader user?

25. Coolfields Consulting www.coolfields.co.uk
Images and video

26. Images
Can you answer Yes to this?
7) Do all images have
appropriate alternate
text?
(appropriate may mean
empty ie alt="")
27@coolfields
Using the Wave
browser extension.

27. Images
Setting alternate text in WordPress classic editor
28@coolfields
Best to set alternative text, even if
you're supplying a caption too.

28. Setting alternate text in WordPress Gutenberg
Images
29@coolfields

29. When an image is a link, it's best
to have the link destination as
the alternate text.
In this WP theme, the featured
images do this automatically.
Images that are links
30

30. Images that are links
31
1
1
2
2
Here, the featured image alternate
text does not describe the link
destination.

31. Can you answer yes to this?
Videos
32
8) Do all the videos have captions?
@coolfields
Captions shown on YouTube
videos
Deaf people rely on captions,
but many others use them
too when watching videos

32. Coolfields Consulting www.coolfields.co.ukPhoto: thepicturedrome
Signposting Content

33. Signposting content
Can you answer Yes to this one?
9) Are the page titles unique and meaningful?
34@coolfields

34. Page titles
Getting them right in WordPress is usually easy…
35@coolfields
Page title is the first thing
that's read out when
screen readers arrive at
new page.
Helps users know they're
in the right place.

35. Signposting content
Can you answer Yes to this one?
10) Do pages have appropriate headings and
subheadings?
36@coolfields

36. Using headings
37
Here, the headings are being
indicated when I use the Wave
browser extension.
It's also highlighting the heading
level.

37. Using headings
38
Headings list shown by
NVDA screen reader
Headings are used as a
navigation feature
Note: NVDA exposes the
heading hierarchy

38. Signposting content
Can you answer Yes to all these?
11) Are landmarks being used correctly?
39@coolfields

39. Landmarks
Banner
40
Navigation
Footer
Main Content Sidebar
Landmarks are used by
many screen reader users
to jump to parts of the
page that may be of
interest.

40. Landmarks from HTML5 elements
<header>
41
<nav>
<footer>
<main>
<aside>
Most websites now use
HTML5 elements, and
these set appropriate
landmarks if they are used
correctly.

41. Testing for landmarks
Here there is no Main
landmark.

42. Coolfields Consulting www.coolfields.co.uk
Text

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

44. Normal size
Note: Resizing and zooming are not the same thing
Resizing text
45@coolfields
Larger size

45. More examples
Resizing text
46@coolfields

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

47. Text justification
48
Left aligned text
Fully justified text can make life very difficult for some dyslexics - around 8 - 10%
of the population.
Fully justified text
"Rivers of white space" effect

48. Coolfields Consulting www.coolfields.co.ukPhoto: AlecCouros
User Input

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

50. User input
51
new wave
screenshot
Tested with Wave.
Labels are important
for screen reader
users - so they know
what the fields are
for.

51. User input
52

52. Coolfields Consulting www.coolfields.co.uk
Colour

53. Colour contrast
Can you answer Yes to this one?
15) Is the colour contrast sufficient?
54

54. Colour contrast
55
Colour Contrast
Analyzer Tool

55. Colour contrast
56
The aXe browser
extension is useful for
testing colour contrast.

56. Useful resources 1
Colour Contrast Analyzer
• https://paciellogroup.com/resources/contrastanalyser
Wave Testing Tool - Chrome and Firefox extension
• https://wave.webaim.org/extension/
aXe Testing Tool - Chrome, Firefox and Edge extension
• https://www.deque.com/axe/browser-extensions/
60

57. Useful resources 2
Getting alternate text right
• https://coolfields.co.uk/2010/11/alternate-text-for-images/
Coding forms for accessibility
• https://coolfields.co.uk/tag/forms/
Creating text for screen readers only
• https://coolfields.co.uk/2016/05/text-for-screen-readers-
only-updated/
61

58. Some things I didn't cover
• Form submission errors
• Movement/flashing on
pages
• Audio on pages
• Updating content after
page has loaded
• Timeouts
• Data tables
62@coolfields
• Modals
• Using CAPTCHAs
• Skip links
• Indicating language
• Automated page
refreshing
• Accordions and tab
panels

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