So How Do I Know if My WordPress Website Is Accessible?

Hi everybody, my name is Graham Armfield from

Coolfields Consulting and my presentation

is called ‘So how do I know if my WordPress

website is accessible?’

It’s a presentation I’ve delivered a few times

before, but I’ve recently updated it so you’re

going to get the new version.

Before I start, a bit about me. I’m a Web

Accessibility Consultant and what that means

is my day job is working with organisations

to help them improve the accessibility of

their digital offerings – whether it’s websites

or apps. I do accessibility testing, and work

with designers and developers to improve the

situation. I also run a lot of training courses,

with another company, for web developers.

I am actually a web developer and I’ve built

many accessible websites using WordPress over

the years. So here we go, that’s a bit about

me.

Before I actually start on the main material

I’m going to talk a bit about why accessibility

is important. I’m sure most of you will understand

this anyway, but actually the aim, with websites

is to make them as accessible as possible.

Because if you have a website that’s selling

products or services, it’s important that

you can sell to as many people as possible.

And something like 20 to 25% of the population

may have different access needs when it comes

to websites. This could be caused by conditions

like blindness or poor vision, colourblindness,

dyslexia, ADHD, autism, deafness, people who

are hard of hearing or people who are like

my parents, who are just getting old.

And it’s important that whilst having a very

accessible website is great, even just small

improvements can make a difference to everybody.

This photograph here – you may wonder why

I’m showing you that – it’s the hill up from

the northern end of the Millennium Bridge

in London, that leads up to St Paul’s Cathedral

that you can see up there in the distance.

And it’s effectively a long hill, and it’s

a staircase most of the way. But when they

built it they put this ramp that you can see

there as well. And I’m sure that the people

who designed this figured that that would

be used by people who are using wheelchairs,

or people who are using buggies as well.

But in fact, if you stand here, as I did on

this rather damp day a couple of years ago,

you can see that actually most people who

walk up this hill, or down this hill, will

actually use the ramp in preference to using

the stairs. And it illustrates how accessible

features that you can add into your websites

can actually help everyone, rather than the

people that they were just aimed at.

So, what I’m going to cover.

I’m familiar, I’ve been in accessibility for

about 20 years now. I’m familiar with the

Web Content Accessibility Guidelines – known

as WCAG for short. We are currently on version 2.1

and these are a good resource for web

accessibility. But there is a lot of material

there, and if you’re not familiar with the

territory they can be quite hard to interpret.

It’s worth having a look at, but you know

they can be a bit impenetrable really.

So how about if you had a simple yes no checklist?

Things that you could easily check on your

own website with some free tools? And that’s

what this presentation is all about.

In the half an hour that’s available to me

though, I can only cover some common accessibility

issues. I have got time to cover everything,

so I’ve pulled out some common, and some significant

accessibility issues that I’ve found in websites

over the years. But if you can answer all

the questions successfully, then your website

is going to be a lot more accessible than

many websites out there.

So let’s get started.

The first few questions I’m going to talk

about are to do with keyboard interaction.

This is a very important aspect of accessibility

because some people can’t use a mouse or trackpad

or touch commands, perhaps because they’ve

got some kind of motor impairment with their

upper limbs. So they might actually have to

rely on keyboards to actually use their machines,

including browsing websites.

Also, people who use screen readers, and that

is typically blind people, but not exclusively

blind people, if I’m using a screen reader

on a desktop or a laptop machine, then I’m

also going to be using keystrokes to actually

issue commands to the screen reader all the

time. So it’s important that you get the keyboard

accessibility right.

So the first couple questions, and as it says

there, you need to answer yes to both of these.

Can I easily see where keyboard focus is?

And the second one, can I easily access all

parts of the site using the keyboard only.

That one is about navigation between your

pages.

But the first one – can I easily see where

keyboard focus is? If I’m a sighted keyboard

user I’m going to be using the tab key a lot,

to move around within a page, to links and

buttons within the page that enable me to

visit somewhere else, or do some kind of functionality.

It’s really important that I can easily see

where keyboard focus currently is. In many

websites that’s just not the case.

The second one. Yes, I’ve mentioned it’s about

navigation. I want to be able to access all

parts of the site if I’m a keyboard user.

And sadly on a lot of websites, the navigation

doesn’t always cater for keyboard users. So

we’ll have a look at a couple of examples

of these now.

So gov.uk is a very famous site in the UK.

