So how do I know if my WordPress website is accessible?

Transcript

Allie Nimmons: Hello, everyone, welcome to WordPress Accessibility Day. My name is Allie Nimmons.

I’m your host for the next few sessions. We’re about to get started with the very first session of the event, “So How Do I Know If My WordPress Website Is Accessible?” with Graham Armfield. So if that’s a question that you’ve asked yourself before, you are in the right place.

Please feel free to add your questions directly into the YouTube chat feed, and we’ll answer those together at the end of the presentation. A little bit about Graham: Graham is a web accessibility consultant with his own company, Coolfields Consulting.

He works with organizations to help them improve the accessibility of their websites, testing the functionality– or testing the websites for accessibility and advising the designers and developers on how to fix issues he’s found. He has written detailed training courses on accessibility for developers which could present on a regular basis.

He’s also a WordPress developer and has built many accessible WordPress websites for clients, both large and small. He has contributed to the Make WordPress Accessible Team and has spoken on accessibility to many WordCamps and other WordPress meetups.

Today he’s going to be answering the question, “So how do I know if my WordPress website is accessible? ” Graham, let’s get started.

Graham Armfield: Okay, thanks a lot for the introduction, Allie. I’m gonna share my screen now.

Can I share my screen? Let’s see.

Yeah, there we go. Am I–yes, I am screen sharing.

Thank you for the introduction, Allie. My name is Graham Armfield.

I’m just gonna make sure I have the right screens visible on my monitor here so that I know what I’m doing. Yeah, thank you for the introduction.

My talk, I’m honored to be doing the first presentation at the first ever WordPress Accessibility Day, and my presentation, as Allie has said, is called, “So How Do I Know If My WordPress Website Is Accessible? ” Okay, let’s get going.

Now, a bit about me. Well, I don’t really need to introduce myself anymore ’cause Allie’s already done it.

Yes, I’ve been doing accessibility for nearly 20 years now. I started working on it for a large financial, 20 years ago, and–but now I work on my own.

My company is called Coolfields Consulting, and yeah, that’s all I do now, accessibility. I look at how websites are doing on an accessibility scale, and I help developers understand the problems and fix the problems as well, so there we go, and I–yeah, I run training courses on a regular basis with developers too.

I’ve built a few accessible WordPress sites over the years, and I can help people build accessible themes. Right.

Moving on, since mine’s the first talk, some of us–well, you know, everyone probably knows what accessibility is, but I wanna talk a bit about why it’s important. Now, it affects more people than you think.

Something like 20% to 25% of the population have some kind of different, perhaps, access needs when it comes to websites. This might, of course, be caused by blindness, poor vision, color blindness, dyslexia, ADHD, autism, deafness, but also it’s like, well, people like my parents.

They’re just getting older in their 80s now. They use the web every day.

They need things to be simple, and they need things to be clear. This picture that I’m showing you, some of you may recognize it if you’ve been to London.

It’s the hill that leads up on the northern side, the River Thames up to Saint Paul’s Cathedral here, okay? It crosses a couple of streets, but it’s just–it goes up the hill, and they’ve got steps here for everyone to use.

But they’ve also put this ramp in when they built this. It’s connected with the millennium, so a few– 20 years ago now.

They put this ramp in here presumably for wheelchair users and for, you know, for people where, you know, we push chairs, buggies or whatever, but if you stand here and look at people using this slope, you can see that most people actually use the ramp rather than using the stairs because perhaps they find it easier. Now, it’s one of the things about doing accessibility is that, without realizing that you’re doing it, accessibility, doing things right, can help everybody, not just the people, the specific people you’re targeting.

Okay, so what I’m gonna cover, now, I’m familiar with the WCAG guidelines. You may have heard of them.

Officially, official title, the Web Content Accessibility Guidelines, Version 2. 1, published by the Web Accessibility Initiative of the World Wide Web Consortium.

It’s quiet a mouthful, and there’s a link there if you wanna find out more about them. Now, these are a great resource for web accessibility.

There’s lots of techniques in there, things to do to test it, but especially if you’re new to the game, it can be very hard to interpret what’s going on here. I still find bits that I’m not really sure about, as well, when I say I’ve been doing it for about 20 years now.

So I thought, “Okay, what could be useful would be a simple yes/no checklist for people, and so that’s what this presentation is. It’s 15 questions, 15 simple questions that you can ask about your own site, whether it’s your site or a site you’re building for a client or just any site that you’re looking at, things that you can check quite easily about your sites and with free tools.

