Making Your Website Accessible with Amber Hinds

NOTE: Around 4:30, Amber saidSection 508 of the Telecommunications Act. She has relayed to me it should have been Section 508 of the Rehabilitation Act.

SPEAKERS

Amber Hinds, Joe Casabona

Transcript

Sponsor: This episode is brought to you by Outgrow. Are you looking to grow your online business with a tool that’s used by Salesforce, Nike, and Adobe, but also accessible to freelancers and entrepreneurs like us? Outgrow‘s powerful software allows any marketer to build a wide range of personalized engaging tools such as calculators, graters, assessments, and quizzes without any technical or design experience.

These interactive content pieces have been continuously outshining standard marketing techniques with over 38% conversion rates. Outgrow makes it easy for you to engage with your audience, assess their knowledge, recommend specific plans and products while improving your conversion rate. I personally love the vast number of tools they have available.

I’m currently using Outgrow to build a Chabot. I’ve always been genuinely interested in adding one of these to my sites but I’ve never pulled the trigger. Outgrow is helping me do that, and they can help you too. You can sign up for Outgrow at outgrow.co/joe, that’s outgrow.co/joe to get a special 30-day free trial no strings attached. Try Outgrow today to boost your business. Thanks so much to Outgrow for supporting the show.

Joe: Hey, everybody, and welcome to another episode of How I Built It the podcast that asks, How did you build that? It is Episode 204. Our sponsors are Outgrow, Restrict Content Pro, and TextExpander. You’ll hear about them later.

But first, of course, I want to bring in a very special guest. Her name is Amber Hinds. She is the founder and CEO of Equalize Digital. We are going to be talking all about accessibility today. I’m super excited. Amber, how are you?

Amber: I’m doing great. Thanks.

Joe: Thanks for coming on the show. Thanks for reaching out. I’m excited. As I was starting to do outreach for this season, I got an email from you and I thought, “Well, this is going to be perfect” because I am a web developer of 20 plus years at this point. And I’ve had a couple of accessibility-related topics on this show, which is in its fifth year or fourth year maybe, but we’ve never explicitly talked about web accessibility. So I’m really excited you reached out.

Before we get into a whole host of topics, we’re going to touch on it, why don’t you tell us a little bit about who you are and what you do?

Amber: Sure. So as you mentioned, I’m the founder and CEO of Equalize Digital, which is a website accessibility consulting company. We do accessibility audits and remediation and accessible website and application development for largely, I’d say, large enterprises, government agencies, colleges and universities, K12 schools, and some nonprofits.

I actually got into it…our main agency that is a parent company for Equalize called Road Warrior Creative. And we’ve been running that for about five years. We started doing, several years ago, work with Colorado State University and everything we launched for them has to be accessible, it has to meet with WCAG 2.1 AA standards. So we got into that. This year, actually, we did a big shift where we did the rebrand with Equalize and pulled our accessibility work out into its own organization from the marketing agency.

Joe: That’s fantastic. It sounds like you work mostly with large organizations plus some nonprofits. I suspect those are organizations that need to…I mean, every website technically needs to be accessible, right? But these are the organizations that will more likely be targeted if they are not accessible, is that right?

Amber: Well, you know what’s really interesting about that is that I think we work with a lot of larger organizations or government agencies or universities because they know that they have to be accessible. Anything that is federally funded under Section 508 of the Telecommunications Act is required to have an accessible website and meet WCAG standards. But that’s not actually who’s really getting sued. So you asked like, these are the people that are required to be accessible or that might be targeted? But it’s not actually the case because they know they’re supposed to be accessible and they typically do a relatively good job of meeting those standards with anything new that’s launched.

This year, I think there were…Let me look at my notes. There were 3,550 ADA or in California under the Unruh Civil Rights Act lawsuits. So about 10 per business day. And the businesses that were most targeted, almost 78% of them were retail businesses. Ecommerce is huge, especially with COVID and everyone shopping online now.

Then the second biggest is food service. And these aren’t just necessarily like chain restaurants. Certainly, there are chain restaurants that have been targeted or chain eCommerce stores that have received lawsuits, but there’s also mom-and-pop restaurants and one-off eCommerce businesses as well.

Joe: That’s really interesting. Because, as you mentioned, we’re talking about the year 2020, and a lot of retail businesses and foodservice businesses in March, right, because I am based in the US, you’re also based in the US, is that correct?

Amber: Yeah.

Joe: That’s when the lockdowns really started to happen here, and a lot of businesses rushed to get something, anything online. So they probably were already out of their depth. They didn’t know what the best thing they needed was. And then they probably had no idea how to make a website accessible, or what they needed to do to make a website accessible.

Amber: Or they might not have even known that it was a thing.

Joe: Right. Right.

Amber: Unfortunately, a lot of us, we just think, “Well, I use a mouse or I use my phone and I can see how things work.” So online ordering for delivery, or takeout or buying something online to be shipped to my house, I just think about, “Well, this is how I would do it. It works for me. This is great.” And you don’t necessarily always realize there are people that maybe can’t see the screen, people who can’t use their mouse or they…even an older person with arthritis, if your touchpoints on your mobile device are too small, it’s hard for them to get the right tap target.

Joe: That’s absolutely right. I would think…and after this, we’ll get into defining everything that we just talked about. First of all, I haven’t done the research on this, but I would imagine that many online retailers look to something like Shopify to get their website online, or I’m sure there’s a similar niche product for online restaurants. I would expect them to enable their websites to be accessible. Maybe that’s a misconception on my part? Or maybe it’s a moving target, so it’s hard.