A wealth of information about things to do

with government and tax, and driving licences,

passports, etc, etc. One of the great things

about it is, it has very good keyboard focus

indication. So here I’ve come to top of the

page, and I’ve tabbed around a bit and I’m

now at this link here – the one that’s got

a yellow background.

All the focus indication on this site is very

obvious, which sighted keyboard users will

really thank them for. OK, so that’s an example

of a very good focus indication.

Here’s another website, and it’s a company

that I do a lot of work with – Hassell Inclusion.

There’s good, clear keyboard focus everywhere

on this site. Also, the navigation is fully

accessible as well. I’ve got these submenus

that pop out of here, indicated with the arrows

here, and these are fully keyboard accessible

as well. So keyboard users can get to everywhere

in the site.

A website that doesn’t get it right… It’s

not admittedly a WordPress site, but here

the Odeon cinemas site. If I hover over this

link here – What’s On, I get this panel that

pops out, and it’s got a search facility and

lots of links to take me to the various films

and what have you and everything. That’s great,

so I can get around the site quite easily.

However, if I tab to that link instead, I

don’t get to see that panel, and so I haven’t

got access to the search facility there, and

these various links and what have you. OK,

so this is not a good experience for keyboard

users.

Next couple questions. Does the keyboard tab

order makes sense? and can I easily access

all functionality with the keyboard only?

The first one there – keyboard tab order.

The browser sets the tab order when it loads

the page, and ideally it should follow the

content order. And if you have the tab order

jumping up and down the page it can get really

confusing for people to use. Once again you

can be testing this using the tab key.

The second one there – question four – Can

I easily access all functionality with keyboard

only? This is not talking about navigation,

it’s talking about interactivity in your pages.

And it’s things like modal windows, etc.

So let’s see an example of that now. This

is a WordPress site that uses a lightbox plugin.

And if you’re not familiar with what that

is, I’ve got these small versions of the images

here. If I click on the image, or tab to it,

press the enter key it actually shows me a

full-size version of the image like this,

in an overlay above the underlying page.

The problem here with this particular plugin

is that keyboard focus actually stays on the

page below. So now keyboard users are going

to struggle to get to these buttons at the

bottom, which show me the previous and next

image in the series, or close the image completely.

I just can’t get there if I’m a keyboard user,

so that’s a real problem.

Also on the Jetpack website. Mostly, this

website is pretty good from an accessibility

perspective. However, it’s got this language

selector here, and if I tab to that, press

the enter key, it opens the language selector.

But once again keyboard focus is still on

the underlying screen, and so sighted keyboard

users will actually struggle to actually select

different languages on this site. So that’s

not a good thing.

OK, moving away from keyboard interaction,

let’s talk about links. The first one here,

and you need to answer yes to this one – Are

your links obviously links?

Now it’s a convention from the dawn of the

web that links would be marked with underlines.

However, this particular WordPress theme actually

chooses not to do that. It’s taken the underlines

away from all the links, and you can see this

paragraph of text on the left here about Exeter

has lots of links in it. There marked with

green text. How much easier is it to see these

links when I’ve reverted the underlines back

on again?

Because users who are colour blind, or have

poor vision will struggle to see the links

on the left-hand side, because the green text

is quite similar to the grey text. OK, so

things to avoid there.

The next one on links – Do all your links

provide enough information to state where

they lead to?

Here we’re looking at issues for screen reader

users – typically blind people as I said before.

So here I’ve got a WordPress site, it’s about

a plugin that is available. I’ve got a link

here that says ‘Click here’ that’s to find

out more. I’ve got another link that says

‘Click here’ that’s to read the terms and

conditions. Now I’m not getting a problem

on the verb here, because obviously not everyone’s

clicking, they might be touching or keyboard

tabbing to it.

The problem is for screen reader users, is

that often screen reader users will use functionality

like this – which is a list of all the links

on the page that they can have a look at.

And this is using the NVDA screen reader which

is available for Windows and it’s got those

two links there. Now they take me to two different

places, but there’s nothing obvious in the

link text to tell me where they’re going to

take me. And the reason why that’s important

here is because I can use this box here to

actually follow the links from here, rather

than going back to the underlying page.

OK, so that’s quite easy to fix really. Quite

easy to test, and quite easy to fix. you can

change the content to say something like ‘Find

out how we update the plugin’ and ‘terms and

conditions’.