I’ll mention some of these, and I’ve got some links at the end on how to get hold of those as well, okay? But in the short time that I’ve got, I do not wanna talk for hours.

I’ve got half an hour to talk, and then we can do some questions. I can only cover some common accessibility issues, but the ones I cover are ones that I commonly find when I’m reviewing websites, and the–also, they’re sometimes the most important ones as well.

So they’re not–I’m not covering everything, but if you can answer these questions correctly, your site is gonna be a lot more accessible than many websites out there. Sadly, there are a lot of inaccessible websites, and the situation doesn’t appear to be getting any better.

Firstly, we’re gonna talk about keyboard interaction. And before we get onto the actual questions itself why keyboard accessibility is important.

Well, some people can’t use a mouse, trackpad, or touch commands because they perhaps have a motor impairment that affects their hands or their arms, okay? So they’re gonna potentially be relying on keyboards to use their machines.

Some people have very severe motor impairments, and they’ll be using switch devices, and these hook into the keyboard API within their laptop or their desktop machine, okay? So it’s really important that we get keyboard accessibility right.

Also, if I’m using a screen reader on my laptop here or a desktop machine, I’m gonna be actually interacting with it using a series of keystrokes. So let’s get on to the questions.

The first one, “Can I easily see where keyboard focus is? “, and the second one, “Can I easily access all parts of the site using just the keyboard?”

Okay, the first one about keyboard focus, if you’re a mouse user, a touch user, or you’re using your– this, you know, a trackpad underneath your keyboard, you’re probably not gonna have necessarily any concept of what a keyboard focus is, but if I’m a keyboard user who’s sighted, I will be relying on it all the time. So if I’m gonna be tabbing around a page to the links and other things that get focus, I wanna know where keyword focus is ’cause it can very easily get lost.

So let’s have a look at this site, admittedly, not a WordPress site. Gov.uk is a well-known site in the U.K., and it contains a vast resource for everyone, information about government, local governments, finance, tax, disabled people, education, and what have you, and yes, they’ve got a lot of stuff on coronavirus at the moment, and it’s won prizes, this design. If I hover over these links–I hope you can see my mouse pointer here, but if I’m hovering over one of those links at the moment, they do change color, but it’s quite a subtle change, but then with my mouse pointer, I know where I am, okay?

So if I’m a sighted keyboard user, I’m gonna be really thankful for here, a very clear indication of where keyboard focus is, this yellow background and black links, and that’s common across the entire site. I can see at a glance where focus is.

That’s good. Okay, actually, this is a WordPress website, Hassell Inclusion.

It’s a company I do a lot of work with, and here there is clear keyboard focus everywhere on the site, and in terms of getting to all the site, this is good too because this navigation across the top, I’ve got submenus hanging off some of these elements, and I can get to them with the keyboard as well, so I think keyboard users are not effectively locked out from the site as they might be with this site. This is Odeon.

In the U. K., this is a chain of cinemas, and this is what happens when I hover over this link here. I get this gray hover indication, and this submenu appears.

So that’s going to show–you know, I can choose from these things on here. That’s fine, but for keyboard users, the situation is not so great, because if I’m tabbing through these navigation links, I can’t see at all where focus is, and also, when I get–when I actually get onto the “what’s on” link there, I’m not seeing the submenu at all, and so it can now be really difficult for keyboard users, and that could include screen-reader users here as well.

It can actually be really hard to find all the bits of the sites, so that’s something to avoid. Let’s have a look at a couple more questions, and you need to answer yes to both of these ones as well.

“Does the keyboard tab order Make sense?” and “Can I easily access all the functionality of the site using the keyboard only?” The first, one tab order, that’s an easy one to check, assuming that you’ve got a visible focus, or you can just press the tab key, and what you want is the tab also to follow kind of the way that the pages are laid out on the website that you’re testing, whether it’s yours or somebody else’s, okay? So you just need the tab order to actually follow the content, really, ideally, and not jump around randomly.

But looking at the second one, “Can I easily access all functionality with the keyboard only? ” Let’s have a look at this.

This is a WordPress site, and it uses a “lightbox” plugin of which there are a number available. Here, I’ve got these thumbnail images in the content, and if I click on those images or tab to them and press the enter key, it actually shows me a full-sized version of the image, okay?