Amber: I mean, I think the thing that’s interesting about accessibility is a lot of it has to do a theme. So Shopify just like WordPress, you choose a theme. And Shopify, you don’t just have to choose a theme that’s in their theme directory, you can also have someone custom develop it. Again, if they went to a local developer, and said, “Build me a Shopify site,” or a designer who’s like a Shopify power user, just like there are WooCommerce power users that build sites for people, if they don’t know that, they could have not chosen a theme or they could have built a theme that didn’t have accessibility in sort of the theme functionality. But then there’s this other piece of accessibility, which is how you enter the content into your website.

We work with blind and visually impaired people. We hire them to test websites for us. One of them actually had a really great example that he shared with a client about image alt tags, for example. He was talking about how he went on a website to order a pizza—we won’t describe what it is—and he’s using a screen reader, he is completely blind. He got to where he could set all the things and then the toppings were images. And there wasn’t an alt tag to describe, “Well, this one is pepperoni. This one is onions. This one’s green peppers,” whatever that might be.

So he’s like, “I can either order a cheese pizza or I could pick random toppings and be surprised.” But no, he’s like, “I had to stop because I literally could not order that product online.” And that’s not necessarily something that’s in the code. That’s probably something that a content manager or a marketing manager or someone who doesn’t touch code at all entered in and forgot to fill in the Alt text box.

Joe: That’s really interesting. Because that’s also something that’s easy for…I mean, it’s easy for me to forget. I’m just kind of dropping images in my blog post and maybe the images aren’t integral to the content. They’re just there as an additional sidebar or whatever.

Amber: A supplement.

Joe: Yeah, right, a supplement. Sometimes I’ll forget as well. I try to be mindful, but if I’m doing something fast, obviously, it might not be on my checklist. We will circle back to this because I do want to know, do all images need Alt tags, or the important ones, or what’s a good way to write an Alt tag? Because just image of me is probably not a good one, but man with a beard and hat is a lot better or whatever.

But first, we’ve thrown around a few terms that I think probably need to be defined. You mentioned with WCAG. I will say it your way. I was always saying to W-CAG. But what WCAG is probably more right because you’re pronouncing all the letters instead of singling one out whatever.

Amber: I know. I do it both ways. It’s more comfortable for me that way. Somebody else is going to listen to this podcast and say, “Oh, my gosh, this is horrible. Why is she pronouncing it like that?”

Joe: Well, if there is somebody who knows the official pronunciation, you can let me know over at streamlined.fm. So, you mentioned WCAG and then you mentioned that all of these websites that you’re working with primarily need to be 2.1 AA, a rating of that. So what is WCAG? And what are the ratings? Just like a high-level overview?

Amber: Sure. WCAG stands for Web Content Accessibility Guidelines. They are internationally agreed-upon standards that are developed by committee and volunteers. Anyone can volunteer and contribute to them. There have been different versions. So 2.1 was released a couple of years ago. Actually, I should clarify, a lot of our clients, we do 2.1 because that is the current standard. But if you’re a government agency, section 508 specifies 2.0. So anything that is a further version is also backwards. So it covers all of that. So 2.1 is better than 2.0, but legally, they’re only required to meet 2.0.

Joe: Got you.

Amber: 2.2 was supposed to come out in November but because of COVID, some things that got delayed. It’s expected about mid-year next year. Then a major version change to the guidelines is 3.0, which has sort of a code name of silver. So sort of like in WordPress we name WordPress versions after jazz singers. There’s a code name for Web Content Accessibility Guideline versions. 3.0 is, I believe, expected in 2022.

If you listen to or you go on YouTube, you can see the WordPress Accessibility Day talks. I moderated a talk with Sheri Byrne-Haber, who is on the silver committee. And she talked a lot about what is coming in that. It’s a really excellent talk for anybody who wants to be forward-looking. So there’s different versions that are basically released sets of guidelines.

Within those versions, there are what’s called success criteria. So they are numbered items that a website can be tested against in order to determine if it is accessible. These success criteria have three different levels. A is the absolute most basic, which is something like if it’s a pre-recorded video, it should have captions so that someone who can’t hear the video can understand what’s being said. And then AA is sort of the middle and AAA is the highest and most accessible. It can be very challenging to make an entire website AAA compliant. Most people consider AA the standard. And then there might be certain situations when you try to meet the AAA guidelines.

Joe: Got you. Got you. So, A is the most basic. You actually mentioned captions in video, which makes me think about what kind of added expense making a website accessible. Now, people will look at that as “this is a cost I don’t need.” But I would argue that it’s definitely a cost you do need. My podcast has had transcripts since season three. It’s certainly an added cost, but there have been…first of all, it makes my podcast accessible for people who can’t listen. But there have also been benefits to it. My website ranks higher, the content is more searchable, I definitely saw an increase in traffic after my transcripts got added to the website.

Amber: That’s something on NPR. They actually did a scientific study on that a couple years ago with a couple of their podcasts where they were testing whether they should have full transcripts or just the little blurb summary. And they determined that it significantly helped. Just like you were saying, their search engine ranking, time on site engagement. Like people were now going to multiple pages, whereas they would just go to one episode and bounce.

So it has a lot of benefits besides making it available to people who can’t hear. It could also help people in situations where maybe they are a hearing person, but they’re laying in bed trying to pat their kid to sleep right but they want to look at something on their phone or they’re sitting on a train and they forgot their headset, and they don’t want to bother everybody but they still want to engage with the content.