So now when I’m using a screen reader and

I get the list of links up it’s much more

obvious what these links are for.

So it’s a lot easier for the ones on the right-hand

side for a screen reader user.

OK, we want to avoid this, lots of ‘click

here’s and ‘read more’s all over your pages.

Let’s talk a bit about images and video. The

next question – Do all your images have appropriate

alternate text? And you can test this quite

easily using a browser extension called Wave,

which will show you what the alternate text

is for the images.

This is important for screen users, who may

be blind, because they will know that there’s

an image there, potentially, but they’ll want

to know what the image means OK. So when you’re

setting your alternate text in the classic

editor you’d use this box here. And it’s a

good idea, even if you’re supplying caption,

to actually set the alternate text as well.

And this is what it looks like using the Gutenberg

editor as well – same sort of thing. You’re

helping screen reader users here.

If you got images that are links, and often

on your blog index page you will do that,

your WordPress theme might actually make these

images that are here on the blog index page

actually a link to the blog post. And this

is a WordPress theme that I’ve used for my

own music website and the WordPress theme

does that for me automatically. It actually

puts the link destination as the alternate

text for this image rather than it saying

‘me playing the guitar’, which is much more

useful.

And you can see here that I’ve got the underlying

code. I’ve got this link here, and the only

thing in that link is this image. And the

alternate text, in this case, then becomes

the link text for that image. So that’s good.

Now not all themes do that sadly. This particular

theme doesn’t do it. So here I’ve got a list

of links in my screen reader and this is the

featured image for this particular blog post

which is called ISTC Southern Area. And that’s

the blog post, that’s a link to the blog post,

but this is also a link to the same blog post

but the alternate text is koala bear. That’s

not great alternate text, because it’s actually

not really about koala bears. It’s just I

happened to choose this image as the featured

image for that blog post.

The next one’s around videos. Question eight

– Do all your videos have captions?

This is me doing this very presentation some

time ago and there’s a video of it on YouTube.

And I’ve made sure that all the captions were

correct. Obviously captions are important

for people who are deaf or hard of hearing,

but actually many other people use captions

when watching videos as well – perhaps in

a noisy environment.

The next section is a group of things around

signposting your content. And primarily here

we are helping screen reader users.

So the next question – Are your page titles

unique and meaningful? And obviously, you

need to answer yes to this.

Generally, this is taken care of for you with

WordPress themes. Here I’ve got the page title.

It’s what shown in the browser tab at the

top here, and typically it will be whatever

the page title is set to in your WordPress

editor. And so that’s great. Why this is important

is the title element is set here, and when

a screen reader user arrives at a page for

the first time the very first thing that gets

read out to them is the page title. So it

helps them to know that they’re in the right

place. And you can test that by checking the

browser tabs at the top here.

The next one – Do your pages use appropriate

headings and subheadings?

Once again quite important for screen reader

users. OK, you can test this using a browser

extension called Wave, and here I’ve got a

heading level 1, because Wave also shows you

the heading levels here. The top level heading,

and second level headings here. OK, and this

is a good thing that you actually are using

headings properly.

The reason it’s a good thing for screen reader

users is because once again in NVDA, you can

use this Elements List here which actually

will show you a list of the headings on a

page. So if I can find a heading I’m interested

in, I can quickly jump to that heading and

it will move me to that that section of the

page.

The key thing to note is that NVDA exposes

the heading hierarchy, whether I’m seeing

it here or hearing it announced to me. And

so it will help me build a picture of how

the page is structured. So it’s important

to try and get your heading hierarchy as accurate

as possible.

Another way that screen reader users can move

around pages is using landmarks. So what are

landmarks I might hear you say.

Well, landmarks are predefined areas within

pages. For example the banner, navigation,

main content, footer, a sidebar if you got

one. And screen reader users can jump around

the page to these various sections.

OK, well how do you use those?

Well in fact, most WordPress themes now are

using HTML5 sectional elements. And it’s what

they’re for, they actually provide landmarks

for screen reader users. That’s why they’re

there, an accessibility feature.

So I’ve got <header>, <nav>, <main>, <footer>

and <aside>. And these equate to landmarks.

But how do you test that I can hear you ask.

Well, there is a browser extension for that

too. OK, Landmark Navigation via Keyboard

or Pop-up. It’s available in Chrome and Firefox,

and it will show you all the landmarks on

a page. Which is useful to know, so you can