I’m sure you’re all familiar with the concept. The problem is, for keyboard users, is that when I actually action that lightbox, yeah, sure, I’ve got this nice picture of the skyline in Newcastle upon Tyne, as the sun is setting.

That’s great, but keyboard focus has remained on the page below, so now I can’t see what’s going on. If I press the tab key, I’m actually moving through the underlying page, and I can’t get to the controls here.

I can’t close the lightbox window. I can’t get to these buttons along the bottom, which takes me to the next or the previous image on the page.

So that’s not great, okay? Jetpack, this is a WordPress website, and they’re generally not bad from an accessibility perspective.

They’ve got this language selector here, so if I tab to the language selector and press enter, I can see all the different options here of the different languages that I can have this website presented to me in. The problem here is, once again, the keyboard focus actually is still on the underlying page, and so it’s now impossible for keyboard users and screen-reader users to actually access and change the languages.

So that’s a bit of a no-no. Okay, moving away from talking about the keyboard accessibility, let’s talk about links in your pages.

Okay, the first one, “Are your links obviously links? ” Do they look clickable?

Can you tell them apart from other things on the page? You need to answer yes to that.

Okay, this is a paragraph of text about Exeter and Devon on a WordPress website, and this particular theme, which sadly, quite a lot of themes do, they have chosen by default to remove the underline from all these links that are in this paragraph of content. There’s a lot of links in there.

You may or may not be able to see them. They’re marked out in green text, assuming you’re not color-blind.

Okay, so it’s a lot easier, even if you have good vision, it’s still quite easy–it’s a lot easier to see where these links are if, here, I’ve overwritten the design to actually put the underlines back in. Now, I know some people don’t like these hard underlines, so you can use other ways of doing it.

You can use a gradient, or the border, a bottom border, or something like that, but please use this. The underlines are like a convention on the web to show where the links are.

It’s been around since the dawn of the web, really. The other issue here with having a few links in here with a green with dark gray text is that people who are colorblind or have poor vision just may not be able to see them at all because they may just look very similar to the actual plain content.

We can do better than that. Okay, so the next question– and you need to answer yes to this one as well– “Do all the links provide enough information to state where they lead to?” Does it tell you where the link is gonna take you? Okay, here, from a WordPress site, are a couple of links.

Now, sighted users are gonna see immediately what’s going on here. The first one, find out more about my plugin and second, click here to read more about our terms and conditions.

But these links, whilst, for sighted users, I can see what’s going on, for screen-reader users, the situation may not be as easy because an NVDA is a screen reader that you can download for Windows machines. It’s free to download, so it’s used by a lot of people.

It’s a very good screen reader, okay? And it has these dialog boxes which you can bring up called the elements list.

You can see at the top there. And the links that we just looked at are indicated here.

Now, what this means is that screen-reader users who are using this functionality–and other screen readers carry this functionality as well–they’re not gonna get any context for these links. These links, presumably, each one will take you to a different page, but as far as the screen-reader user is concerned, they’re just saying click here, so that’s not really that informative.

The other thing to note about the dialog boxes like this is that I can actually–if I–I can choose one of these links and actually follow it directly from here, so people are gonna be interacting with this elements list rather than your pages directly if they’re using a screen reader. Now, with a small change to the content, the situation can be so much better.

Here, I’ve changed it to remove the click heres and to put out much more informative links, and you’ll see here in the elements list that the screen reader is now–screen-reader user is now gonna understand exactly where it is that these links are gonna take them. So that’s good.

And which version is easier? Well, the one on the right-hand side.

So test your links to make sure that they’re meaningful. We wanna avoid this.

Now, if you’ve got–you got blog on your WordPress website, you’ll have a blog index page, I’m sure, that you’ll list your last 10 or 12 or however many blog posts, and some themes could put a lot of links into that page. And here, once again, I’ve got the elements list from my screen reader, NVDA in this case, and there’s a lot of links.

First one is–this is actually the featured image for this post, and if I click on it, it will take me to the blog post, but the link text here is effectively Koala Bear. I’ll talk a bit about featured images in a moment.

The actual blog post is called ISTC Southern Area, so that link is informative. I’ve also got links to the date I published it on.

If I’m not–you know, I’m not publishing five blog posts a day, so it’s not necessarily that vital to have a link to that particular date. “Leave a comment,” presumably that’s gonna take me to the bottom of the comments on the comment section.