Sponsor: This episode is brought to you by Restrict Content Pro. If you need a fast, easy way to set up a membership site for yourself or your clients, look no further than the Restrict Content Pro WordPress plugin. Easily create premium content for members using your favorite payment gateway, manage members, send member-only emails, and more. You can create any number of subscription packages, including free trials and even free tiers.

But that’s not all, their extensive add-ons library allows you to do even more, like drip out content, connect with any number of CRMs and newsletter tools, including my favorite ConvertKit, and you can integrate with other WordPress plugins like bbPress. When the Creator Crew comes out later this month, you can bet it’s going to be using Restrict Content Pro. I’m a big fan of the team, I’m a big fan of the tool, and I know they do fantastic work over there.

If you want to learn more about Restrict Content Pro and start making money with your own membership site today, head on over to streamlined.fm/rcp, that’s streamlined.fm/rcp to learn more and get a special offer for listeners only. Thanks so much to Restrict Content Pro for supporting the show.

Joe: I’ve been in many situations where I’m looking for something to do… Actually, just yesterday as we record this, I was looking for the best way to oven-bake bacon because I didn’t want to get my skillet out. And I asked my Amazon Echo Show, “Hey, what’s the temperature” or whatever. And they’re like, “Here’s a video. And I’m like, “I don’t want a video. I want a single sentence that tells me what to preheat the oven to.”

Amber: You don’t have to watch 15 minutes.

Joe: But there will be an additional cost for making a website accessible. How can people prepare for that in their budgets as web developers? A lot of people who listen are web developers and small business owners. How can they integrate that into proposals and things like that?

Amber: Sure. I think there’s two ways to approach that which is from the agency or the developer perspective. For us, before we pulled it out and created Equalize Digital, and we were just proposing projects under Road Warrior Creative, we typically had accessibility as an option unless we knew that the client…like we had already discussed it when they came to us. But we were like, “This is an option we’re putting on every proposal.”

I mean our codebase, our starter theme, we use custom themes, it’s all accessible. But what we have found from an agency perspective is that there are sometimes more things if you have custom functionality, if you’re embedding like HTML canvas elements, if anyone knows what that is, there are special things that have to happen because those aren’t accessible to someone on a screen reader. It just says graphic, right? So there’s different code things that have to happen. So on that front, we frequently have to account for that in time.

The other thing that we’ve found a lot from an agency perspective is that there’s a lot more training that has to go into it with clients. And when you give them, “here’s our content request. You fill it all in,” then we have to spend time going through it, and saying…some of the common problems that we see, and we have to educate people on, one is ambiguous anchor links. So that’s when you have the text for your link and it doesn’t make sense out of context.

So a really obvious thing for that is like, “Click here.” People link that all the time. And if someone is on a screen reader, they don’t have the context, they just start going through links, they’re just going to hear, “Click here.” And they won’t know “why would I click here? Where does it go?” But even things like email or website can be ambiguous when it’s on a page, like a directory page where you’re listing out “here’s five different people and an email is the link to them.” You actually need to have something so that a screener would read “email for amber Hinds,” so I would know this is the link to email Amber Hinds.

So there’s a lot of those kinds of things where we have to go through their content that they provided us with and either have conversations with them about it or just make the change by adding screen reader text or whatever that might be on the development end.

Then I feel like another thing is heading level. We noticed a lot if people are coming to us with an existing website that needs work, you know, we need to do some training about. You can’t just pick the heading level because you like the way it looks. They actually make sense in a numerical order. And there’s a reason for that. So I feel like from an agency perspective, you sort of have to figure out what are the top problems that you’re seeing are the top things and then account for that time.

And we on every project would put it as an option. Because as much as we want every website to be 100% accessible…it’s just like, as much as I’d love to write all the content for every website because I think it would make it really awesome, sometimes clients don’t have the budget for that or they really just want to do their own content. And it may not be what you would do, but…so I think there’s that.

From a website receiver perspective, I think that you can’t afford to not make your website accessible. At least currently with current laws, it’s sort of a roll of the dice. You have no idea if you’re going to get sued or not. Certainly, the more high profile your website is, you know, if you run, let’s say, Google AdWords or paid social media ads, and you are driving traffic there, certainly that increases your likelihood more visibility than if you’re just, “I have a small brochure website that’s four pages, I don’t really send people there and my traffic is like 100 people a month.” The likelihood of getting sued is a lot lower. So that’s something that a business owner has to weigh.

But if you think about if your attorney bills you $250 an hour and you get a lawsuit, just responding to that is going to cost you thousands of dollars. And I’ve seen some reports where they’re saying that most of the time you have to settle because that’s just what you do. And just settling could cost you $300,000. Now, all of a sudden, you’re thinking, “Boy, putting an extra five into my website at the time that I build it is probably worth it.”

Joe: It’s very similar to making your website secure, right? I’ve had clients who I’ve tried to say, “Hey, we should spend a little extra money shoring up the security of your website so you don’t get hacked.” And then they get hacked and then they spend four or five times that doing the recovery and then shoring up their website. I think that’s so interesting.

Now, you mentioned that there’s no way of knowing if you’ll get sued. I’m wondering because I read this earlier in the year, but I don’t want to use scare tactics or say like this could happen, but I did read about a gentleman who is suing random businesses that he went to…websites. And there was really nothing that those businesses could do about it because the legal argument was sound. It’s not like you can’t sue because you’re not a customer. If you visit the website and is not accessible, you’re liable for a lawsuit. Right?

