Podcast Episode

481 – Make Your WordPress Site Accessible and ADA Compliant

Announcements

Is there a plugin for that?

With more than 50,000 plugins in the WordPress repository, it’s hard to find the perfect one. Each week, I will highlight an interesting plugin form the repository.

For more great plugins, download my 50 Most Useful Plugins eBook.

WordPress SEO Plugin – Rank Math is a plugin to help site owners access the SEO tools they need to improve their SEO and attract more traffic to their website.

Make Your WordPress Site Accessible and ADA Compliant

Website owners have a responsibility to make their online sites and stores accessible to a large, diverse user base. Much like their brick and mortar counterparts.

A few questions to think about when designing your site:

  • Will assistive technology like screen readers be able to clearly and accurately interpret the content?
  • Is your site’s design and layout consistent and user-friendly?
  • Can the text be scaled without throwing the page layout out of whack.

Tools that you can use

Thank You!

Thank you to those who use my affiliate links. As you know I make a small commission when someone uses my link and I want to say thank you to the following people. For all my recommended resources, go to my Resources Page

Full Transcript

Business Transcription is provided by GMR Transcription.

On today’s episode, we are going to talk about how to make your WordPress site accessible and ADA compliant. Right here on Your Website Engineer Podcast, Episode #481.

Hello, and welcome to another episode of Your Website Engineer Podcast. My name is Dustin Hartzler. I’m excited to be here with you today because we’re going to be exploring a topic that I’ve done almost zero research about in the last 10 years of doing this podcast. It comes from a listener question, and it’s just a really interesting thing to talk about: Making your site more accessible and more ADA compliant. We’ll talk about that in just a couple minutes.

I do have two announcements and a plugin to share. The announcements are, WordPress 5.4 Beta 3 is now available. Again, it is software that is under development. Don’t install this on any live sites. There’s two ways that you can do this. You can download the Beta, and then just create a new WordPress site and install the Beta, or you can use the WordPress Beta tester plugin. There is an option inside there to use the Bleeding Edge Nightly, and this will allow you to get the latest and greatest, and it will update you all the time and keep you with the latest version.

There’s been some fixes with Gutenberg, and there’s been some fixes with the way that the site health score displays on the dashboard. Those are the two big things that they fixed in the Beta, and then there’s a lot of refinements in some core things that they did for developers as well. So, if you’re a developer, or if you’re just interested in what the new version of WordPress is going to look like and what some of those new Gutenberg features are going to be, I highly recommend checking out the Beta for WordPress 5.4. Looks like they’re still slated for release on March 31st, so we are just about a month out. We probably have one more Beta and then a couple release candidates, then we’ll get it at the end of next month.

All right, that’s the first announcement. The other announcement, I’ve linked this in the show notes for Episode #481, is just an article about the acquisition, or after the acquisition, of Flywheel by WP Engine, and what it looks like in the new year. It’s something that happened in June last year, more than six months ago, and we’re just kind of going through and talking about things that have changed. Actually, there’s not a whole lot that has changed. The only thing that’s really changed is they brought the tiny plan back. That’s a price point for small sites that’s down to only $15.00 per month for extremely small sites. That’s the only real change that outwardly facing things that you’ve seen at Flywheel.

And then, it just talks about some of the changes and how the roadmap is still kind of the same. If you’re interested in Flywheel, I love the Flywheel history, and Flywheel’s probably one of my favorite hosting companies that are out there. I just enjoyed reading the story. It’s over on WP Tavern, but there’s a link in the show notes, and you can find that at yourwebsiteengineer.com/481.

All right, the last thing that I want to share with you today is a plugin, and that plugin is called SEO. It’s a WordPress SEO Plugin - Rank Math. That’s the official name of it. It is a plugin that one of my colleagues actually talked about, and they are starting to recommend this as an additional option if you don’t want an all-in-one SEO or Yoast SEO. This one is called, like I said, WordPress SEO Plugin - Rank Math. It is a plugin that just allows you to set up your SEO strategy in a neat and organized way. It has a great onboarding wizard as you are installing it, and once the onboarding process is over, if you have to add additional details for a post or page, you can go ahead and do that as well.

So, that’s one of the ones that I wanted to point out today. If you haven’t tried it out, or if you’re not a fan of any of the other SEO plugins, I don’t know, maybe you can give this one a try on your next project. It’s called WordPress SEO Plugin - Rank Math, and you can find that in the show notes, or you can just search for that in the WordPress repository.

All right, today I want to address a listener’s question. Susan wrote in and wanted to know how to make a website ADA compliant and make it accessible. That’s a big thing that we, as web developers, a lot of times forget. I remember back when Gutenberg launched a block, the big thing was it wasn’t accessible. What does that mean? Basically, there is a large percentage of users – it says in this article that I’m reading on Pantheon’s website that there’s over 60 million Americans, or approximately 1 in 4, live with some type of disability. Some of these disabilities can interfere with the individual’s ability to use and fully interact with a website. That could be visual, cognitive, mobility, or hearing. As a result, some of these web users will rely on assisted devices and software like voice and text readers to access websites and services.

