The Power of an Accessible Website: Practical Tips for Elevating Your E-Commerce Business [TRANSCRIPT]
ABBY ALEPA: Thank you all for joining us today for the webinar, The Power of an Accessible Website– Practical Tips for Elevating Your E-commerce Business. My name is Abby Alepa, and I’m a content marketing associate at 3Play Media. And I will be moderating today. I am a white woman with dark brown hair wearing a white sweater.
And now, I want to welcome Bet Hannon, founder and CEO of AccessiCart. Thank you for joining us today.
BET HANNON: You’re more than welcome. It’s good to be here. I am a white, middle-aged woman wearing Pacific Northwest casual today because that’s our style out here. I have been a web developer since 2008 and helped develop a lot of sites.
My company, AccessiCart, focuses on accessibility and e-commerce, in particular. And I’m currently the CEO and founder there. And you can find me on Twitter @bethannon, and there’s some other places that you might find me, including the AccessiCart website.
So today, we’re going to talk about web accessibility, what it is, some practical tips, some benefits, and some other resources along the way. When folks get interested in accessibility, I think everybody has an accessibility story.
So our story was, a little more than five years ago, one of our still-existing clients today, a large California water district, part of the state of California, let us know that they were aware that they had some new laws that were requiring them to up their level of website accessibility. And they asked us to help with that.
And we didn’t know a lot about that. We brought some experts in. We did a deep dive on learning. And when we did, our team got hooked and passionate about making the web as widely available as possible. And we’re continuing to do that today in all kinds of new ways.
Now, I am not the most technical person on our team. But I do think that talking about accessibility, about what it is and why we should do it, is just an important conversation to have. And so I’m glad to be with you today to do that.
Most people start thinking about web accessibility to avoid a lawsuit. So you can see on this chart is showing the number of website accessibility lawsuits over the last five years. And as you can see, those are rising. What you should know is that 15% to 20% of those sites are being sued for a second or more times. So sometimes that can even happen– the same plaintiff can sue you multiple times.
The Americans with Disabilities Act, or ADA, offers legal protections for people with disabilities. But it’s not entirely clear yet how to meet ADA compliance with websites. And since ADA was signed in 1990, before the internet was really such a commonplace thing in our lives, we end up, in the US anyway, with these sort of surf-by lawsuits where businesses are being sued by customers with disabilities for their sites not being accessible under Title III of ADA, which deals with public accommodations.
Now, businesses may receive– the first step in that is usually getting what’s called a demand letter. And that’s a letter notifying you that there’s an accessibility issue that someone intends to sue you about. If you get that– they can really look like junk mail, so just be careful you don’t throw them out.
And what is important to know is that this chart on the slide does not represent any of the thousands and thousands more companies that received demand letters and settled before a lawsuit got started. So you definitely don’t want to ignore those demand letters. Your first step should be contacting your attorney and beginning to work through that.
Now, I really don’t like fueling fear mongering. I really do believe strongly that there are a lot of business-building, business-positive reasons to make your website accessible. But if the fear of an expensive lawsuit motivates you to commit to accessibility, then that’s great. It actually may be the biggest ROI for making your website accessible.
A single lawsuit can cost you around $20,000 or more in fees. And of course, the larger and more higher-revenue your site, the more quickly that amount can escalate. So you definitely want to avoid lawsuits.
So when I go to networking events and I introduce myself and I say our agency specializes in website accessibility for people with disabilities, sometimes people are confused, or at least curious, because maybe they’ve never really even thought about before how disabled people might use the web. So let’s lay a little groundwork by talking about what exactly web accessibility is.
The big picture is that a significant percentage of people have a permanent or temporary impairment that means they can’t use the web in the same way as the majority of people. So a temporary impairment might mean that I’ve broken my hand and I can’t use a mouse anymore. I can’t use it for mousing.
Usually, disabilities refer to more permanent limitations. And in the US, the CDC estimates that around 25%, so 1 in 4 people, have a disability that requires accommodations. So that’s actually a lot of people. That was my impression when I first started learning about accessibility. I thought, oh, we’re dealing with a really small number of people.
But it’s actually a fairly significant number of people. And remember, this number goes up as we age because disabilities increase as we age– things like vision impairment beginning to get worse. And of course, all of us are only one accident or illness away from disability.
So one of the definitions of website accessibility is that it gives people with diverse abilities equal access and equal opportunity to access and use web content. Now, you might notice that that’s kind of civil rights or human rights language. And that’s the framework for accessibility, really, is making sure that you’re creating equal access, that you aren’t excluding anybody from using your website, buying your products, signing up for things on your website.
So what does that look like, practically? Here’s a couple of examples. If you’re a person who has severe visual disabilities, or maybe even total blindness, there are tools called screen readers that will allow you to– will read out loud to you the content on a web page. Now, if that web page is formatted properly, it’s usable.
One of the older screen reader technologies is Jaws. And a license for JAWS might cost you $1,000 a year. It’s not cheap to have disabilities. A newer screen reader is called NVDA for Non-Visual Display Access. That’s open source. It’s free.
You can go to the NVDA website and download that software and try it out. And if you do, I encourage you to make a small donation to support the open source work. They are doing some amazing work in developing countries helping young people with visual disabilities be gainfully employed.
So you can also go to YouTube and search for demos on YouTube of people using screen readers. One of the surprising things that you might discover when you start looking at that is that while many people like me listen to podcasts at 1.25 speed or 1.5 speed, people who are using screen readers are often surfing and using them at speed four times normal and above. It’s very fast.
Here’s another example. If you’re not able to use a mouse with your hands, there are adaptive devices, many kinds of adaptive devices. Stephen Hawking had a little one on his cheek. There are eye tracking devices. If you have some movement of your head, you can often have a stick that will help you move around, so all kinds of adaptive devices for mobility disabilities.
And there are a whole lot of other disabilities that we would want to think about when we’re making our website more accessible, not just mobility or vision but all kinds of things. And you can see this big list here.
Understand that age-related disabilities include not just a difficulty seeing smaller print, but there are color perceptions as the lens of our eye gradually yellow with age. So that changes the way we see colors, which is why a lot of times people will have more and more problems with sight.
Mobility impairments are not just about people using mouses. But it may be also, like on your mobile version of your website, that someone may not have the dexterity or the steadiness to tap small buttons that are close together, things like that. But all kinds of things that we may want to include as we’re thinking about making our website more accessible.
So if you want to learn about best practices and guidelines, the place to go for the fullest information is called the Website Content Accessibility Guidelines. You can see the website there– a11yproject.com/checklist– has a checklist of them. You can google around for WCAG. And there are some different versions. We’re now on version 2.1, and 2.2 should come out soon, we hope.
There are three levels of these guidelines– A, AA, AAA. AA is most common focus of effort. But these guidelines can get quite technical. But it is the place to go for the fullest information. And there are some increasing nods to these guidelines as the basis for measuring legal standards. That’s certainly true in the EU, where these standards are being referenced for the things that will come into enforcement in the summer of 2025.
So let’s talk about some tips for e-commerce accessibility. And while we’re going to talk about that– I’ll make some references to e-commerce– you’ll find that a lot of these tips will really be applicable to almost any kind of website. So the first one is to think about keyboard navigation.
So that sensor that Stephen Hawking had, other people’s devices, assistive technology devices, you might feel sort of overwhelmed if you thought you had to accommodate all of these highly customized devices. But really, all of those devices come back to using keyboard navigation. That little device on Stephen Hawking’s cheek was really just about a way for him to press the Tab and the Enter keys.
And keyboard navigation is important for people who are using screen readers as well. They navigate through websites using the keyboard. And you can begin to test your website keyboard navigation just by using the Tab and Enter keys.
If you load the page of your website, you should be able to press the Tab key to move through the site, and the Enter key is the same as a mouse click. And just begin to see what that looks like for your users. That would be a great thing.
Another thing you need to do is use semantic markup. The most important one is the one where we’re properly nesting H tags, or Heading tags, on the page. So properly nested tags go from H1 down to, usually, at H6. You usually don’t see that any further than that, most commonly not even below an H4.
You would have one, and only one, H1 tag. That’s usually the page title, or the post title, or the product title. And then, below that, your structure of your content should use H tags for every piece. And they should be properly nested.
It should look kind of like those outlines of English essays that we used to do in school, with the Roman numeral I and then capital letters A and B and then, below those, lowercase Roman numerals. That’s how everything should use. You should never go from an H2 to an H4. And there are some automated tools that can help you check for some of that.
One of the important things to know is that a lot of times people are using the H tags for styling content. And the H tag can be styled any way, it can look any way you would want it to look. But it needs to be properly nested in that.
There’s also some other tags that you want to do properly, things like bulleted lists and columns and tables. We’ll talk a little bit more about that in a bit. But making sure that those are properly nested will help your users understand your content when they maybe can’t see the content.
When you add images to your content, you want to make sure that you’re adding what’s called alt text. This is not the same thing as a caption. You might also have a caption. But the purpose of the alt text is to give a description of the image for users that are visually impaired.
And this is also the text that will appear for someone who might have a low-band internet connection. Maybe they’re not getting everything on the page. And so that description of that image will appear for them.
Any time you’re using an image that has text as a part of the image– like you might make a meme on Canva– you need to make sure that that text is also appearing on the surface of the page or a part of the alt text. And there are entire presentations out there on the web about how to write good alt text, including some by a member of our team, Meg Miller.
We also have posts on our blog about how to write alt text specifically for product images. You want to give that some special thought because that requires a little bit more care and perhaps a little additional text. And you might want to seek out some of the video recordings of presentations or posts to learn more about alt texts.
Accessibility Guidelines give a measurement, a ratio, of color contrast. And I have given up trying to understand how that ratio is created. But the important thing is that there is a color contrast checker– you can use that, you can see the URL there– to check. And what it’s doing is it’s checking the amount of contrast between the background color and the font color.
Now, you can see in the graphic that we’ve got here that some of those color combinations are really hard to read. And the good and bad labels should give you some clues, but you probably don’t even need those labels. There are these automated tools to help you find and check your color contrast. And you just simply need to look up the six-digit hex code of the colors and put them in the inspector.
You can find out what meets the guidelines and what doesn’t. Just be aware that the guidelines are different. The bigger the font and the bolder the font, the less contrast is needed. And the smaller the font, you need a higher contrast.
When you’re putting together content, you want to make sure that you’re avoiding only using color coding as an indicator. About 10% of the population is color blind. And red-green color blindness is one of the most common forms of color blindness. My brother has this color blindness.
One easy way to avoid using only color as an indicator is to also use symbols or patterns in your color. So you can see in the example on the right, we’re using not just the color green or red but also a plus or an X sign.
So you can sometimes use these simple tools to turn on color blindness mode. You can check color blindness. There are some websites around there that allow you to look at your website with various types of color blindness to see how it looks for them.
You do want to make sure that you’re using good descriptive link text. And that’s when you’re making a link and you include the words in the link that gets underlined or included in the link. That’s what we’re talking about when we say the link text.
And so one of the things you want to think about in terms of link text on your site is that you want to make sure that you’re not just using color, like we talked about with the color blind folks before. You want to make sure that you’re using something besides color as an indicator of a link. So typically, we underline or we make bold or we do something different as well with color– not just color, so not the one on the left, the example on the left.
But additionally, you need to know that many people who are dependent on screen readers– and by the way, that’s not just visually impaired people. Some people with cognitive disabilities also rely on screen readers. But many people who use screen readers often skip through– have a tool to just have the reader read out loud all the link text through the page. And they’re just reading the H tags, the Heading tags, and they’re reading the link text.
And if you think about it, that’s what a lot of us sighted people are doing as well, is we’re scanning through content. So it’s really important that all of the text that you make into a link could stand on its own outside the content and the paragraph around it. So if someone were going to read out loud the link of your text, they would know what that link was going to do, where it was going to take them.
So for instance, in the examples I’ve got here, you would never want to have the screen reader user just hear “click here, click here, click there, click here” over and over again. That doesn’t tell them anything. But if you say, click here to read the report on campus crime, click here to read the report on what will be the agenda for the meeting on this date– so it needs to give them a clear indication of what the link is going to do.
A lot of people are in the habit of using a hyphen or a caret to make what might look visually like a list. It might give them the appearance, visually, of a list. Or we might create columns using our tab key.
And this is a problem because the the code on the page will not tell the screen reader user that that content is a column or a table or a list. So you want to make sure that you’re always using actual bulleted or numbered lists, actual columns, or actual tables that are a part of your web page content or your document creation so that your screen reader users will have a proper context for understanding that content.
If your e-commerce or LMS site or your website has PDFs and other documents, it’s important to understand that those other documents must also conform to all the guidelines that we’ve been describing here that are needed for web pages. You’ll want to use the same semantic markup. You’ll want to avoid color and color coding pieces. You’ll need to use alt text. You’ll need to use descriptive links.
If it’s a longer document, you’ll want to include a table of contents. And that’s true for web pages, too. If you have a really long page content on your site, you’ll want to use a table of contents block for that at the top.
In documents that are also web pages, you’ll want to take care with tables and charts. And if you google around, you can find some webinars and tutorials about accessibility for tables and charts. That can get quite complex. And you do want to just be aware that there are already tools in Adobe and Word and other document editing software for accessibility. So using those tools that are already there can be a big help.
If you have multimedia files, like audio or video files, like product videos on your page, you need to make sure that you have the accessibility accommodations either in or alongside those files. So audio files need to have a written transcript. Sometimes that’s all listed on the page where the audio player is located. Sometimes it’s a click to a different page. Either is fine.
Videos should use captions inside the video or transcripts alongside. And it’s important to be aware that the research is showing us that of the people who view videos on social media with captions on and, presumably, the sound off, 80% of them are not hearing impaired. So they may be in a situation like a public setting where they simply prefer to watch with the sound off. And this is an example of how making your content accessible for people with disabilities improves the user experience for non-disabled users as well.
Now, there are a number of free and low-cost tools that will help you create automatically generated captions for your audio/video files, including YouTube. And Zoom meetings can create some automated captions for you. And most of them give you the option to edit those generated captions, which you absolutely need to do.
Sometimes those autogenerated captions are hilariously wrong, and sometimes they’re embarrassingly wrong. And you need to know that sometimes captions and transcripts with a high degree of errors can be really offensive to people with disabilities.
And of course, captioning like this is one of the things that our friends here at 3Play Media do. So if it’s a mission critical to get the captioning right, you will want to turn to a professional service to get that done. And that just needs to be said, that if it’s really important, you want to make sure it’s done right.
Do be aware that checkout and signup processes are a common place to find accessibility issues. So if you’re using a plugin or WooCommerce or LearnDash or you’re using a service like Shopify, there are some out fairly out-of-the-box good accessibility with those most of the time.
But when you start adding in additional plugins that add additional features, those may make it not accessible. So it’s important to check that accessibility. And any time you’re doing updates or making changes to that, you’ll want to make sure you’re checking that again.
And primarily, when you’re checking this, you want to check for, does keyboard navigation work? And does keyboard navigation allow the options for changing the fields, so changing the number of products or the quantity and the variations, the colors, and those kinds of things? Make sure you’re allowing for users to do that.
Here’s a little PSA to avoid what are called overlay plugins. So you may start seeing all kinds of online tools that are recommended for checking accessibility. And they’re using artificial intelligence, and they’re using this great database of checking for accessibility issues.
And then there are some plugins, particularly the plugins that have received a lot of venture capital investments, that seem to be everywhere, advertising for solving all your accessibility issues by installing a simple plugin or a simple script. And those scripts are looking for accessibility issues, and they can try to fix some of them on the fly. They offer usually a little widget in the corner for improving accessibility for certain disabilities. These are called overlay plugins.
And it’s important to know that the artificial intelligence in those tools can only find and fix about 30% of the issues. For example, that tool can tell you whether you have alt text on images or not, but it can’t tell you whether it’s good alt text or helpful alt text. It can’t tell you whether any of your pages are keyboard navigable. And this is a big accessibility issue.
And so it’s really advised not to use these plugins. But when you do use them, do be aware that they are not going to solve all your issues– we all would like an easy button, but there is not one that exists– and that you’ll still need to do some work around accessibility, even if you use these tools.
You should also be aware that these plugins and services, these overlays, are using JavaScript to put the tools on the page. And a disabled user might– probably– already has tools installed on their machines so they can view the other 99% of the web. And so that JavaScript often conflicts, meaning that neither tool works. So many disabled people already install browser extensions to block these overlay plugins.
And there are some increasing concerns about privacy regarding these overlay plugins. There are reports that when someone selects a particular tool to use that the service is capturing their IP address so that they can employ that tool on another website. But that’s protected health care information, and there’s no notification about that. So there’s concerns about privacy and what’s being stored without notifying either the site owner or the user.
And additionally, finally, we’re starting to see some anecdotal evidence that these overlay plugins are being targeted for lawsuits because it’s very easy to prove that the site owner knew that they should do something about accessibility but that they haven’t fixed all the accessibility issues. So the best website to learn more about overlay plugins, how they work, why they might not be a good choice for you, is overlayfactsheet.com.
Here’s a great resource for you. Businesses may qualify for up to a 50% non-refundable tax credit when they do pretty much anything to make their website more accessible. So the business has to be under 30 employees or under $1,000,000 in gross revenue, but that qualifies a lot of businesses. But things like the entire cost of a website redesign and redevelopment project when accessibility is a focus of the project, any kind of audits, any kind of remediation.
And you might not be able to see that form on the little– just for folks, the visual there is a laptop showing a tax form. That’s the tax form, and that’s the extent of it. It’s very easy to do. Just make sure that you have an invoice that shows that accessibility was part of the expense, and you can claim that.
We talked a lot about some of the best practices for accessibility, but let’s talk a little bit about the benefits of accessibility. Beyond not getting sued, why might you want to improve your website’s accessibility? Well, you can increase your audience, your potential audience, by 25% or more.
So you might pay a lot of money to an SEO expert to try and increase your website audience by just 3% or 5%. But you could potentially increase your audience by 25% or more. That’s a massive improvement. This is a great way to do that.
And we sometimes hear people try to argue that, well, my product or my service can’t be used by people with visual disabilities. But why would you want to prevent someone from researching your product or service? Maybe they’re researching for someone else to purchase it for someone else. Why would you want to prevent that? So work at increasing your potential audience. That’s a great benefit.
You can also improve your SEO. So one of the most basic web accessibility tasks is adding alt text to images. And that’s what the screen reader reads out loud. But alt text is also what the Google bots index to know what your image is about and to help decide how relevant your content is.
And screen readers and assistive devices also need that proper semantic markup with the heading tags and other tags. Google uses all of that to sort and access your content, and all of that helps with SEO. So when you add alt text, when you’re using semantic markup and heading tags properly, you’re making your site more accessible and you’re giving Google more to work with. You boost your SEO. It’s a win-win all around.
And speaking of win-wins, improving accessibility improves everyone’s experience. We sometimes call this the curb cut effect. So curb cuts are the little ramps in the sidewalk that help people in wheelchairs or walkers or scooters get around. But they also help people who are pushing strollers or shopping carts or dragging their luggage on wheels. And so that improves everything for all of us.
And so you might want to think about how website accessibility improves everybody’s experience. Not everybody has a disability, but people might have contextual limitations. So I might be trying to use your website while I’ve got a wiggly baby on my hip or while I’m trying to see your site on my phone in bright sunlight. All of those things that are contextual will be made easier, they’ll have a better user experience, if your website is accessible.
And this is a great way, for example, to think about accessibility. Accessibility is really an extension of improving user experience. You’re including a wider number and types of users. But you’re really just trying to work at improving user experience.
By the way, all kinds of accommodations and technologies that were originally developed to assist people with disabilities have spilled over into the mainstream to make all of our lives easier. AI assistants like Alexa and Google Home and Siri, dictation things, all of those started as ways that AI could help people with various disabilities.
And now lots of us who don’t have disabilities use those tools to make our lives easier and more accessible and improve our life experience. So when you make your website accessible, you can improve everybody’s user experience.
Improving the accessibility of your website is really an investment in your customers. It’s usually a lot cheaper to keep your current customers than it is to acquire new customers. The likelihood of developing disabilities increases as we age. And difficulties can start out small. I’m middle age. I admit it’s getting harder and harder to see some of the small print sometimes that’s not in a good contrasting color.
Smart businesses want to keep customers, even as they might develop disabilities. And they want to make their websites accessible as an investment in retaining those customers. So especially if your website does any kind of customer interactions, things like paying invoices or scheduling services, you want to make sure that those functions are as accessible as possible.
We like to feel good about the brands that we associate with. Experts call this belief-driven buyers. We want to buy from local shops that invest in the community. We want to turn away from brands that we discover are using sweatshops. Dan Edelman is a researcher in this area. He estimates that nearly 2/3– 64%– of consumers around the world will either buy or boycott a brand solely because of its position on a social or political issue.
So making a business website accessible and then not hesitating to make that known broadcasts your company values about inclusion and welcoming people and making a positive difference in the world. And that can be a significant investment in promoting your brand.
Now, this is not only attractive to people with disabilities, but when I have a family member or a friend or a loved one who’s affected by a disability, I’m paying attention to whether they’re included or excluded. I want to be a part of making the world a more welcoming place for them.
More importantly, I care about their human dignity and want them to be able to live independently. So when I have choices between companies that support independence of my blind friends or my disabled friends versus one that doesn’t, then I choose the brand that values my friend.
Also, note when you do make your brand accessible, your site accessible, customers with disabilities are some of the most loyal customers you will find. If you have made a welcome for them, they will be able to share that with other people and not hesitate to do that.
So how do you do that? What do you do? Well, you might have what’s called an accessibility statement on your site. It doesn’t have to be a huge thing up front. Typically, it goes in the footer of your site. Here’s a screenshot from our own site.
These accessibility statements typically include three things. They have some statement that says, we want everybody to enjoy this website and be able to use it; we have some commitment to WCAG, or at least an acknowledgment that you’ve tried to make the site accessible for people with disabilities; and, three, an acknowledgment that keeping a website accessible is an ongoing work. And people might encounter problems, and you can invite them to contact you.
And of course, then, you have to take seriously if you get any reports of issues. But it’s not difficult to have an accessibility statement out there and move forward. It doesn’t prevent people from suing you, but it also doesn’t make you more of a target, either.
Here, you might want to know about resources. You can certainly reach out and have an accessibility audit done of your website. So accessibility audits are an in-depth testing of your site to find the issues.
So you want to beware of anybody that’s doing a cheap audit. Audits typically are not cheap. And so if someone is doing an inexpensive audit, what it means is they’re probably doing an AI automated, generated thing that is only going to find about 30% of issues. And that’s important. You can do those tools too and look at them. Just be aware that you’re not probably finding all the issues.
You want to look for an audit that has some human testing, but it doesn’t need to be a disabled person’s. You can do that. That’s a higher level of commitment to accessibility, certainly. But typically, developers who are experienced with accessibility testing and accessibility know what to look for in terms of testing a site. Although occasionally, when our company does an audit, for example, we may run into something and we’re not sure how a disabled user would do that.
So we call out. We have someone that we pull in as a consultant and say, how does this look to you, what would you think it’s doing, so we can ask them to test. But you want to look for human testing, for sure.
And typically, you’re not getting an audit of your whole website. That is usually pretty cost prohibitive. But you might look for what’s called a sampling audit. So based on the size of your site, you might look at 10 or 20 or 30 URLs or pages, and typically trying to get a good representative sample of your content, so different types of layouts, different types of pages. If it’s an e-commerce site, you definitely want to get all of the pages of the checkout form tested, all of those kinds of things.
And then, typically, you’re getting a report. You want to make sure you’re getting a detailed report of your audit. And then, often you can get an audit, and then your own developer, your regular developer, in-house team or the regular developer agency you work with, can do any remediations or fixes to your website that you might need. Happy to answer other questions about audits at the end.
And that’s it for me. Accessibility is the right thing to do. It makes a lot of business sense. And I appreciate your attention today. And I’m happy to answer any questions that you might have.
ABBY ALEPA: Great. Thank you so much, Bet, for that wonderful and very informative presentation. We have a number of attendee questions to start going through. And you can please continue to ask questions in the Q&A window or the chat, and we will try to answer as many as you can. So our first question we have is, isn’t there some debate as to whether there should be only one H1 per page?
BET HANNON: Nope. No. The H1 is what gives the title of the document– one and only H1 on a page.
ABBY ALEPA: OK, got it. Great. [CHUCKLES]
BET HANNON: I knew the answer to that one.
ABBY ALEPA: Easy answer. And our next question is, how much of this work can you do yourself or in-house, or when should you consider getting outside help?
BET HANNON: So there are a lot of things that you can start to do yourself. The estimates talk about fixing alt text, H tag structure, and color contrast, that that’s typically about 80% of the issues on any website. So those are all things that you can test for and find and generally fix on your own.
And so it’s when you’ve done some of those and you’re moving beyond that you might want to think about pulling in some sort of experts outside. So there’s people– our company does audits. There are other people, reputable folks, that do audits, as well.
You have to begin to think about– in some ways, accessibility is a lot like SEO. There’s some basic SEO practices you can read about, you can learn about on the web. You can implement those. But if SEO is important to you in terms of growing your business, getting your site traction, you’re going to want to invest in some folks that really know what they’re doing in terms of– we have– in terms of making sure that’s all done correctly for you and you’re not hurting yourself in any way.
And so the same thing can be said about accessibility. There’s a lot of stuff that you can do at that base level, but it’s really about improving user experience over time. It’s not a “check mark and it’s done” sort of thing. It’s really something that you can continue to work at. And you can find people that will do consulting around accessibility, as well as audits. It’s not just an audit sort of thing.
ABBY ALEPA: Right. Yeah, I think you make a good point about accessibility being a process and not just a one-and-done thing.
BET HANNON: Well, we sometimes say, progress not perfection.
ABBY ALEPA: Exactly. So that point kind of ties into our next question, which is, how do you maintain accessibility as a priority in all of your business decisions moving forward?
BET HANNON: Oh, it’s tough. It’s tough. Because you have to create– that’s a great question– you have to create a kind of culture around accessibility so that it just becomes sort of embedded in everything that you’re doing.
And so part of that is developing a plan or a roadmap for your company. And so that’s going to look really different if you’re a solopreneur, if you have a team of five or seven people, versus when you have a team of 40 people. It’s going to look really different.
But some of the basics are going to be you want to make sure you’re getting everybody on your team trained. So, for instance, you can have an audit and you can fix all of the accessibility issues that are currently on your site, but if you don’t train your content people for putting in content in accessible ways, they’re going to keep creating problems, keep creating new issues.
So you want to do the training. You want to get your developers trained. You want to get your graphics people trained. So those are typically three places where we look at getting folks trained and working with them on projects.
And then thinking about your QA processes. In a bigger company, if you’re a bigger e-commerce store, you might have a whole process that a product page will go through before it gets launched. The copy needs to be written. The graphics need to be put together. It needs to go by the product manager. It needs to go through the legal team. All of those pieces.
You need to find a way to put accessibility in there earlier rather than later. It will always be more cost effective to put accessibility in early, but then also at the end just in case something gets changed, But figuring out some ways that you’re going to be putting that quality assurance, QA checks, for accessibility, along with other things that you’re doing.
ABBY ALEPA: Yeah, making it part of the process.
BET HANNON: Yeah. And it’s tough. It’s hard. But I think the first is to just really acknowledge that it’s never going to be 100% accessible. Nothing is– that’s like saying you have a site that scores 100% on SEO. There’s always an improvement that you’re going to make. There’s always other kinds of improvements that you’re going to make.
So you’ve got to begin to shift that mindset. And then you can begin to think about how you’re going to put that in there. And realistically, you’re going to balance that out with some other things. You’ve got SEO that’s a priority, or you have conversion rate optimizations that are priorities. And so you’ve got to put some of those things in there. But be thinking about how you’re always checking for accessibility as you’re doing those other things.
ABBY ALEPA: Yeah, definitely. Jumping back to the H1 topic, we have a follow-up to that H1 question about explaining the semantic and functional difference between the title tag and the H1 tag.
BET HANNON: Yeah. See, I told you I was not the most technical person on the team. And I just know that it has to be– the title for the screen reader needs to be the H1, that what the– the screen reader will announce out– I think this is the way– it’ll announce out title. But it’s H1 that people are looking for in terms of the title of the page. I don’t know the difference.
ABBY ALEPA: Yeah. I’m not totally sure of the difference either, but when I’m creating content, I never really use the title tag, just the H1 tag. So our next question is, are there websites or resources that provide accessible, editable interactives, for example, sliders, carousels, modules, et cetera, or other website accessible media?
BET HANNON: Well, yes, some. But it’s highly variable, and you’ll have to test. So WordPress, for example– we do a lot of WordPress development– WordPress itself is mostly accessible on the front end of the site, on the display end of the site. It has some issues in the back end, for sure.
But then when you start putting plugins in, one slider plugin or carousel plugin may be accessible and another not. So there are some that are out there, and you just have to– I don’t have lists of them. I know we’ve used Smart Slider before for WordPress. And so I’m not sure– there’s no authoritative list, for sure.
ABBY ALEPA: OK, great. Next question is, have you noticed or seen data to support increases in traffic and/or revenue when businesses add robust accessibility features to their e-commerce websites?
BET HANNON: That’s a really good question. And what it would require is doing some– we haven’t done that. Typically, folks come to us, and they don’t have the data from before in a way that we– because it’s a part of a redevelopment, there’s so many other things that changed.
So it’s really hard to pinpoint that it was accessibility that drove something. And typically, companies are not doing accessibility improvements in isolation. And so it’s really hard to pinpoint where increased traffic comes from. We just know that you have the potential to increase by 25%.
And especially if you have gone out of your way to do some good education about the features that you’ve done, if it’s something like an app or things– our team was just looking at the apple.com accessibility page has just these– it just flows down with all the different ways that things are accessible on iPhone and iPad and Mac and how you can use them and how you can learn more about them. And being sure that you’re communicating that is a helpful thing too.
ABBY ALEPA: Great.
BET HANNON: There is no way– by the way, we at one time investigated, would it be possible to, for instance, track screen reader users with analytics? Wouldn’t that be cool? You could tell how many– no, can’t do that. Privacy law prevents that.
So even some of the ways that we might try to track accessibility devices are prohibited, rightly so, ethically, for privacy concerns. Even though it might be a really interesting thing for the business owner to get some metrics, we just don’t have a way to track them.
ABBY ALEPA: Right, OK. Next question is, for smaller businesses on a budget, where would you recommend starting in terms of web accessibility for their e-commerce websites?
BET HANNON: Yup. So first of all, start looking at the big three– alt text, heading structure, color contrast. Then look at your checkout process. So we offer– and you probably could find this out there for some others– a very mini audit on the checkout process. So from us, you can get a very narrowly scoped audit that just focuses on your checkout process.
But I would say start with that DIY stuff of getting those big three fixed. That’s going to get you a little bit further along the way. And then, over time, begin to look at some of those other things. And think about as it’s a project over time. I think sometimes– [LAUGHS]– sometimes, an attorney will get involved. And they’re like–
[CLAPPING]
–you have to make this accessible by next week. And well, that’s just not going to happen. We have 10,000 product images that need alt text. There’s just not a way to make that happen.
ABBY ALEPA: Yeah. Next question is, what about creating an accessible app? Is this a totally different process? And what if I can only afford to focus on one, a website or an app?
BET HANNON: Well, it’s not that different, but it is different because it’s separate. And so there are some ways that you can begin to look and test for accessibility on mobile devices. For instance, one of the things that we try to do– it’s not that different to move from the mobile version of a website into an app, so some of those things. But a lot of the things that we’ve been talking about, the same sorts of things are going to apply to the app.
One of the ways that we sometimes tell people they can test, like if somebody has a palsy, they have Parkinson’s or a tremor in their hands, they may not be able to hit a small button, and especially when multiple buttons are close together. So one of the ways to test is to say you should be able to put your phone on a table and click a button with your elbow, tap a button on your phone with your elbow.
But it’s a way– I would say focusing on making the website accessible and include that accessibility on mobile would be the primary focus, and then the separate app. And be aware that, especially if you’re on a budget, there are services out there that will promise to convert your website to an app. Just be wary about how they’re doing that because they may be scraping things in ways that will not be accessible.
ABBY ALEPA: Right. Our next question is, does alt text take the place of a product description?
BET HANNON: No, although it kind of functions in some of that way. So for product alt text, we have an amazing, relatively new post on our blog at AccessiCart.com specifically on product alt text. Because when you have product images, you have to think about– any time you’re doing an alt text, you’re describing the image based on the context in which that image appears.
So we might have the same image of a downtown urban landscape, but the alt text on it in one situation might be “bleak cityscape with no people,” and another alt text might be “photo of the exterior of our new offices.” It’s just explaining the context.
So in product images, you have to give some extra thought to how the product images are being used. And so your first product image might contain detailed information. But then, when you’re switching to the other views, those alt text on those different other images need to be different, explaining what’s different. And you’re going to be explaining all kinds of things that the visual user would see right away.
And so one of the examples we use on that post is a couch that has a space underneath versus a couch that sits flat on the floor. That might not be anywhere in your product description, and it might not need to be because most folks would see that.
But it might need to be in your alt text, or things that people would see that need to be conveyed about the product. So I would encourage the person asking this question to read the post. It’s a fairly extensive posts giving you lots of great tips about product alt images.
ABBY ALEPA: Great. Thank you. So that is all the time we have for questions. Thank you again, Bet, for such a great discussion. And thank you to everyone for joining us and asking such great questions. Thanks again, and I hope everyone has a great rest of their day.