Amber: Actually, the other thing to be aware of is that you won’t necessarily get sued in the state where your business is based. So if you are an eCommerce business especially, if you mail products to people in California or New York, which are the top states for lawsuits, you can be sued in New York or California. So 70% of all cases are brought by 10 plaintiffs law firms. So there are law firms that specialize in this kind of lawsuit. There are definitely plaintiffs who sue lots of websites. They call them kind of drive-by ADA lawsuits, where they’re just finding every website that they can find.

Word of caution. Some of those plugins that are out there, and I won’t name any, but they’re overlays that say, “Add a line of JavaScript to your website, and we’ll make it accessible,” they can be scanned for. And there are actually a number of lawsuits that the website is using that plugin, and it is failing to make it accessible. Multiple of those plugins, so it’s not just one.

Joe: Wow.

Amber: And they’re still getting sued. So there is that which is that it’s not great. There is actually a bill right now that has been proposed in the house, which will stop someone’s ability to just sue a business without even contacting them first.

Joe: Because that was going to be my next question. Like if there’s a copyright infringement, you’ll usually get a cease and desist first. But there’s nothing like that right now for ADA lawsuits.

Amber: There is not. There’s no guidelines under the ADA about what accessible means. So people assume that it means following Web Content Accessibility Guidelines (WCAG). But there’s no real proof to that or specific judicial guidelines saying that this is what it is. There is a case against Domino’s that was pretty high profile that went to the Supreme Court last year. The Supreme Court declined to hear it. They basically said that the lower court’s decision stood, which was against Domino’s. So that was considered a win for accessibility rights advocates.

It’s hard because there are people that are obviously abusing this to make money. But there are also some very legitimate cases where someone really couldn’t do what they wanted. And if the lawsuit hadn’t happened, progress would not have been made.

Joe: Right. Like you said, the lawsuit might be required to…ADA is a short for American Disability Act, right?

Amber: Americans with Disabilities Act.

Joe: Americans with Disabilities Act. So laws are really defined in the courts as many lawyers I listened to on podcast say. A law is meaningless unless a court decides on it, basically. So we need these lawsuits essentially to define how they’re going to play out, and then how we as web developers need to act accordingly.

Amber: Mm hmm.

Joe: Cool. I should state that at this point, I’m not a lawyer. Amber, are you a lawyer?

Amber: I am not a lawyer. And whenever I do webinars, that is the first thing I say.

Joe: So we’re just kind of spitballing here. We talked about the scary part. I have an irrational fear of getting sued. So we talked about the scary part. But let’s talk about the proactive things that we can do to make websites accessible. We’ve kind of talked about the importance. We’ve just defined WCAG and the three ratings. I would say, aim for AA if you can, but at the very least do single A. At the core, a good semantic HTML helps a lot with accessibility. Is that an accurate statement?

Amber: Yes.

Joe: Great. So if you are a general website developer, if you’re a WordPress theme developer, using proper HTML markup, using CSS when you’re supposed to use CSS. If you’re using Java scripts to change the content, probably there’s a better way to do that, or there’s a way to make that accessible. Make sure you’re doing those things I would say at the very least, right?

Amber: Yeah. And don’t add text with CSS. Before and after elements should not add text to the website, those kinds of things.

Joe: That’s super interesting. I would always use that to append author to…like, if I commented on one of my blog posts.

Amber: That means that somebody on a screen reader might not know that you are the author commenting on your blog post.

Joe: Right. That’s super interesting. That doesn’t show up in the screen reader.

Amber: You have to assume that somebody could be looking at the website with no styles.

Joe: Yeah, right. Wow, that’s a great point. So before and after, you should use for like flourishes. Maybe like a …

Amber: Maybe high fonts or decorative things. Nothing that adds important information. I think if you are a theme developer, though, codecs, which I don’t think it’s called Codex anymore. This will show how old I am.

Joe: Half of is still the Codex, half of it is at developer.wordpress.

Amber: So there is a lot of information about if you wanted to build an accessibility-ready theme, which is what we call them. Because, as I mentioned before, a lot of it has to do with how content is entered. So you can never say your theme is accessible. But there are some good guidelines there for developers on what’s considered the minimum in order for a theme to be considered accessibility-ready.

There’s things like adding quick links if somebody hits the tab key, which allows them to skip the navigation and go to the content or jump to the footer, or jump back up to the navigation pretty quickly. It explains how to do those sorts of things. So that would be a great place to start I think if you’re a developer and you’re not sure.

Another big thing to be aware of is color contrast. And this applies a lot to designers. There are tons of free color contrast checkers out there. WAVE has a one that’s really popular. Basically, the color in your foreground, if you have text, has to have a certain luminance ratio to whatever the background color is to make it readable for people with low vision. Again, remember, this applies to a lot of us as we age. So you might think, “Well, how many people are low vision?” But if you start to think about older populations, it’s a lot of people. So you really have to think about what the contrast is between any text and the background. That it’s on whether it’s over an image, or it’s just over a solid color, or a gradient.

Joe: Yeah. If we’re talking specifically about WordPress here, Gutenberg/the Block Editor has added that into their blocks, which I think is really nice.

Amber: It warns you.