To make your website and online service digital products available to a broader audience, your content should be designed and organized to make it accessible and easy to understand for both humans and the technology that helps some people consume what’s on the website. And so, some of the things – and there’s a whole list of questions here that I’m just gonna read off real quick. These are some questions and some compliant things that have been – these are the standards set forth by the Americans with Disabilities Act.

Some of these questions are:

Can a person with a visual, auditory, cognitive, or physical impairment clearly perceive and understand your site’s content, tools, and navigation?

Will the assistive technology and software like text readers be able to clearly and accurately interpret and translate your site to the content user?

Is your site operable, meaning a user with limited or no access to a mouse or touchscreen fully enjoy all the site’s features by just using the keyboard?

Can the site be navigated easily and intuitively without a mouse, and with assisted devices and software?

Is your site’s design and layout consistent, intuitive, and user-friendly throughout the entire site?

Is the contrast ratio between the text and the page background acceptable?

Can text be scaled without throwing the page out of whack, or can text be enlarged as needed without distortion?

Are you currently using or considering plugins, video content, or design elements that may not work for users with specific impairments?

Those are just a couple of the things that we want to think about when we’re building out a website. And, honestly, a lot of these things don’t even come to mind when I’m building a website. There are so many things that we have to focus on when we’re building websites that it’s kind of overwhelming, actually. It is one of those things that, well, it looks good on this screen, but now we’ve got to try this screen size, and can a screen reader read it? It’s really tough. For somebody to say that building a website is easy, there are a lot of things to consider.

Now, those questions are great questions to think through and try to figure out, but there’s also some tools that we can use, some accessibility tools that will help us to figure out and do a site audit and see what’s actually happening on our current site. The first one is a tool called Lighthouse. I thought this was some sort of website that you go to, but it’s actually built into Google Chrome. It is in the Chrome Developer Tools, and what you do is you go to the URL that you want to audit. You can actually audit any URL in the world. You put that in the Chrome Developer Tools. You can get to the Chrome Developer Tools by going up to – you go into Chrome, and I usually use the keyboard shortcut. It’s Command + Option + I, and that will open it up automatically. But then, if you go into – there’s some way to view Developer mode, it’s under Chrome View Developer. Then you can go and you can say either Developer Tools, that’s gonna be the best one to take a look at.

Once you have the Developer Tools open, then there’s all kinds of things across the top. Elements is the tab there where you normally look at the HTML, and you can see what the CSS looks like and how that styling is working. There’s the Console, that’s where a lot of error logs will happen that will give us a lot of debugging tools. There’s so much information in this Developer Tool area, like the sources, the network, the performance memory, all that kind of stuff usually just blows over my head. It’s really complex. There’s a lot of cool information in there about the page load speed and where all the data’s coming from and whatnot, but there’s actually a tab called Audits, and you can go to the Audits tab and you can run an audit on the website.

It looks like my score isn’t the greatest on yourwebsiteengineer.com. I’ve got a 15, and all of these are on a 100-point scale. I’ve got a 15 on Performance, 66 on Accessibility, 71 on Best Practices, and 82 on SEO. All of them aren’t quite to the 90-100 range when you get a green circle, but I’ve got one red and three yellows. So, not terrible terrible, but there are some things that I could do. It looks like under the Performance tab, the Speed Index, the Timed Interactive First CPU Idle, there’s a few things that I could work on there. And then, just kinda scrolling down, seeing some of the different options and the different things that I could work on to make my site better.

But going to the Accessibility site, it says that the buttons do not have an accessible name, image elements don’t have attributes, form elements do not have associated labels, links do not have a discernible name, the background and foreground colors do not have significant contrast ratio, the ID attributes on the page are not unique, the HTML element does not have a language attribute for internationalization and localization. When it comes to tables and lists, the lists do not contain only LI elements and script supporting – I’m not sure what that one is. And some navigation have a tab index greater than zero. A tab order greater than zero implies an explicit navigation ordering. Although technically valid, it also creates a frustrating experience who rely on assistive technology. So, that’s something that I can fix.

I passed 11 audits, so those things look good. There were nine of them that I failed or need to have improvement, and then there’s 15 different ones that aren’t applicable because those items aren’t on the page. And then, keep scrolling down, there’s Best Practices. Do not use passive listeners to improve scrolling performances, links to cross-origin destinations are unsafe, a few things there could be worked on. And then, it looks like in my SEO settings that my document does not have a meta description, and image elements do not have alt attributes. So, those are a couple things that I could work on. I passed nine of the audits when it comes to SEO.

So, that Lighthouse tool, like I said, built right into Google Chrome, does a tremendous job of highlighting some of the things, and you can see there’s nine things on my home page that need to be fixed to make my site more accessible.

