This is part of my Makin' Bacon podcast, you can check out all the episodes or subscribe on your favorite podcast player.
I recently interviewed Andrew Wilder from Nerd Press on the Makin' Bacon Podcast and I wanted to highlight this part of the discussion because I think it's extra valuable.
In this part of the interview, Andrew Wilder and I talk about how accessibility affects bloggers, why it's important and what you can do to ensure you are compliant.
Below is the snippet from the interview, as well as a transcription of the feature.
Jason Logsdon: I wanted to jump into one of the big things right now people are talking about, which is website accessibility. It's a hot topic these days and I feel like today, it definitely means something different than when I got started programming, you know, like last century. What exactly does website accessibility mean these days? Why do bloggers need to care about it?
Andrew Wilder: Website accessibility basically just means making sure your website is usable for everybody. So a lot of people think about website usability, which just means making your site easy to use. So you can navigate it easily. You can find the content or information you're looking for, you know, so somebody can find the recipe.
So accessibility is just that extra step of saying, everybody can use that regardless of any disability that they might have. So, one of the tricks I think, and I fell into this trap when I started learning about this, is when we think about disabilities in this context, we tend to think about the very severe versions of that. Someone is completely blind, for example, or, you know, they've, they've lost a limb, so they can't use a mouse. Like, like big disabilities that, that are, or I'll say significant disabilities, right?
But disabilities actually run on a spectrum and, you know, that's one end of the scale. Then somewhere in the middle, it might be someone who's in their forties, like me, who is finding that, Hey, font contrast actually like low contrast makes things a little harder to read, even though I've got good eyesight. You know, it's not, I don't think of it as a disability in my life. But a light gray font on a white background is really hard for me to read. And 15 years ago, I might've been able to read it just fine.
Jason: There's some, there's some site now that I read that I just do like a control A to select all the text so that way it like offsets the color and I can read the site better. I'm like, I'm getting old. I don't want to admit it, but this makes it a lot easier.
Andrew: Right! I have a little plugin that lets me override CSS on sites. And if it's a site and visiting a lot, I'll actually add a little bit of CSS to make the font black every time I visit that site.
Jason: What's the name of the plugin you use?
Andrew: Oh yeah, it called Stylebot. It's a Chrome app.
So you can basically just add some, a little bit of extra CSS file and override, whatever. And when you visited the site, he just remembers that and applies it. So the idea with accessibility is that basically on a long enough timeline, we're all going to be disabled to some degree. As we get older, our ability to understand new interfaces is reduced by about 1% a year.
So, what we want to do with accessibility is make our site usable for everyone. There's a couple of really good reasons to do this. Ethically it's the right thing to do. That's where most people think of it as like, Oh yeah, it's the right thing to do. Okay, I'll do it when I have time. But it expands your audience. So you get more people using your site so it's good for your business. And now there's a lot of lawsuits happening. And, there's been some very high-profile ones in the food blogging space. And so the lawsuits are what's kind of lighting a fire, right?
There was also a lawsuit with Domino's Pizza that went to the Supreme court was actually over their app. but they lost. And so basically there's the Americans with Disabilities Act, which was created long before the internet existed. but the courts are interpreting them that, to, apply to websites because they treat websites as a public entity.
So if a restaurant has to have a ramp, a wheelchair ramp or a handrail on the stairs for accessibility, a website needs to be accessible and compliant as well. The government does not have its own guidelines. It's not like the ADA has a list of things you have to do.
There's a set of standards called the Web Content Accessibility Guidelines (WCAG) which is put out by an independent body, World Wide Web Consortium (W3C). The WCAG 2.1 is the current version. And within that, there are three levels of compliance, A, AA, AAA. AA is the accepted standard. So if you are 2.1 AA compliant, your site will be considered accessible from a legal ADA perspective as well.
This is a huge body, you know, it's a huge topic, we could go all day on this. But basically, in these guidelines there are various criteria to meet. You know, the site has to be perceivable, it has to be operable, and it has to be understandable.
So, what does operable mean? Somebody has to be able to navigate the website, right? So what if somebody can't use a mouse, they need to be able to navigate with a keyboard. So how can you navigate with the keyboard? The standard on the web is to press the tab key, to be able to tab through links. So everybody can go to your site, do it in an incognito window you're not logged in, and just press the tab key as soon as the page loads. And it should select your header and select the menu options as you keep pressing tab.
A really good site will actually have a menu appear that says skip to navigation or skip to content. Because if somebody is using a screen reader and it's actually narrating what they're doing, having to listen to the navigation menu, every time you go to a new page, it would be really annoying. So if somebody presses tab, skips the content, they jump all that stuff and they actually start hearing the screen reader read the text. You know, people don't have to be blind to use a screen reader. People who have limited vision may find it helpful as well.
Another big one is "alt text". We've done a whole bunch of sessions on alt text. Maybe I'll give you some links to, so we can direct people to that. The alt text is the "alternative text" in your photographs or your images. It basically describes the image for the purpose of the image, depending on how it's used.
So in 2011, Pinterest was using that as the Pinterest description. So everybody put in like the whole Pinterest description with a bunch of hashtags into the alt text. And that's actually a huge accessibility problem because if you're using a screen reader, you're going to listen to that ridiculous Pinterest description, you know, in this case context is ridiculous.
And you know, if you, if you're trying to read through a post or listen through a post, and it says, This is the best chocolate chip cookie recipe, just like my grandmother used to make, hashtag chocolate chip, hashtag best recipe. If that's on every image you're not going to want to be on that site. Right?
Jason: And it's not telling you at all what the image actually is.
Andrew: Right. So for images used inside of blog posts, it's considered an informational image. So what you should do is describe the image as you would to somebody who can't see it.
So if it's a chocolate chip cookie, you can say A plate full of chocolate chip cookies on a blue plate or something I like that. Right? Or a chocolate chip cookie with one bite taken out of it, showing the melted chocolate. Whatever the purpose of the image, that's what you want to convey via the alt text.
We've actually created a little plugin to help with this. I'll give this a quick plug called Alt Text Tools. It's in the WordPress repository, so if you just search for Alt Text Tools, you'll find it. All that does, is it outputs a CSV or an Excel file of every image that's used on your site and what the current alt text is. You can go through really quickly and see which ones need to be fixed. And then we have a link on the same row to edit the post.
if you've got a lot to do the Blog Fixer has a really great service to help with this as well, where it gives you an interface and it pulls up the image. It gives you an AI guess at the image, which is not going to be very good, but it's a start. You could work through your images a lot faster that way and that's a paid service. But it's a really good one that Chris developed.
Jason: Nice. Who is getting sued? You said Domino's was one. Is this something small food bloggers have to start being worried about? Who's doing the suing?
Andrew: So yes. It's something food bloggers have to worry about.
I won't mention names even though I know some of it's public, but any food blog can get sued. The people doing the suing are lawyers. They claim to represent someone who has been injured; there has been damages because they can't use the site. And what's really happening is these lawyers are sending demand letters saying, Hey, my client can't use your site. We'll settle this for $20,000, or whatever the number is. Most are just looking for a quick settlement to get some cash, but this is not all of them.
This is a very common practice right now. It's happening a lot in California and New York, especially. And the problem is: if you were to fight that and take them to court, it's going to cost you a lot more than $20,000 and they know that. So you negotiate the settlement down to $5,000 and then make them go away.
Meanwhile, you just had to write a check for $5,000 and gotten nothing out of it. And that doesn't stop the next lawyer from coming along and doing the exact same thing to you. So the best defense is to make your website accessible.
You don't want to be an easy target. Lawyers and anybody else can use scanning tools to see if there are basic things not available. Like if you're missing alt text; boom, you're an easy target. If your keyboard navigation doesn't work. If your font contrast is too low. If you don't underline links. Some of the big stuff is actually pretty easy to change site wide. If you're not at least doing that, you're a big target right now.
Jason: You said where the overall documentation is available that kind of lays it out. But is there a good checklist that kind of boils down what a blogger needs to do to protect themselves and to make their site more readable for everyone?
I've read a lot of the W3C stuff and it's not always the most humanly readable for, especially for a food blogger.
Andrew: I'm trying to remember. I saw a list on another company's blog post that was pretty good, but it's escaping me which one. So if I can find that we'll get it in the show notes.
Jason: Perfect.
Andrew: The wuhcag.com also has a quick reference, which is a little bit better than, the real guidelines. So that's a good place to start.
Another great tool is the Wave Accessibility Testing Tool (WAVE) at wave.webaim.org. So this is a little tool that will scan a page and flag warnings on the page or errors. An automated tool like this will only catch about 20 or 30% of issues. So be aware that it is not the be all, end all. But it's a great tool for checking things like missing alt text, color, contrast issues, and stuff like that.
So, beyond that, I recommend everybody get a professional site audit. We don't do the auditing, so I don't have any interested in this. We do have a referrals page on our site with some experts. If you go to nerdpress.net/experts, there are some folks that we really like listed there.
And if you did an audit, make sure you're getting one that has a road map to fixing all of this stuff. You don't want somebody to give you an audit that says we found 2,000 errors on your site to hire us. Right?
What you want is someone to say, Hey, we found these errors. Here are the ones to fix that are going to be site wide. Here are the things you need to fix because its content related. Then either you can hire that person, or you can hire somebody else or you can do it yourself, but that way you actually can take the audit and it's useful for you.
Jason: That makes sense. It's always a lot easier to get a list of things that you need to fix, and then you can decide what you want to spend your time working on versus just pay us money and we'll fix the random things we're not going tell you about.
Andrew: And a good audit will prioritize it for you. They'll say, Hey, these are the really important things. Fix those first. Right?
If you want to read some more about this, here are a few helpful links.
How do you approach this? Let me know in the Makin Bacon Facebook Group or the comments below.