Joe: Yes, it does. That’s been helpful for me. I feel like, usually I can eyeball it, but sometimes I can’t. I will link to a few of the resources you mentioned. In my HTML and CSS: Visual QuickStart Guide book, I have a whole chapter dedicated to accessibility. So I got to try out some of the color contrast stuff. I found a plugin that would essentially recreate your website for people with certain different color blindness, which I thought was very eye-opening to me. Also, I thought it was pretty interesting that they could do that. I took a photo of my daughter and I adjusted it. So that picture is in the book. My daughter is in my book, which is cool. There’s a lot of really good resources there to help.

Amber: Can I say something about those kinds of plugins?

Joe: Yes, yes.

Amber: There’s probably like maybe 15 plus plugins on Dot Org directory now that are different types of overlays. I think there are a lot less likely what we talked about where they can be scanned for, like some of the mass-market ones that can be used on any website. But the one thing to keep in mind, while those tools…the ones that are just like it allows people to make text bigger, or it can change it, so it’s reverse, so it’s dark rather than a light background, or it can make it all black and white, or whatever that might be, those are, I think, less problematic than something that says, “Oh, I’m going to add alt text for you because how can I really do a good job of that? But that said, a lot of those tools I think made people think that they’re making their website accessible and then they’re not. So I’m like, “Wary of that.”

Joe: I should state here that I mean this was all for testing. This is like a Chrome extension, not a WordPress plugin. But I think your disclaimer is super important. Because I could see somebody listening to this and then saying, “Colorblind plugin for WordPress.”

Amber: I think the other thing that maybe people don’t think about [unintelligible 00:35:10] they’re like, “Well, we need one of these. We need something for people that make their screen bigger or whatever this might be. But the thing is, is most people who need that functionality, they have software on their computer that does that for them. So they don’t really need your website to do that for them. In fact, some of the time, those plugins can conflict with the software that they use, and they already know how to use. And then they have to learn something new just to get around your website, which as you can imagine, depending upon their patience level, might mean you’ve just lost a customer or whatever that might be. So, I always kind of err on the side of don’t use those tools.

Joe: Yeah, for sure. Sorry. The one that I was talking about specifically was Colorblindly, which is a Chrome extension that I was using to change the color for my website. And then I’m like, “Oh, this looks terrible for people who are, say, Red-Green colorblind. I should adjust this.”

Amber: So that allowed you to see whether the colors on your website were causing problems for people?

Joe: Yes, exactly. Which brings us into the next topic, which is testing. You mentioned in the pre-show or maybe in our pre-recording conversation that there are a couple of ways to do testing, both manual and automated. Why don’t we start with manual and then we’ll talk about a very special tool that you have that can help?

Amber: Yes. So it is important to know that only about 30% or 40% of accessibility problems can be found with an automated test. So you do have to manually test your website. And what that looks like is doing a number of things. The first one is very basic, which hopefully we all do when we launch website, which is look at it in multiple browsers on multiple screen sizes. So test it on different phones, different tablets, different PCs or Macs, and different browsers.

And then within that, then the first thing we do is we do keyboard navigation only. So assume you don’t have a mouse and use the tab and the arrow keys to move through the website. You want to make sure that you have a clear focus indicator, so every time you hit tab, it is very obvious to you where you are. Are you around a navigation item? Are you around a link? Are you in a field for a form, whatever that might be? You want to try to trigger every button or link with your keyboard only? Can you move sliders? Can you play and pause videos? Can you submit a form, add a product to cart, whatever that might be without using a mouse? So that’s the first thing you want to do.

And then once you’ve done the keyboard navigation, you want to test with a screen reader. If you have Mac’s, you can use voiceover. It’s built into Macs, and it’s there and available and free. If you have a PC, there’s a couple of different options. I like NVDA, which is an open source one. So it’s free. Anyone can download it. JAWS is a really popular one, which we do testing with, but it’s somewhat expensive. So if you’re just using it for testing, you probably don’t need to.

I do recommend testing with multiple screen readers because they don’t all say the same things, which you might be surprised. That was surprising to me at first. I encountered the same element, and two different screen readers said two different things. So we recommend testing with at least two and testing on Windows and a Mac. That’s basically the same thing. You move through the website with your keyboard only with the screen reader turned on, and you listen to what the screen reader says and think, “is this confusing?”

There’s different keyboard shortcuts in screen readers. Like you can navigate by headings. So in NVDA, if you press the two key, it’ll read out all the heading twos. And then you could jump to one of them, which is a way that people write. A sighted person can skim and find the information they want easily. But someone who is blind or has a strong visual impairment can’t do that. And so this is how they skim content, which is why the heading levels matter.

So if you skip your heading two, and you’ve just have heading one and heading three, they hit two, they’ll think there’s no headings on the page. And they won’t bother to hit the three key and they’ll think there’s no way I can skim this page. So you want to test all of those things as well with a screen reader just to make sure the functionality works.

Joe: That’s really interesting. Now, as you were speaking, I was doing some of the things on my personal website. Again, when I wrote my book, I did all of this because I needed screenshots, there are videos that accompany the book. So I ran it through, but I recently changed themes. And just going to my website in Safari and hitting tab brought me to the three form fields on the website, and then back to the address bar.

Amber: Oh, yeah, because you have a tab index set on your form. So it forces it to the front even though the form is probably at the bottom of your page?

Joe: That’s exactly right. So that’s really interesting. This is maybe something that we could discuss in the members-only section of the show. But I was a little alarmed to see that because I’m using a reputable theme development shop. And if I’m just testing and hitting tab, that failed. And maybe that’s something that I need to work on.