“Read more.” Okay, now, if I got 10 or 12 links to blogs on this page, I’m gonna have multiple links that say read more.

Not very informative. I’ve got the categories and the tags.

So there’s a lot going on here. Do these links always make sense?

I don’t know. You–It’s your decision, really.

And this theme does a lot. Not all themes do as much as that, and if you’re building a theme for a client, think about which ones are relevant here.

Okay, moving away from links, let’s talk about images. And this first one, can you answer yes to this?

Do all the images on your pages have appropriate alternate text? If I can’t see the images because I’m blind, I will rely on alternate text, using the alt attribute, and yeah, in WordPress, it’s fairly easy to get this right if you know what you’re doing.

This is another from a WordPress site. Here I’m using the Wave browser extension, and I’ll show you a link on where you can get that from, and it shows me what the alternate text is for all the images on the page, here Exeter Quayside.

Once again, Exeter is a city in Devon in South West England. I’ve got a green icon here because it says– it’s telling–you know, it’s saying, “Yeah, you’ve got alternate text here.” That’s great. You get a red icon if it’s not set properly, okay?

Now, the appropriate alternate text may mean an empty alt attributes, and if we have a look at how you add images in the WordPress Classic Editor, here is how you set the alternate text, and if you notice underneath here, it says “leave empty if the image is purely decorative,” okay? So decorative images wanna end up with an empty alt attribute, and this is a convention for screen readers so that a screen reader comes across an image that’s got an empty alt attribute, then it just ignores it.

It knows it’s not really anything meaningful there. Just a note, if you’re doing this, make sure, if you set a caption, it’s a good idea to set the alternate text as well, because not all screen readers will actually link the two together even though they’re quite close on pages.

And this is what it looks like if you’re doing it in Gutenberg, same sort of box. Okay, now where you’ve got images that are part of links, it’s best to have the link destination as the alternate text for that image, and in this theme that I’ve used for my music site, that is the case because if I– this is the featured image for this post, and this is on my blog index page.

If I click on that image, it will take me to the blog post called “Recording Don’t Let Go. ” And you can have a look.

If you look under the bonnet at the code, here’s the link that takes me to the blog page, the blog post, and the alternate text. In the cases like this where the image is part of the link, what the alt attribute is set to becomes part of the link text.

So that’s good. This one’s not so good.

I showed you this one a little earlier. Here’s looking at the elements list in NVDA screen reader.

The actual clicking on the image takes me to the blog post, which is called ISTC Southern Area, okay? But the alternate text for that image is Koala Bear, so a screen-reader user might think that it takes me to a story about koala bears, but it doesn’t.

So if you’re using a theme, hopefully it’s one that doesn’t do that. Okay, videos now.

This is an obvious one, isn’t it? “Do all your videos have captions?” This is me doing this presentation–it’s not the first time I’ve done it–to a group of developers some time ago, and it’s on YouTube. So the captions are shown here.

I’ve made sure that the captions are all up to date up, are right and everything, up straight. Now, it’s obviously deaf people and people who are hard of hearing who rely on captions, but actually, surveys have found out that many other people can use captions with videos as well, sometimes people with cognitive impairments, dyslexia, and other cognitive impairments, will also use the captions as well ’cause it helps underline what’s being said.

Others, like, if you’re watching videos on Facebook or something or in a crowded train or in an office where you should be doing something else, you might be using the captions instead of having it blaring out. Okay, so make sure your videos have captions.

Okay, a few questions around what I like to call is signposting content, and the first one, you need to answer yes to this: “Are your page titles unique and meaningful? ” Now, actually, in WordPress, it’s pretty easy to get this right, because pretty much every theme that I’ve ever come across will take whatever the page title or the blog title is and actually use that as the actual title element in the page, which is what you see in this tab at the top of your browser, okay?

So this is the one from wordpress. org, and here’s one from my own music site, okay, the “Found My Way Album,” and if you look here, it sets the title element to “Found My Way Album,” Graham Armfield Music, right?

The importance here is that, when a screen-reader user arrives at a page for the first time, the page title is the first thing that they will hear. It helps people to know that they’re in the right place, okay?

Sometimes I find websites that just have the same page title right across the board, so that doesn’t mean anything, really. Okay, the next question, and yes, you need to answer yes to this one.

