Testing websites for accessibility can be a daunting undertaking if it's not something you're familiar with. The WCAG 2.1 accessibility guidelines can be hard to follow. But actually, many aspects of digital accessibility are not that complicated.
In this talk I move away from the impenetrable guidelines, and introduce a simpler series of yes/no questions that anyone can answer about their own website. In the time available it can't cover every single potential accessibility problem, but instead I focus on some of the most common, and most serious accessibility issues that I've found when reviewing websites. Where possible, I'll also talk about how you can fix any issues founds.
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
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
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
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.
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
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
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.
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
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
I work with organisations to help them improve the accessibility of their digital offerings. Do accessibility testing and guide designers and developers in solutions to the issues found.
WordPress developer – have built many accessible websites using WordPress.
I've delivered presentations to many WordCamps inc London, Sheffield, Edinburgh, Lancaster, Manchester, Bournemouth – and a number of WordPress meetup groups.
This is me in Sheffield a couple of years ago. The presentation is called So, How Do I Know if My WordPress Website is Accessible and focusses on easy accessibility tests that you can do on your own WordPress website.
If you've not seen me do that one – and I know that some of you have - the slides are still on Slideshare , and the deck has been viewed over 12,000 times now.
Something like 20-25% of the population have some kind of different access needs when it comes to websites.
Whether it's blindness, poor vision, colour blindness, dyslexia, ADHD, autism, deafness, or people who are just getting old.