Amber: And that’s what’s interesting, right? Because that sort of thing is probably come from whatever form plugin that you’re using. There’s an option where you can set a tab index on that form when you embed it in the page. And you did it. I don’t know why you did it, or you might not have even known if you showed or not, so you did. I know people do that too. But what happens is maybe you have a theme that has the skip to content links, and it’s perfectly set up. But now some setting in some plugin has caused a problem, which is overriding the great theme you have. Right?

Joe: Yeah.

Amber: So that’s where it’s a little challenging. I think there’s a whole nother piece, which we won’t even get into, but if you are linking PDF documents, or Word documents, or any of those things on your website, they also have to be accessible. So any content that you share with someone, if you have a PDF download, you have to make sure that that can be accessed also. And it kind of follows similar guidelines as a website as far as having headings and things like that.

Joe: That’s really interesting. Again, that’s not something I would have thought of at all. Well, I mean, I’m going to stop looking at the code on my website right now because it’s very distracting.

Amber: You’re going to leave with homework.

Joe: Yeah, absolutely.

Amber: Fix your tab index. The first thing when you’re doing keyboard navigation and you hit tab, the first thing you should see is “skip links.” With the one exception of sometimes, and we’ve done this for some clients, the first thing when you hit tab is a link to visit the accessibility help page where it has their accessibility statement. And then it goes to skip links. But it’s like a hidden link that pops up when you hit tab.

Joe: Interesting.

Amber: But generally, that’s the first thing you want to do because you want to allow people to bypass the navigation and get to the content quickly, especially if you have very large navigation websites for government agencies that have like, I don’t know, 60 things and dropdowns. Can you imagine if you had to go through every single one of those items on every page just to get to the text of the page.

Sponsor: This episode is brought to you by TextExpander. It’s a new year and you can start off on the right foot by reclaiming your time. With TextExpander, you can save time by converting any text you type into keyboard shortcuts called snippets. Say goodbye to repetitive text entry, spelling and message errors, and trying to remember the right thing to say. With TextExpander, you can say the right thing in just a few keystrokes. Better than copy and paste better than scripts and templates, TextExpander snippets allow you to maximize your time by getting rid of the repetitive things you type while still customizing and personalizing your messages. TextExpander can be used in any platform, any app, anywhere you type. Take back your time and increase your productivity in the new year.

Let me just say that snippets is not all it does. With advanced snippets, you can create fill-ins, pop up fields, and much more. You can even use JavaScript or AppleScript. I can type out full instructions for my podcast editor, Hi, Joel, in just a few keystrokes. Another one of my favorite and most used snippets is PPT. This will take whatever text I have on my keyboard and convert it to plain text so I’m no longer fighting formatting. Plus, if you have employees or contractors, you can use TextExpander to manage and share snippets with them so you all get it right every time. I’ve recently started sharing TextExpander snippets with my virtual assistant.

This year, How I Built It is focusing on being productive while working from home. TextExpander is the perfect tool for that. Plus, they’re providing resources and blog posts to help you make the most of their tool and be productive. TextExpander is available on Mac OS, Windows, Chrome, iPhone, and iPad. If you’ve been curious about trying TextExpander or simple automation in general, now is the time. Listeners can get 20% off their first year. Just visit textexpander.com/podcast and let them know that I sent to you.

Joe: Okay. So you’ve given us a few ways where we can manually test, which as we just demonstrated in real-time is important. Because again, I made an assumption because I used a reputable theme developer and I’m using only native stuff. It’s like the Gutenberg editor and whatever. But that’s why it’s important to test. Now, you also have a tool that helps you with automated testing. Is that right?

Amber: Yes. We just launched at the beginning of December, a plugin called Accessibility Checker. There’s a free version in wordpress.org, and then we have a pro version. The goal of this plugin is to test for accessibility problems on websites. We actually launched it because we would build these websites for our clients, we would train them on how to be accessible, I would hand them a PDF checklist, like, “Every time you write a blog post, or edit content on the page, make sure all these things are true.”

Unfortunately, I would very rapidly see their websites stop being accessible because of content entry problems. And I kept saying, “We need something right on the post or page edit screen that tells them as they are adding their content or editing the content that’s already there, ‘hey, there’s a problem here you want to look at.'” So this year with COVID, we had a little slowdown and I said, “You know what we’re going to do with our slow down? We’re going to build our solution to keeping websites accessible.

Joe: That’s fantastic. Again, I have the pro version of Accessibility Checker. So you can look for a video on my YouTube channel around the same time this episode comes out, where you can see how it works. And I’ll link to all of that in the show notes over at streamlined.fm/204 as well.

Now, you mentioned that only 30 to 40% of accessibility issues can be tracked with automated testing. But it sounds like this is really about testing and then guiding the user to making sure their content input is correct.

Amber: Yeah. The goal with it is yes to help them with any does test more than content. So it tests the full page. So you’re going to find things that are related to coding potentially that have to be fixed by a developer if you’re not a developer. But it will also flag content things. In our pro version, we are about to release a version that does a full site scan. So you don’t just have to go into a post or a page to see the audit. And that is really great. If you’re installing it on a website that has 500 posts or more, you can really quick, at a glance, find things that are obvious fixes, like missing alt tags, or headings out of order or ambiguous anchor links. All kinds of different things like that.