And then, the other tool out there is something called WAVE. This is one that, after looking at it, looks really pretty crazy. You put your website URL in, and then you go ahead and you run it, and now all of a sudden there’s all kinds of extra icons on my website. These websites are – I’m trying to figure out how to actually use the tag. It shows that I have 25 errors on the site. Eight times I’m missing alternative text, which we already talked about, three times linked images are missing alternative text, one form is missing a label, we’ve got nine multiple form labels, we’ve got empty buttons, we’ve got some low-contrast areas – I guess it shows you visually where those things are. It looks like the white text on the orange is very low contrast, so those are some things that I could fix.

Let’s see here, there’s different alerts. This is actually a really cool tool. It really highlights some of the different things. It shows the different – the structural elements, so H1 tags, H2, H3, H4, what our lists are so I can see those. Wow, this is an incredible tool to help you understand what different elements are gonna be triggered when it comes to screen readers. This is something that I would recommend checking out, and there’s a link in the show notes, but it looks like the URL is wave.webaim.org. And so, it shows you all of these things. You can click on individual things and it takes you to the different areas. I’m not sure if you can see – it shows you the structure of your site, how the navigation’s gonna work, how it’s gonna read from top to bottom. So, if your footer is appearing at the top or your navigation is appearing in weird spots, that would be something that you could work on and fix.

It shows you the summaries. I’ve got 25 errors, I’ve got 14 contrast errors, 15 alerts, 21 features, 31 structural elements, and 141 ARIA, which I’m not exactly sure what that stands for. But this tool is clearly showing me that I have a lot to do, and a lot to fix, and a lot of things to improve on. So, that is one of the tools that would be definitely, definitely helpful when looking at getting your site ADA compliant.

And then, the last tool out there is one that is for Contrast Ratio. You can go ahead and you can put what your background color is, and then you can put your text, and you can use – it looks like you can use regular text. You can call the color white, or black, or orange, or blue, or you can use HEX colors, or you can use the RGB colors, then it gives you a score of the different contrasts between the two. So, that is a cool tool. It’s called contrast-ratio.com. You can spend some time there. What I should do from this report, it ‘s saying that I’ve got some contrast issues. I should go in and say, “Okay, I’ve got this orange color with white,” and then see what the contrast ratio is, what that percentage is, and how to fix it. I can do that all from right there on the contrast ratio page. Maybe I should make the text color just a little bit different so I can keep my beautiful orange color.

All right, so those are the three tools, and those will all be linked in the show notes for Episode #481. And then, a few other points to make your website more accessible. It’s actually easier than you think. The first one is to be mindful of your choice of graphics and images. Images do a great job of visually telling a story and getting your site more traffic, but when it comes to accessibility, not all images and graphics are created equal. Keep it simple, avoid flashing images and complicated plugins, remember to use clear text for captions and all images for users who rely on text reading software. Mind your fonts. For a casual web user, a font choice primarily comes down to a matter of aesthetics and style, but keep it easy. Make sure there’s always a fallback, and there’s always a good choice that makes it readable. Georgia, Open Sans, Quicksand – those are three recommendations that are really good, very standard fonts that are easy to read.

Number three is, you want to provide clear instructions. Everyone has dealt with frustration that comes with a popup or window that’s impossible to close. It makes it almost impossible to use a website when you’re using a different method than a mouse and a keyboard. So, just make sure that you’re doing that well. Make sure that the navigation is intuitive, it’s easy to navigate, it clearly identifies page elements, breaking up large blocks of text, making it easy for users to move around the site to find what they’re looking for. Make sure you use standard HTML tags. That’s pretty simple. If your site’s using WordPress you’re most likely covered, but just make sure that you’re not using anything obscure.

And the last one is keyboard navigation. A general rule of thumb is, when it comes to good UX design, that is a simple, easy-to-navigate website with a clear and intuitive layout is the way to go. But if your site offers content like videos with autoplay and slide-through presentations, make sure to include features that allow you to navigate through with keyboard only to pause, to slow down any video content, to autoplay content, stuff like that.

So, that’s the suggestions there for Susan, and it’s a great question. It’s one that we should explore a lot more often and spend a lot more time just making our websites more accessible. Because as we make them more accessible, they’re gonna be easier to use on mobile and on computers. And ultimately, if your site’s easier to use, more people can use it, and the more people can purchase, or read your content, or sign up for your newsletter, or whatever you’re looking to do. That’s a benefit for making it much easier to use.

Those are the things that I wanted to share with you today. It looks like I’ve got a lot of work in the next couple weeks to get Your Website Engineer up to speed, and then some of the other sites that I’m working on, but that’s a good problem to have, a good project to work on and try to resolve some of those issues. That’s what I wanted to share with you this week. Take care and we’ll talk again soon. Bye-bye.