“Do your pages have appropriate headings and subheadings? ” Now, headings used properly and subheadings used properly help everybody, and here on my Coolfield site, I’ve got some headings here, and I’m using the Wave browser extension here, and not only does it show me that there are headings, but it’s also highlighting the heading level as well because the heading levels are important because they help people get an idea of what sections and subsections within your pages, and how screen-reader users do that is they’ll use, once again, the elements list here, except now, instead of looking at links, I’m looking at headings.

Notice that NVDA is exposing the heading hierarchy, and when you go through this list, the screen reader will read out to you what heading is and what level it is so people can try and build up a mental picture of the page from the levels of the headings, so make sure that yours are set appropriately. The important thing to note here is that headings in NVDA and other screen readers have functionality similar to this.

You can use these things to jump around the page, okay? So if I find a heading I’m interested in, press the enter key, it takes me straight to it.

Okay, talking about people jumping around pages, “Are all your landmarks being used correctly? ” Now, when I’ve done other presentations to developers, actually, I’m finding that not very many developers know what landmarks are.

But actually, many people do use them without realizing. Landmarks, they’re predefined areas within a page.

This is a typical–but not–it’s not the only design for a site. I’ve got a banner at the top, some navigation.

My main content and a footer and a sidebar here, okay? It’s sort of an older style layout for a page.

Okay, now, screen-reader users may use these landmarks to jump around to find a bit they’re interested in. The key thing here is when I arrive at a new page, it’s often the main content of that page is the bit that I’m most interested in, and so I wanna try and find the main content landmark, okay?

And then when I’ve read that, then I might wanna find the navigation to go and find something else on your site. Now, most developers don’t use landmarks on purpose, but they probably are using the HTML5 elements like these, okay?

And if you use them properly, they set up landmarks in an appropriate way. So make sure you are using them properly because screen-reader users will be using them.

Okay, so how do you test for the landmarks? Well, there’s a browser extension for that too.

It’s one that’s called Landmark Navigation via Keyboard or Pop-up. It’s available for Firefox.

As you can see here, I’ve got Firefox in the screenshot, or it’s also on Chrome as well, and if you check this box here, show all landmarks, it puts these outlines on your page so you can see where all the landmarks on your pages are. The key thing that’s missing from this page, because this theme, this WordPress theme didn’t put them there, there is no main landmark, so it’s no way using landmarks over a screen-reader user jumping straight to the main content of the page, okay?

There might be other ways of doing it, but if I’m a landmarks user, then it’s not easy for me to get there. Okay, next one, looking at text.

“Can I resize text in a page without breaking the layout?” Obviously, you need to answer yes to that.

Okay, here’s some–a list of links, a normal size. I took this screenshot a few years ago, but it illustrates the problem I find well– I find on some websites.

So here’s normal text size, and this is what it looks like when I made the text bigger. It’s important to realize that zooming and text resizing are not the same thing in browsers.

Zooming is the default option, but people do use text resizing, if they got poor vision, to make things bigger. And you know, people do that, so it’s important that you test your site to make sure that it can cope with it.

This didn’t. And it’s quite easy to find other examples across the Internet, where resizing kind of breaks sites badly.

Hopefully, it doesn’t break your site. Next one, “Are you using fully justified text?” And I would hope that you’re not, really. So here’s a paragraph of text, left aligned, and this is what it looks like when it’s fully justified.

What the browser is doing here is it’s stretching the gaps between the words. So, for example, on this line here, “Cathedral founded in the mid-11th century,” it’s had to stretch the words quite a long way apart, much further than on other lines.

Now, this actually creates a cognitive load for everybody but especially so for some dyslexic people. There is around 8% to 10% of the population could be affected by this.

You get this rivers of white space effect. I have a friend who’s severely dyslexic, and she couldn’t read this paragraph if it’s fully justified.

She just could not read it at all. The spaces just tend to take over.

Okay, a question around forms. In my forms, “Do all the form fields have an accompanying label?”

They need to for screen-reader users, really, because the way that screen readers work, when I arrive at this input field here, I need to find out what it’s for, so the properly marked-up labels are vital here for screen-reader users. This is–I’m using the Wave add-on here, and it’s showing me that all these labels are properly marked up so that a screen-reader user should have no problems using this form, okay?

However, on this website, WordPress website, using the Contact Form 7, with the default settings, sadly, the labels, what looks like a label here, is not linked to the input field, so screen readers will struggle here. So have a look at your own forms and see what happens with the Wave tool.