So automated scanning, even though it can’t find everything, because it’s not a human being and it can’t know how to screen or to read this and does it make sense, it is a very important part of testing because it can help speed up and solve some of the more obvious problems. I mean, the missing alt on images is what is the things that is almost always cited in lawsuits when they describe why is this website being sued. And I’m just like it’s almost the easiest thing because any CMS, WordPress, Shopify, any of them they have a little field where you can write what the alt is. But if you haven’t been doing that, it’s hard to know.

I’ve got all these posts, I have to go back and click on every image to see if there’s an alt there. So that’s why an automated tool is great because they can just tell you, “Oh, here’s the 30 posts and the specific image on those 30 posts that are missing the alt tag.”

Joe: Absolutely. That brings us back to something that we touched on earlier in this episode, which is, do all images need alt tags? What makes a good alt tag? Let’s start with the first question. Do all images need alt tags?

Amber: No.

Joe: Okay.

Amber: Images that are purely decorative and provide zero added information to the content or supplementary information do not need Alt tags. Actually, I should say they need to have the alt equals, and then it should have empty quotes. So it can’t not have the alt tag. If it is missing an Alt tag, then that is a problem because it will then announce it as an image. But it’ll just say “image.” And then sometimes it’ll read out the file name, which if you can imagine, could not be useful.

Joe: Mine always screenshot and then update.

Amber: Yeah. Or some really long string of numbers. It needs to have an alt tag. But if it is purely decorative, then the alt tag should be empty. In that case, the screen reader ignores it and doesn’t even announce that there’s an image there.

Joe: Got you.

Amber: I think there’s a little bit of discussion about what is purely decorative. Is a featured image for a blog post decorative? Is it not? There’s a little bit of discussion there. But I think the idea is, is if you chose that image because you think it provides something complementary to the content on the page, then it’s not decorative. You also don’t want your alt tag to be repetitive. So we see this sometimes on Team bio pages where they have brought the picture of the person and it says, “Joe Smith,” and then and then it has their name right below.

There’s a lot of discussions. Should we have that? Would be empty, because it doesn’t matter. But then there’s also like you described before. Like, should it say, “Joe, man with beard.” And there is some point to that it’s hard…if you’re doing it for a whole team, there’s a whole things like do you want gender people? Do you want to like…? But if you can allow people to describe themselves, sometimes that is important information. Because if someone were to be meeting with that person, and they were going to bring someone along with them to help them find that person, then they know, just like a sighted person would know, if I went and looked at a bio page for this person I’m meeting and I saw their picture, I’d be like, “Oh, that’s a woman with brown hair or has the appearance of a woman?”

If I was a blind person and it read that out to me, I could then share with someone, “Oh, I’m meeting…they have brown, shoulder length hair…” So there’s some discussion there. But generally, you want it to convey what is in the image or what’s happening.

Joe: Got you. So if we’re looking at examples here, if you are saying like, “This graph shows the number of COVID cases over time in the United States,” you would want an alt tag for that. Right?

Amber: Yes. And with that, you would probably have an alt tag which says…this is interesting, too when it’s a graph, or a chart, or a map. You would say something like, “Graph of COVID cases in the United States over time, more information below image.”

Joe: More information below image.

Amber: And then below the image, you would put the table that contains all the data and hopefully a properly formatted table. So that they can then see, you know, here’s the state and here’s the number of cases and by month or whatever that might be because they need that information. So alt tag can also be useful in telling people where to find the information if you have a complex graphic that they’d otherwise be missing out on.

Joe: Now, if we’re talking about…let me tie up this one in first. Recently, I published a blog post about my favorites of 2020. In some cases, it would be like, favorite TV show, Ted Lasso, then I’d have like a screengrab from Ted Lasso. Which is I would say more decorative than not because I just put it there to break up the text. But that sounds like something I probably should describe right? A still from the TV show Ted Lasso with Ted and beard.

Amber: Yeah. I mean, I don’t know if you’d necessarily say “still shot from the TV show.” What you might think about is what is that still shot from the TV show conveying. So I’ve never heard of Ted Lasso.

Joe: Oh, man, it’s an excellent show.

Amber: I also don’t really have TVs. I’m in the dark ages on all that stuff. But if I were looking at this blog post, I might see it and I might know something about the room they’re standing in. Or it might tell me if this is a sci-fi TV show, if this is a TV show set back in olden days, because of the clothes they’re wearing. There’s a lot that’s probably communicated by that still shot. So just saying like “screenshot of Ted Lasso TV show” leaves out people on screen readers who are missing…No, you don’t want to write a book. Right?

Joe: Right. Right.

Amber: But perhaps you want to describe, you know…

Joe: Two soccer coaches standing in the office.

Amber: …something that sets the scene because that would help people on a screen reader know, “Oh, maybe this is a show I want to check out.”

Joe: Interesting. Good to know. I’m glad that I’m using this show to get my own personal consultation. Now, I do want to circle back to the graph, and then we’ll wrap up because we’ve been talking forever. There’s just so much to know. With the graphs specifically, there’s the HTML tag figure and fig caption. Would those be the semantically appropriate things to use for say a graph where I would say like “more information below” or would I even include the data table in the figure tag? Well, this is a little bit in the weeds, but I’m curious about it.

Amber: So with figures or canvas elements, you can put data tables right in there. And that is an appropriate solution. I think it depends on how big your data table is. The other thing to think about is there was some support, there’s not really much anymore for a long description, which is you could put a URL on the image, and then certain screen readers would then read it out and people could go there to find the supportive data. Those sorts of things are where you hide it. Like we’ve seen people be like, “Well, what if we just wrap this on a screen or text so it only reads out the data to someone on a screen reader?” And I tend to advise against that because sighted people can usually benefit from tabular data also.