test your own pages quickly. And there is

a key problem with this WordPress theme though,

it doesn’t show the main landmark on any pages

or posts.

And that’s probably the most important one

in every page, is the main landmark, it’s

where the main content is, but it’s not here.

OK, moving away from signposting your content,

let’s talk about some text formatting.

This question – Can I resize text on a page

without breaking the layout? This still happens

on quite a lot of websites. It’s important

for people with poor vision who might want

things to be bigger, OK.

An example of where it isn’t right… Not

a WordPress website this one, and it’s quite

old. It’s a list of links in a box, and this

is what it looks like when I make the text

bigger. The links have spilled out because

they take up more space. They’ve spilled outside

the box and have started spilling over other

bits on the page.

It’s important to realise that text resizing

and zooming are not the same thing. They are

both features that all browsers offer, and

people use them in different ways. Typically,

we’re talking about people with poor vision

here, who want things to be bigger. Some people

will zoom, some people will text resize. You

need to test this, with your own websites

here to make sure that it doesn’t break in

this way.

Here’s some more examples I found fairly recently.

So lots of clashing going on there, and there,

and some truncation, where it is getting to

the point where it’s difficult to read some

of this stuff when I’ve made the text bigger.

The next one going to talk about is formatting

text fully justified.

OK, so here’s a paragraph of text about Exeter

– that’s left aligned. This is what it looks

like when it’s fully justified.

What the browser is doing is it’s stretching

the gaps between the words, and this creates

a little bit of a cognitive load for everybody.

And what I’ve indicated here is an effect

that you can get called the ‘Rivers of white

space’, which, if you’re dyslexic, you might

recognise this term, because fully justified

text can make life very difficult for some

dyslexics.

I have a friend who is significantly dyslexic.

She would just not be able to read that text

on the right-hand side because the whitespace

would just take over.

It’s around 8 to 10% of the population have

some form of dyslexia, so that’s a lot of

people.

OK looking at user input. Form fields. It’s

important that all your form fields have an

accompanying label.

Now that is important for screen reader users

because a label tells them what the input

field is about. And it’s important that the

label is programmatically linked to the input

fields so that screen reader reads out the

right text to the user when they arrive at

an input field.

And here I’ve tested this with the Wave browser

extension and it gives me these green icons

on this form here, where the labels are correctly

assigned with the input fields.

However, that’s not always the case. And here

I’ve used the Contact Form 7 plugin on a website,

just to try it out. And this is with the default

settings, and unfortunately the labels are

not properly linked to the input fields, so

this will make life very tough for screen

reader users. So you can test that with Wave.

OK, moving onto the last section, and the

last question around colour contrast.

This is not a picture of my mother, but I

have seen her complaining about websites where

it’s impossible to make stuff out because

the colour contrast is just not clear enough.

And here’s a WordPress website where unfortunately

they’ve chosen branding colours that provide

a lot of colour contrast problems, right across

the site.

And I’m using a tool here called the Colour

Contrast Analyser. I’ll show you the link

for that in a moment. And you can choose the

foreground and the background colour and it

will tell you immediately whether there is

sufficient colour contrast, to an algorithm

that the WCAG guidelines specify. And in this

case there is very little actually that meets

the requirement.

You can use that tool to test your pages or

you can use this other browser extension called

aXe. It’s available for Chrome and Firefox,

and it will actually show you while a layout

show you quite a few accessibility problems,

including colour contrast issues. And the

problem here is the green text has insufficient

contrast against the white background.

OK, that is all the questions, 15 questions,

and hre’s some useful resources.

The first one is a link to that colour contrast

tool that I just talked about. It is available

for Macs, as well as Windows machines and

then I’ve got the two browser extensions.

Wave is available for Chrome and Firefox.

aXe is available for Chrome, Firefox, and

Edge, but that’s the new Microsoft Edge. And

I expect the Wave tool will be available for

Edge before too long.

OK, a couple of other useful links. I’ve written

lots of blog posts about accessibility – not

surprisingly – and here’s one from 10 years

ago about writing good alternate text for

your images. Even though it’s 10 years old,

the stuff in this blog post is still very

relevant. OK, so you might have a look at

that.

I’ve also written a few blog posts around

doing form fields correctly. There’s a few

on there so you can follow that and it will

show you a list of those ones there as well.

And there we go. That is my presentation on

How do I know if my WordPress website is accessible?