Okay, the last question, “Is the color contrast on your pages sufficient?” Obviously, you need to answer yes.

What we want to avoid is people not being able to read the text because it’s like a dark gray on a lightweight gray background or something like that. There are rules about what the color contrast needs to be.

To test it, you could use this tool, and I’ll put the link a bit later on, so you can download it. It’s for Windows machines and Macs as well, and you could use these color picker elements here and actually use this, and it will tell you immediately whether it passes or fails the WCAG 2.1 guidelines, okay? And quite a lot of these blue on the white backgrounds on this particular website failed.

This is a site I looked at a couple of years ago. Okay, here’s another one.

You’ve seen this a bit before. Okay, these text links here are green.

The problem is this green has not–insufficient color contrast against the white, and so it will show up. And now, here, I’m using the aXe browser extension.

This is another useful accessibility tool. The link will be provided very shortly.

And the great thing about aXe is it groups all the errors together. So here I’ve got 53 elements on this page that have insufficient color contrast, and it’s literally all these green links, okay?

And you can highlight them as well on the page so you can see exactly what it’s talking about. It gives you some ideas about how to fix it.

I can actually scroll through all the 53 of those if I want to. Okay, there we go.

So there are 15 questions, hopefully, fairly straightforward to look at, using the tools that I’ve mentioned. Okay, you got browser tools in there, like as I– just tabbing around a page.

I’ve got the Colour Contrast Analyzer. This is not a browser extension, but it’s available for Windows machines and Macs.

Paciello Group, American company, accessibility company. Then the Wave testing tool is made by WebAIM.

That’s another accessibility company. It’s available for Chrome and Firefox.

And then aXe is made by Deque, and that’s available for Chrome, Firefox, and Edge. And these tools, I use them all the time when I’m reviewing websites for accessibility.

I’ve also written some stuff about accessibility myself. Here are–I wrote– I was amazed.

I actually wrote this or published this blog post ten years ago now, but still, I’m finding websites that don’t have alternate text set correctly, so if you’re not sure, go and have a look at this blog post, and it gives you some ideas of how to do it properly in each of many situations. Okay, if you’re at all wondering about how to mark up forms for accessibility, I’ve got a series of blog posts about that as well.

You can find them here. And then as a technique that I described– I didn’t invent it by any means, but I describe how to do it here, “Text for screen readers only.” So it’s some text. You can put some extra information text there for screen-reader users, but it’s not visible for sighted users, so there’s a bit about that too.

Okay, things I didn’t cover, and so I just didn’t have time to cover in here, like other things as well, so you know, there are all kind of accessibility, all kind of tests around all of these things, but you know, the ones I showed are probably the most important. And there we go.

That’s the end of my presentation. Hope you found it interesting and informative.

Allie: Wonderful. Graham, thank you so much. We are gonna go ahead and go through some questions.

Graham: Excellent.

Allie: The first one that I’m seeing here asks, “Is image captioning also a part of accessibility?”

Graham: Image captioning. Okay, so that’s an interesting one, because yes, in WordPress sites, you can set the alternate text for an image when you add it to a page or a post, and you can set a caption too. Now, in newer WordPress themes, what it does under the bonnet, so I’m not sure where everyone’s gonna be as a developer on this particular call, so I am gonna get a bit technical here.

It actually puts the image and the caption in a figure and marks up the caption with a fake caption, okay, which is a–I think it’s a relatively new–perhaps an HTML5 construct. Some screen readers do actually now link these two things together, but I wrote a blog post about this a couple of years ago, and it’s not consistent– it’s not consistently implemented in screen readers, so at the moment, that’s why I recommended it when you’re adding an image into a blog post or a page.

It’s–even if you’re setting the caption, it’s a good idea to set–still set the alternate text as well because some screen readers will not link the two together.

Allie: Got it. Wonderful. Next question, “You’ve been working in the business for over 20 years. What has been the most important advance in web or WordPress accessibility during that time?”

Graham: Okay, well, it’s interesting.

HTML5 actually, which started to appear–I mean, I think that it’s published–the specification was published 12 years ago or something like that. Over the last few years, more recently, support for HTML5 elements has been getting better all the time, and I mentioned, when I was talking about landmarks, that the HTML sites’ sectioning elements, sectioning elements like main, nav, header, footer, et cetera, they have really helped because now they can define regions within pages for screen-reader users.