So, it makes more sense to have it just visible on the page below your graph. If you don’t want the whole transcript visible on the page, there are options to minimize it, but still have it available. We frequently do things like using an accordion as long as it’s properly coded to put content on the page. And you can do the same thing with your data table if you don’t want it.

If you’re worried that it’s going to make the page look too long, or if it messes with the design, you could have it linked. So you could have a link below the graphic that says, you know, “To view the data go here, and it could open a different page or could download a document or maybe a spreadsheet.” Again, if you have a document that you’re downloading, it also must be accessible. So there are ways to do that. But generally, I would say that data for graphs and charts is beneficial to sighted people as well. And so you want to make it visible too.

Joe: That’s really interesting. Because it kind of goes back to the same thing that we said earlier—good semantic HTML goes a long way. If you have good content and the right content, your website’s going to be inherently more accessible. So it’s really just certain things you need to watch out for. Like making sure videos and audio have transcripts or captions. Making sure that you have all tags in the appropriate places. I think that’s really interesting.

Actually, you know, we touched on the benefits of how accessibility can help your business as well, right? Because it makes it more accessible. It allows more people to visit your website and use your website. Maybe you’re not losing customers, because they can’t get the toppings they want on the pizza that they’re trying to order. For those listening, are there resources that you would recommend to help them learn more about accessibility?

Amber: I mean, it’s good to go to the source. If you’re comfortable sort of wading through, I hate to say that, but wading through the success criteria and you go to W3c.org. You can find the Web Content Accessibility Guidelines and all of what those are. They also have really good help articles that explain different aspects of accessibility. And if you’re a developer, how you might implement them.

If you use our Accessibility Checker plugin, we put a lot of effort into our documentation as well because we’re trying to create an educational resource. So every item when it flags, there’s a little icon you can click on to go over to our website and read really detailed information about why this particular item got flagged and what is the relevance of what the relevant success criteria are, and how you might fix it. So that is helpful as well.

WAVE is another very common testing tool that a lot of people use for one-off free tests. They also have an API that you can pay for if you want to do both testing. And they have pretty good documentation as well on webaim.org. There’s a couple of podcasts that are interesting on more of just learning generally about accessibility or how it works. People like the accessibility rules podcast, and accessible.org has a podcast. If you’re interested in the legal side, there’s an attorney called Lainey Feingold, who’s been very active in the structured negotiation on accessibility cases. She writes a lot about that. She’s a great resource as well.

Then I think I previously mentioned WP Accessibility Day. That happened a couple months ago. And I think it might be webaccessibilityday.org. If you just Google “WP Accessibility Day,” you’ll find all the YouTube videos. And that’s great as well for WordPress specific information.

Joe: Awesome. And I will be sure to link all of that, everything we talked about in the show notes over at streamlined.fm/204. Now, before we go, I do need to ask you two questions. The first is, do you have any trade secrets for us?

Amber: My trade secret. I think the biggest thing is just trying to be aware of what other people do or think. I don’t know if that’s a secret as much. But it’s really important to get out and talk to your website users. So if you’re a website owner, talk to your customers and find out what problems they have on your site. A lot of the accessibility things go hand in hand with UX and user experience, and you’d be surprised the things that might confuse people.

A really great tool for this too, if you kind of want to spy on people on your website is Hotjar. That allows you to put a tracking script on, and then you can watch recordings of interactions and people on your website. And we’ll do this a lot when we’re trying to figure out if there’s accessibility or usability problems or if people have been confused or not taking it. And I think you’ll get a 14 day free trial of full business plan or something, which if you have a high traffic website, 14 days might give you a lot of data.

Joe: I’m just going to give you a hot tip for Hotjar right now is I chipped out and only installed it on the landing page that I wanted to test, which means I never saw what people did when they clicked off that landing page, which included going to my checkout process. So if you’re going to do this, make sure you install it site-wide so that you could see what people are doing everywhere on your website.

Amber: And I think you get like a 14 day free trial of full business plan or something. Which if you have a high traffic website, 14 days might give you a lot of data.

Joe: Yeah, for sure. Maybe team that up with like some ad campaign. Not that I want to spend people’s money. But if you can anticipate a high volume of traffic over a 14 day period, that’s a good time to try out Hotjar.

Amber: Otherwise, you can use the free plan and still get some information. You just need to go there on a regular basis, review it, and delete it so that you can get new data.

Joe: Yes, yes. Awesome. Amber, this has been truly fantastic. One of my longer conversations, really. So thank you for taking the time. Where can people find you if they want to learn more?

Amber: You can find me at Equalizedigital.com. The quickest way to jump to the section on our website for Accessibility Checker for our plugin is to go to a11yrules.com. We’re pretty active on LinkedIn under Equalize Digital, or my LinkedIn name is just AmberHinds, all one word. You can also email me. I’m Amber@equalizedigital.com. I love talking accessibility so I’m happy to answer questions.

Joe: Fantastic. I will again link to all of that and more in the show notes over at streamlined.fm/204. Thank you to this week’s sponsors. They are Outgrow, Restrict Content Pro, and TextExpander. For members of the Creator Crew, I’m going to ask Amber if there are any good themes that she would recommend that she knows are accessibility-ready. So I’m putting her on the spot there. If you’re a member, you’ll get that in the members’ feed. Otherwise, thanks so much for listening. Until next time, get out there and build something.