Unfortunately, some of the other great things that HTML5 has introduced, like, for example, “input type equals dates,” which gives you a fully–or in theory gives you a fully accessible date entry field for your forms, it works in some browsers, and it works in some screen readers, but it’s not at all supported by IE 11, Internet Explorer 11, which perhaps might–wouldn’t surprise you, but even Safari on Macs doesn’t support input type equals date, and there’s been an outstanding bug about that for many, many years. I think Apple need to get their backsides in gear and actually support–start supporting that, because let’s face it–I didn’t mention date pickers during the presentation, but if you’re providing a date picker for somebody to use, it can be a hell of an experience if it’s not an accessible one, especially if you force people to use a date picker.

That’s not a good idea at all. So I think, overall, to summarize, HTML5 elements have started to make a real difference now, and as support for these elements in browsers and screen readers increases, then it’s, you know– because you know, who wouldn’t wanna use them?

Because you get a lot of stuff for free. Whenever you use native HTML elements, you get all the accessibility for free there, so let’s start using them once they’re well supported.

Allie: Beautiful. Great answer.

Next question is “Which colors are best to use in accessible design?” I feel like that might have a complicated answer.

Graham: Well, yeah, I’ll try and keep it short. Okay, so that’s an interesting one.

And talking about color contrast is, as I did earlier, obviously, the most color contrast could be provided by having black text on a white background, but I would caution against that because whilst that’s the maximum color contrast you could ever have, this is not good for some Dyslexics. Some people who are dyslexic will find that that’s just too much color contrast.

It’s too in your face, which is another colloquial term, but hopefully everyone knows what I mean by that. So I think, don’t–yeah, avoid maybe black on white, or white on black.

These are quite good. Maybe high-contrast, you know, schemes are good for some people.

Just, I mean, most people who–most organizations I work with, they already got a brand palette already, and a lot of organizations have color colors in their brand palette that will actually provide combinations that provide enough color contrast without being too much. Some organizations, that’s not true, and then it can be a real problem with them.

So I think just make sure that you get enough color contrast there and using the tool that I mentioned earlier. Either aXe, or the Colour Contrast Analyzer will help you there.

Try and avoid, like, blacks and white–black and white. It’s a bit too much for some people.

Allie: So it sounds like the summary of that is it’s maybe less about the color themselves, but the relationship between the color, like, how the colors contrast with each other. Graham: Yeah, yeah, that’s it.

Allie: So the next question, “Do you have a go-to or recommended theme that is ally-friendly as a starting point?

Graham: That’s a good question.

When I’ve been–when I built WordPress websites for organizations–over the last ten years, I’ve been doing that–literally, I have always started from scratch and built my own, and I’ve got my own, like, effectively, starter theme, which I tend to just tweak. I think many developers work that way anyway.

But that said, a lot of the defaults, WordPress themes, are pretty good, like the 20x, 2020, 2019, and everything like that. I believe their features are quite good.

I don’t have a name of any other themes that I can recommend. Things to look out for, though, within the theme review process, there is a tag that people can apply for, theme developers can apply for, called accessibility ready.

It was something that was introduced by the accessibility team, and Joe did a lot of work on this over the years, and it’s–you know, if you want an accessible theme, go and have a look. You can select the themes.

When you’re doing review of the themes on wordpress. org, you can select themes that have the tag “accessibility ready,” and these ones probably are better than many others.

Allie: Wonderful. All right, next question, “It helps a lot when a site uses a different color for visited links, but how do you make that accessible?” Oh, so “It helps out when a site uses a different color than the default shade of purple for visited links, but how do you make that accessible?”

Graham: Okay, well, that’s an interesting one.

I mean, when you’re choosing colors for your links on your buttons and what have you, I mean, you’ve got, I mean, in theory, like, almost an infinite choice of what you can use, but it is important for some people to know which links are visited. I wouldn’t have said it was one of the highest importance, accessibility issues.

If I’m using a screen reader, I use NVDA for a lot of my accessibility testing, and it will tell me which links are visited and which I’ve already visited. It will just say so-so-link visited, okay?

So, as a screen-reader user, I know that I’ve already been there. Yeah, you can use a different color.

People would have to learn the default colors, like, for– are blue for links that you haven’t visited yet and purple for links that you have visited. Now, obviously, people wanna, you know, use something that’s in their brand palette, but I wouldn’t get too hung up about, you know, indicating visited links too much, really.

Yeah, just choose the color that–if you want to indicate them, then choose a separate color from the other one. But you know, don’t worry too much about that.

Allie: Awesome. The next question, “Graham, do you have any tips for an upcoming new WordPress developer?”

Graham: Okay, yeah, good question. I was in that role at one point, and you know, maybe I need to be learning it all again now.

There’s Gutenberg around. But yeah, in the theme review guidelines, there’s a lot of–yeah, there are a lot code standards now, coding standards now.

That includes a section on how to build an accessible theme. It’s got, like, it’s–I didn’t really have much of a hand in crafting this at all, but I know that other members of the accessible team have had a lot to do with it, and it’s worth having a look because it’s got some real–really good tips in there and talks about some of the issues that I covered in my presentation, and it explains from a developer’s perspective more about how to actually do that in the themes that you’re building, so I recommend that you start with the, you know, the WordPress theme coding guidelines and then the accessibility standards as well, how theme developers would get–yeah, would work towards getting that accessibility ready tag.

Allie: Wonderful. All right, next one.

This one is a little bit long. “It seems so many people knowingly ignore accessibility altogether. If you could wave a magic wand and immediately answer just one question mentioned during your talk and never need to address it ever again, what would you choose to make the biggest positive impact and why? Keyboard focus, interaction, tab order, links, et cetera?”

Graham: Okay, I’m gonna have to say it’s one of the keyboard ones here, and whether it’s– yeah, visible focus is– it’s just vital for– you know, the actual– people think of blind people using the web. Yeah, and that’s obviously gonna be a bit difficult, and then yes, they can use a screen reader, okay?

But actually, the population of people who are sighted but who have to use a keyboard or who choose to use a keyboard– I actually got into IT when these things like, you know, “Here’s my mouse,” these things didn’t exist, right? It was all black and green screens and keyboard keystrokes, and whatever, like that.

I’m still a bit of a power-keyboard user myself, so I would say visible focus, you know, is vital for– you know, and making sure that people can get to everywhere, everything, anything that’s a button or a link. Sometimes things pretend to be a button, and they receive a– you can click on ’em, but you can’t actually tab to them, right?

So keyboard–visible keyboard focus and keeping focus in the right place. That’s gonna be the one, really.

Allie: Wonderful. All right, we’ve got about three minutes left, so we’ve got time for a couple more.

I think this one’s my favorite so far: “Is there a way to do an accessible image carousel or slideshow?”

Graham: Mm, yeah, okay, a lot of companies that I’ve been working with–and there are some big organizations now– are actually moving away from using carousels because a lot of people–you know, see, there are people that think they’re a good idea, but there’s a lot of people who don’t think they’re a good idea.

The short answer is it’s tricky, but it is possible. I mentioned the WCAG Guidelines.

If you look on the Web Accessibility Initiative website, it’s got some useful pages that show accessible examples of things like, you know, carousels, drop down navigation. They’ve also got accordions, tab panels, and what have you, and you know, track those down.

I don’t know if I put that–I haven’t got the link handy at the moment, but maybe I can stick it in later on some way. They’ve got an example carousel, and it’s fairly good from an accessibility perspective.

It can be used by keyboard users, touchscreen users, screen-reader users, and also let’s not forget people who use voice recognition software like Dragon Naturally Speaking as well. It’s important that you–I didn’t mention that at all either, but it’s important that everything that you build can be actioned by people who use those tools.

So, you know, yeah, there are accessible patterns out there, and it’s useful to follow those. Allie: Wonderful.

All right, we have one minute left, so we can squeeze one more in, I think. Graham: All right, I’ll make it a quickie.

Allie: Wonderful. Last question, “Would you like to see accessibility standards for WordPress plugins, and if so, how do you think we could apply them?”

Graham: Okay, good question. Short answer is, yes, I would, that whilst there are guidelines for theme builders on accessibility, there is no guidance at all for plugin builders at all.

And plugins, as we’ve seen with the lightbox in my presentation and also contact forms can completely mess up the accessibility of your website, so it’s like the Wild West out there.

Allie: Fantastic.

Wonderful, Graham. Thank you so much.

That’s right on our time, and thank you all.

Graham: Thank you, Allie.

Allie: Absolutely.

Graham: Cheers, everyone.

Take care, bye-bye.

Allie: Bye-bye. And thank you all, everyone watching, for attending “So How Do I Know If My WordPress Website is Accessible? ” with Graham and me.