Lawsuits targeting business websites over ADA violations are on the rise.
In this episode, we learn what it means to have an accessible website, why you should care, and how you can benefit.
You'll hear the answers to:
Ilana Davis works with Shopify merchants to remove friction from the buying process. By keeping web accessibility top of mind, she’s able to create effective websites that attract more visitors, provide better SEO, and increase conversion rates.
Special Listener Offer from Ilana: When you mention The Unofficial Shopify Podcast, you’ll receive 15% off a Website Rescue. Complete my interest form before 2/29/20. Must purchase by 3/30/20. A Website Rescue allows us to salvage your e-commerce store for a fraction of the cost of a full redesign. If your planning a redesign in 2020, don’t redesign your store. Rescue it! More info: https://www.ilanadavis.com/website-rescues
Kurt Elster: Today on The Unofficial Shopify Podcast, we’re going to talk about a thing that has resulted in several, not one, not two, but a good half dozen at this point, half dozen of my clients being sued, and it’s accessibility. So, there’s a lot of confusion around accessibility, in how do you implement this on a website, is Shopify or Shopify Themes accessible out of the box, what does it mean, why should I bother, et cetera, et cetera. It is an important issue that I think a lot of us just unintentionally, no malice, we just overlooked it, and so we need to get educated about it. We need to take it seriously, because it has several benefits to our business.
But I’m not an accessibility expert, so I went and found one. Ilana Davis, who is a colleague of mine, and we’ve worked together on a few projects, really knows this space well and is going to help walk us through what you need to know about accessibility and how it pertains to your website and how you could benefit from it, how we can all win by just investing a little bit of extra time into accessibility.
Ilana works with Shopify and Squarespace e-commerce shops to remove friction from the buying process by keeping web accessibility top of mind. She’s able to create effective websites that attract more visitors, provide better SEO, and increase conversion rates. Ilana, welcome to the show.
Ilana Davis: Hi. Thanks for having me.
Kurt Elster: My pleasure. So, how long have you been working in the e-commerce space?
Ilana Davis: Oh, gosh. Couple years. Honestly, I lost track.
Kurt Elster: And how’d you get started with it? What was your attraction to e-commerce?
Ilana Davis: Well, so my background is actually in HR. I was head of HR at a local SaaS company. Been in HR for about 10-plus years, and during that time I learned quite a bit about how to create an accessible workforce for your employees, and when I left HR, I got more into development and I’ve been working with a couple nonprofits that are local to me, who post job boards and that sort of thing, so that’s really what got me into the e-commerce side, and then just sort of blossomed from there.
Kurt Elster: Very good. Okay, so when we say an accessible website, if I can get on a website, it’s accessible, right? What does accessibility mean?
Ilana Davis: Well, what you can access might be different from what someone else can access, right? So, we often think about being able to navigate your website from your mouse. Some people don’t have that ability. If you’re blind, you don’t use your mouse, you use a keyboard. If you are physically impaired in some form or fashion, you might use different tools to help you access a website. So, it’s not always as simple as can you get on to a site and navigate through it. It’s how you access that site, and how you are able to go from entering the site to purchase, so really an accessible website just means that you, as the website owner, are explicitly inclusive, and you ensure that there are no barriers that prevent people with disabilities from interacting with or accessing your website.
Kurt Elster: So, I’ll give you a real-world example. I had someone comment in our Facebook group. He said, “Wow, I really love the content you post. I’d love to be able to participate in the podcast if you would provide transcripts. I’m deaf.” And I thought, “Oh, shoot. I have completely unintentionally excluded this guy.” So, now we’ve been providing transcripts for every episode, and that… It’s not like that is some great additional effort for us to do, but it goes beyond just, “Hey, deaf people are able to read transcripts of the show.” But it also has this SEO benefit, because now we have the entire content of an episode in a machine-readable format, which so now we get better organic search, so there are far-reaching effects to just a little bit of extra effort here.
That’s been, that’s anecdotally kind of my experience with accessibility. You approach it from, “Hey, can you improve the site for everyone in this inclusive manner?” And in doing so, everyone, including machines, benefit from it.
Ilana Davis: Yeah. I think that’s actually the number one reason why I encourage so many merchants to create a more accessible website. It’s not even just your transcripts. It’s having alt text on your images, and using appropriate alt text. All of that stuff is what search engines use to determine where you’re gonna fall on the search results, so it’s all things that actually help you. And you know, you talked a little bit about the idea of creating closed caption and transcripts. Half the time, I as a parent don’t want my kid to see what I’m watching or to hear. I don’t want her to be distracted, so I will watch videos on mute and listen or read it as it’s coming through, and so many of the different things that people consider as an accessible feature is actually just things that make many people’s lives a lot easier.
Kurt Elster: Many accessibility features are also just practical features.
Ilana Davis: Exactly.
Kurt Elster: So, like on the iPhone, I have some of the accessibility features turned on, like I don’t want all the crazy animation nonsense, and they have as an accessibility feature for people who get motion sickness. Well, it doesn’t give me motion sickness, I just think it’s a better experience without it. Or I do, I use subtitles or closed captions when I don’t want to have the TV too loud and wake the baby up. Or I love this anecdote. Here’s another real-world anecdote. Do you know why Facebook is blue?
Ilana Davis: Ooh, I’m guessing it has to do with the visibility of the color.
Kurt Elster: Mark Zuckerberg is colorblind. Blue is the color he sees best.
Ilana Davis: Yep. Yeah, that’s actually… It’s so funny. I actually did a talk a while ago about a coworker of mine who, we were using like the old school Outlook color categories, and for the life of us we couldn’t figure out why this person wasn’t using the right color, and we would assign them this email for them to use, and they would never do it. We’re like, “What is going on?” And it turned out they were colorblind, and they couldn’t distinguish, because we had a pink and we had a red, and they had no idea that there was even a difference in these colors. So, it’s interesting just how much it does impact our day to day and we don’t even realize it.
Kurt Elster: And the other thing about investing in accessibility is that it is defensive, in that there have been in the last two years a huge uptick in the number of accessibility violation lawsuits that have happened. So, you say people have a right to use a website, and e-commerce websites are being targeted, so you’re minding your own business with your website, you get hit with a lawsuit saying, “Hey, we represent an individual with a disability who’s unable to use and purchase from your website, and so you need to do something about that.”
Those things can be at the very best, stressful, and at the worst, costly. It’s worthwhile to consider this and invest in it if you haven’t. Tell me about ADA compliance, like when we say ADA compliant, and then we say accessibility, and then there’s WCAG standard. What are all these initials mean?
Ilana Davis: Yeah, let’s definitely talk about that. So, ADA is the Americans with Disabilities Act. It is typically the common term that we use when we think about whether or not something is accessible to someone with disabilities. What we forget, though, or that we don’t always realize, is that the ADA is around physical spaces. There’s clear expectations for physical spaces, but it’s not so clear about how to make websites accessible, and so the Web Content Accessibility Guidelines, or WCAG, is sort of the commonality around that. This is the basic standard that many developers, and lawyers, and courts will recognize as the source of truth, if you will.
So, WCAG has multiple levels. Shopify currently I think is aiming for a level A, which is like the bottom tier, if you will. I usually recommend people get into level AA as the best way to avoid kind of any sort of litigation, but the Department of Justice really doesn’t… There’s no easy way to say, “If you hit all these things, you are safe. You won’t have to worry about it.” So, the best thing that I can say is to have your developers or your agencies that you’re working with research what a level AA for WCAG 2.0 means, and work towards those goals. And we can talk a little bit more about what some of those possibilities are, as well.
But there is no clear definition of what web accessibility website would entail.
Kurt Elster: That’s the scariest part.
Ilana Davis: It’s terrifying.
Kurt Elster: You really cannot check, go through a list and check all the boxes and go, “Okay, we know for sure this website is accessible.” Because it’s subjective to an individual. And it’s part of a document.
Ilana Davis: Yeah, and it’s also not just… Exactly.
Kurt Elster: And it’s this big, moving thing, because you’ve got your website, you have their device, and you’ve got changing content, and a changing platform, and apps. Things are not cut and dry at all, here.
Ilana Davis: No, and there’s so many third parties, there’s so many different people involved, that it’s really difficult to understand who’s liable. And I’ll give you a hint, it’s you. You can’t pass the buck to somebody else.
Kurt Elster: Your name is on it. You’re the one who’s liable.
Ilana Davis: You’re responsible for it, so if you’re going to select a theme, if you’re going to select an app, if you’re going to develop something, this all falls on you.
Kurt Elster: So, I can’t, even though Shopify says, “Hey, we’re striving for X level of accessibility.” I mean, they’re really referring to the admin itself, and really that’s part of why the color scheme changed, was because of the… to make it colorblind accessible a few years ago. And the checkout. The theme itself is not so much Shopify’s responsibility. It’s the theme developer.
So, all right, hopefully your theme starts as accessible, but it is not… It still end up being the merchant’s responsibility. So, Shopify’s not gonna take care of it for you. The theme developer’s not gonna take care of it for you. What do I do? Where do I start?
Ilana Davis: Yeah. Well, I actually, I really wanted to say-
Kurt Elster: Oh, go ahead.
Ilana Davis: I’m so glad that you mentioned that, because the way that it starts, many themes, many, generally speaking, are accessible. Or mostly accessible, I should say. What I’ve seen is that you have people that want to make changes to the theme that make it inaccessible, so for example designers want pretty fonts that look elegant, or use bright colors because they pop, but those aren’t considered readable fonts, or aren’t considered readable colors. Merchants want to be able to upload their product photo, and they don’t take the time to name their file properly, for example. Marketers want popups for this spin the wheel prize, or whatever, but it becomes unusable when you have a popup. Or if you have a slider, which we all know sliders don’t convert, but from an accessibility standpoint, those who have motor or cognitive disabilities may actually get confused by them and unable to completely access them.
So, there’s a lot of things that start as accessible, and then we make changes and they become un-accessible. I have done some research on various themes. I believe Debut, which is the standard free theme with Shopify when you first sign in, that is the closest that I’ve seen to being accessible, but it’s not quite there yet.
Kurt Elster: Okay, so even, you’re right, Debut is, that’s… If you open up a Shopify store, the default theme right now, the one it starts with is Debut, and Debut is basic, and stripped down, and simple, to make it easier for new merchants to get started with. But you’re saying even that doesn’t hit… Does it hit level A? It certainly doesn’t hit double A.
Ilana Davis: I don’t think it hits double A. I think it’s at A. It might be close to double A. It’s been a while since I’ve done a full audit on it, but I think it’s the closest thing, and what I’ve also heard from some folks is that like when you make the attempt to be more accessible, if you’re more open to it, then if you were to go through litigation, the courts are gonna see that you’re making that attempt. But if you just flat out say, “My theme isn’t accessible, there’s nothing I can do about it,” they’re not gonna go with it at all.
Shopify is trying to be more accessible by 2021, but… and that means as they get apps, as they get themes coming in, they’re trying to audit those and make sure that they are accessible, but they can’t control all of that. Especially when things change, and developers make updates to the themes.
Kurt Elster: Oh yeah. No, it’s a daunting task. What are the top three mistakes, flaws, dealbreakers you see that are getting in the way of accessibility? What’s the most common things?
Ilana Davis: So, I’ll have to share an article with you, too, but there is an article about what people with disabilities wish developers knew, as like a if you did these things it would be so amazing, but I actually think the very first and most important thing is that they can’t actually access the site itself. So, once you land on the page, they can’t do anything with it. So, for example, if you’re using a keyboard, and so you don’t have a mouse, right? You’re tabbing through or trying to find what the different header levels are, you can’t see any of these things.
There are ways that when you’re designing a website, you can use header tags that allow folks to see the structure of a page, so they can jump around, they can bounce to where they need to go. Creating that structure with basic HTML markup is essential to allowing people with disabilities, especially those using a keyboard to navigate through your site simply. I think the other-
Kurt Elster: Is this semantic HTML?
Ilana Davis: Yeah.
Kurt Elster: I love this idea. So, this was right around 2010, when HTML 5 is rolling out, and there was this big dispute among web developers. It seems idiotic now, but at the time it was like genuine, heated nerd arguments about the right way to make a responsive website, and that was the big push toward HTML 5 and CSS 3. It’s like, “Well, do we have a separate mobile site? Is it an app or is it a responsive website?” Now we know, we landed on responsive as the right solution, or the accepted solution, and at the same time, there’s this idea of you really are hard pushed on separating style and content. So, HTML 5 is in an ideal world, is hypertext markup language. It was meant purely to be the content goes in the page, and the only HTML that’s there should be necessary to describe what’s in that, what that content is to the computer, which then aids in SEO and accessibility.
And it’s when you start doing strange things to achieve style and layout that it starts to break it. And they called this idea semantic HTML, and I love linguistics, and I am pedantic by admission, and so obsessing over HTML 5 semantics… Oh, I love! I just go crazy without… Any chance to use what’s called a definition list, that’s like the nerdiest, most exciting thing in the world for me. It sounds like we’re talking about semantic HTML 5, which I don’t hear discussed nearly as much, with as much breathless enthusiasm as we did 10 years ago.
Ilana Davis: Yeah. Absolutely. Actually, I would challenge folks that are listening to turn off all your JavaScript, turn off your CSS, and just see what shows up on your page.
Kurt Elster: That’s an enlightening exercise.
Ilana Davis: Yeah.
Kurt Elster: Yeah, if you can go through it and it still makes sense, then you know you did it right. But if it’s like suddenly there’s… I bet in a lot of themes you’ll find like, “Oh, suddenly I have two main menus that are identical,” because we’re using one for mobile and one for desktop. And you’ll start seeing some strange things occurring.
Ilana Davis: Yeah. I think what people often do is they’re like, “Well, I don’t use my keyboard, and I don’t even know how to navigate with my keyboard, so I’m not gonna worry about it.” It’s like, “No, turn everything off and just look at your page and see.” Do you have clear headings? Do you know where your sections begin or end? When you turn off your images as part of that, can you see what’s in the image or not? And by that we’re talking about alt text, and we talked about this before, and this was… I’m sort of segueing into my second piece of what happens if your images don’t load, and can people still figure out what is in the image if they can’t see it?
So, oftentimes you’ll see things like image_3025. Well, what the heck does that mean? Like I don’t… Is that a purse? I don’t understand. So, you know, thinking about what it looks like when everything, all the design elements are turned off, is essential.
Kurt Elster: So, all right, sounds like we’re moving into testing. How do I actually experience whether or not my website is accessible? Walk me through that process.
Ilana Davis: So, I would first of all say to include somebody who has a disability in that process, because when you’re going through, and I’ll talk a little bit about how I do some of it, but when you’re going through and testing your site, unless you literally are gonna put on a blindfold and prevent yourself from looking, it’s really hard to move past that. But including someone who has a disability in your design, in your development, is essential to inclusion with web accessibility, so I highly encourage that.
There’s also plenty of services that you can utilize, that will actually have testers who have a disability go through your site.
Kurt Elster: So, there’s services where I can recruit an individual with a disability to actually try to use my site, like real world, in the wild kind of thing.
Ilana Davis: Absolutely.
Kurt Elster: What’s it called?
Ilana Davis: Oh, shoot. I knew you were gonna ask me that.
Kurt Elster: Darn it.
Ilana Davis: I’ll have to look and I’ll add the link for you, but I’m totally drawing a blank on the name at the moment. But there’s also a handful of audits that you can get, as well, that… They’re gonna cost a pretty penny, like they’re not super cheap, but ultimately I feel like it’s worth the time and money to invest in it. There are tools that you can use for like Chrome, and for Safari. Ax is one that I like the most. A-X-E, Axe. I’m sorry. A-X. Oh, now I’m forgetting. A-X-E extension is what I do with Chrome, and it’s a way for you to pull an audit on your site.
What it’s gonna do, though, is it’s all of the automated testing, and so you need somebody still to actually go through the site and determine if they can access it still, like can they actually navigate through it? Tools that are on your site, like Axe, or Wave is another one, those are ones that do the automated piece, which is great, but you need both.
Kurt Elster: My experience with the automated tools is it’s a decent start, but they, in my experience with Shopify themes, they seem to be over optimistic. The testing tools were.
Ilana Davis: Oh yeah. Yeah, I think-
Kurt Elster: Where we had stuff that was like, “Yeah! No, it’s great!” And then it’s like I just do it, killing CSS, you know immediately like, “Oh, that’s not right.” Because there’s just a level of human understanding that they’re missing.
Ilana Davis: Well, and you know, if we use alt text as a similar example again, if you label the image as black purse, for example, it’s going to show that you have alt text. Most Shopify themes will use whatever you save the image as as an alt text, but true alt text is not black purse, it’s black purse with beading. Or you know, it’s a descriptive. So, pretend like you’re on the phone with somebody and you have to explain to them what this purse looks like. It has a checkered black beading lining the outside of the purse. It’s a leather bag that has a soft texture. It’s much more descriptive when you talk about how alt text should be, as opposed to how many people label it in that way.
But when you’re using these testing tools, they’re gonna say, “Oh, yep. You have alt text. Check.” But it’s not good alt text, so it’s different.
Kurt Elster: I absolutely love that tip you just slipped in there. You said when you’re writing alt text, imagine you’re just describing the item to a person over the phone.
Ilana Davis: Oh yeah.
Kurt Elster: That’s just a brilliant practical tip.
Ilana Davis: And it’s like it’s, even for me, I’m trying to picture a black purse and I can’t, but I’m looking at a picture of Kurt, right? So, because it’s on a video here, and it’s like I can say he has a black, or a brown, green, black and tan camo jacket, with a white button up. His eyes are lifting towards the right side of the screen with a big smile and a goatee. I can describe a lot more about that when I’m looking at the picture than if it’s off the top of my head. But absolutely, I challenge you to describe in the way that you save your image, describe it in that save as, and then it’s at least one step closer if you don’t have the ability to ad alt text.
Kurt Elster: Okay, so I’ve got number one, ideally you need a person with a disability to try to use the site real world. Two, there are testing tools that will help, but they are imperfect and optimistic. Three, you’ve gotta cover the basics. Well, it there anything else on testing you want to cover, or could we jump into some practical ways to implement accessibility?
Ilana Davis: I think those are the main ones, so let’s go ahead and jump in.
Kurt Elster: All right, so you talked about alt tags. I think this is like… This is the thing that gets hammered on with accessibility a lot, is like, “Well, do your images have alt tags? What are you doing?”
Ilana Davis: Yeah. I feel like it’s the easy one that most people miss, and yet as we talked about in the beginning, it’s essential to your SEO, so it’s an easy piece. There’s other things, like contrast, we know we talked earlier about using different shades of red or pink, or green or blue. One thing that many people, especially as I’m looking through sites, is the font size. People want to use their white space more, which is fantastic, but using text at the right size font is essential. So, body copy should be at a minimum 16 pixels. I usually aim for 18.
Kurt Elster: Oh, bless you.
Ilana Davis: But making it… Well, it drives me crazy.
Kurt Elster: Yeah.
Ilana Davis: I’ve seen it at like 12 pixels, and it’s like, “You’ve gotta be kidding me.”
Kurt Elster: One of the things that I think web designers fall victim to is the idea that subtle is sophisticated, and therefore they go with really tiny fonts, and then it’s like gray on a white background, so there’s low contrast. It gets hard to read. One of the most basic conversion rate optimization things I do, just bump up the font size on everything.
Ilana Davis: Yeah.
Kurt Elster: Suddenly the site’s easy to read. Lo and behold, conversion rates get better. What do you know?
Ilana Davis: Well, you know, we talked a second ago about contrast, like that gray. When you have a small font with the gray on a white background, I’m telling you, it’s impossible to see. It’s really, really difficult, and unfortunately, it’s like this on a lot of spots that I’ve seen on, even with the checkout on Shopify, but you know, creating that contrast and increasing your fonts… You can’t just do one or the other. It should be both, right? They go hand in hand.
So, you can have a great contrast, where you have, for example, it’s the easiest solution, but on a white background, an almost black text, but if the black text is so small, you still can’t read it. So, they go hand in hand together.
Kurt Elster: Absolutely. So, we’ve got font size, descriptive alt tags, what else am I missing?
Ilana Davis: Font type, and you know, it’s so hard, because designers like the cursive, fancy looking words, or the font, but I think what happens is that we forget that when you have certain fonts, the structure of the font will blend together, especially when it’s a smaller font, but some people can’t read cursive. They just can’t do it. So, I always use something along the lines of Helvetica New, maybe Roboto or something like that, but you can still use design-oriented fonts that are easy to read.
Kurt Elster: Okay, so it sounds like a… Well, so far, a lot of this is around readability is important, number one, and that benefits everybody. Descriptive text and alt tags, which benefits SEO. So, so far all these tips have larger revenue motivations than just make the site inclusive to people with disabilities. So, there’s a double win here for everybody. What else? So far, I’m on board. I’m loving this.
Ilana Davis: Yeah. I would also add that when you have your forms, so at checkout, or if you want someone to contact you, make sure that you’re labeling your forms appropriately. This is to the developers out there, you want to actually create a name that’s associated with that, so it’s not just first name is filled in on the autofill. You actually need to label it that way, so that when you’re going through it with a keyboard, or if you’re just tabbing through, it’s clear what those fields are.
I think oftentimes, you know, we talked about this in the beginning, of things that might hinder somebody with a disability accessing your website. If they cannot check out because they don’t understand that this is where you want the credit card information to go, that’s a problem. They will not be able to physically check out.
Kurt Elster: And is this… This is where we’re reliant on Shopify, because you… If you’re not on Plus, you can’t edit the checkout, and even if you’re on Plus, you are limited in how much you can edit it. So, in this case we’re reliant on them for the checkout. That’s their domain. They own that. Do you think the Shopify checkout is accessible?
Ilana Davis: Mostly.
Kurt Elster: So, it could do better.
Ilana Davis: I think what happens is that, you know, when you add like coupon codes, like making sure that those fields are appropriately labeled. I do think it can be better. I think a lot of it has to do also with the contrast that they have set up, but the form themselves probably could always be improved. I don’t know that I’ve… When I went through and did an audit with somebody, I’m trying to remember if he was actually able to complete a purchase, and I can’t remember that he did, honestly. So, but I think a lot of it is getting to that point, too, right? If they can’t even get to that point, like when you add to cart, this is one thing that we were looking at. He was adding to his cart, and the… When he clicked add to cart, nothing popped up or nothing… You know, there was no announcement that told him this was added to the cart.
So, he selected it again, and again, and again, and I was like, “Hold on. You just added a $500 cart now. You need to stop.” And he didn’t realize that he was adding it, because nothing was telling him these things were added to his cart. So, there’s a lot of different behind the scenes, a lot of different fields behind the scenes that need to be improved on. And I think it’s also your contact form, right? Like if you want someone to contact you, make sure that they can find it. Don’t try to hide it under this weird email me here. Actually create a contact form, so that it’s clear that they need to fill out these pieces and label them appropriately.
Kurt Elster: Again, all things that will benefit everyone, and then ultimately the bottom line for the website. So, recapping, number one, we want to focus on text accessibility, and that’s where like, hey, let’s not get subtle with it. Let’s make it easy to read. You know, if we think about street signs, no one wants the highway exit sign to be really fancy. I just want to be able to read it, and I appreciate that. Do the same thing for your website.
Create alt text, alternative text for your images, by describing it, imagining you’re describing this image to someone over the phone. I think that’s such a brilliant mindset. And then the other two that you touched on, but I don’t necessarily grasp, are slideshow and video accessibility, so slideshows, it sounds like that may be a lost cause, and I certainly have no love lost for slideshows. So, maybe just pick the one hero image that works. Any thoughts on slideshow accessibility?
Ilana Davis: Well, so, I mean I’ve seen where the products themselves, like there’s a row of products that are a slideshow, where it’s like your best sellers, and people put that on a slideshow.
Kurt Elster: Oh, oh, yeah, so you do a featured collection on the home page. I see this. This is like a theme setting. Featured collection on the home page. Hey, here’s my best sellers. And I recommend people do this. But then the theme will give you a choice. Do you want to do that as a grid or a slider? Oh my God. Don’t do the slider.
Ilana Davis: Exactly.
Kurt Elster: You just hid all of it from someone and loaded a bunch of JavaScript, just so you could hide the products? It’s stupid! Go with the grid so they could just scroll through it.
Ilana Davis: And put less on there, like you don’t have to have a grid with 20 different items. Put six on there, that’s fine, and then you can direct them to a full page on your collection if you need to. But having the carousel is just overkill, and I promise you people are not using it. Not the way that you want them to use it. They’re gonna scroll right past it.
Kurt Elster: Are there considerations for video accessibility, beyond, “Hey, it needs to make sense muted?”
Ilana Davis: Yeah, so when you have a video, especially on your home page, turn off auto play. There’s no reason for it to auto play automatically. If you have to have auto play turned on, have it muted. There is nothing worse than when you first land on a page, and suddenly your speakers are blaring, and you don’t know how to turn it off. But I always say it’s better to make the person take action. If they want to watch the video, make them push play. If they want to have sound, make sure that they can turn that sound on.
Also, when we talk about carousels, don’t have your carousel auto rotate. Not only is it super distracting, but sometimes you can’t turn that off. You can’t stop it.
Kurt Elster: Oh, very rarely do they have a pause button.
Ilana Davis: Yeah, and so it prevents people from actually spending the time to read it. This is one of the reasons why they don’t convert, right, is you have them auto rotate every 20 seconds or 30 seconds, but you have text on there that people can’t actually read, and so if you need the extra time, you’ve now missed the opportunity until it comes back around, and then you have to quickly see where you left off and then keep reading. They just don’t work.
Kurt Elster: Oh, the default is usually five seconds.
Ilana Davis: Is that what it is?
Kurt Elster: Oh yeah, they’re ripping through there.
Ilana Davis: There was one that I saw that was five seconds and I was like, “Oh.” And it was giving me a headache, too. I just had it in the background. I had a tab up and I was working on another tab, and I have dual monitors, and it just kept spinning, and I was like, “Oh, I have to turn this off.” Like it was giving me a migraine.
Kurt Elster: Oh yeah, absolutely. Yeah, I get eye strain from the screens. Let’s see what we got here. Oh, so you talked about keyboard support. I’m a keyboard cowboy. I’ve got my mechanical keyboard. But I don’t do a ton. Tab around, and I’ll use spacebar to scroll down, but I’ve never just tried to just walk through a website entirely with a keyboard, because it’s almost impossible. It’s maddening to attempt. Tell me about keyboard support.
Ilana Davis: I mean, really it’s tabbing through it is really the biggest thing, but when you’re using a screen reader, like NVDA, those, they have certain keys that you can customize, that help you navigate through it, so maybe a tab doesn’t just do what we think of as a tab would do. But what you can do, especially if you have a Mac, accessibility comes as part of the standard setup, so you can turn off your mouse, unplug your mouse, and just try to navigate through it and see what happens.
There’s also this really cool thing that most templates have. At the very top, when you first enter a website, it’s called skip to content. When you tab through it, if you turn on your voiceover, or however you access it, but for voiceover for Mac, it will read back to you when you have skip to content, and it allows you to skip over your entire navigation menu and go right to the main body of your paragraph. So, try different things. It is a bit to get used to, but this is one reason why even for me, when I look at a website, I have someone help me with it that is more familiar with it, because I use it to test websites. I don’t need it every single day. I’m not living in this thing every single day.
My husband refuses to use his mouse. He hates using his mouse, so he only uses the keyboard, but he does it because it’s better for him. It’s more of an ergonomic feature for him. So, try it different ways and see if you’re able to get through it. I’d be curious.
Kurt Elster: Yeah, if it weren’t like cruising in my favorite text editor, so you can hear my neck beard growing here. Cruising my favorite text editor with my mechanical keyboard. Oh, I’m loathe to touch the mouse. I wish websites worked well enough that I could zip through that thing without having to use the mouse. It is a preferable experience. So, I’m with your man on that one.
Should I try and view my website with a screen reader and get that experience?
Ilana Davis: You know, I did that, actually, myself, because I, when I got my new Mac and it came with the voiceover, I’m like, “I’m curious. How hard is this?” I’m telling you, it’s not easy to learn. Just to know how to use it, it takes some getting used to. But it is eye opening, even if you don’t do it, or you don’t know how to do it, when you… I’m trying to find the user testing thing, but when you have someone use your site who has a disability, or who uses the keyboard, it is eye opening to watch them go through your site when you’re looking at it and they can’t see it. It’s like, “The button’s right there. Click on it! It’s right there!” And they just… They don’t see it, because they’re not using their eyes, they’re using the keyboard. It is maddening.
But if you can, do it. For sure.
Kurt Elster: I had the same experience, where you get… The interface was so foreign to me, I couldn’t even get started with it.
Ilana Davis: Yeah. It takes a bit of getting used to.
Kurt Elster: It’s a skill. So, there are tools out there that claim, they purport to be able to make any website more accessible. That sounds like a silver bullet. Are there any you like, recommend, what are your thoughts here?
Ilana Davis: There is nothing that I like as a feature. You’re talking about for Shopify apps, right? So, I have tried a couple different ones. There’s none that I love. I do agree. It’s like a silver bullet. People think… It’s kind of like SEO, right? Like they say, “Oh, this magic button’s gonna do all these things for me and I don’t have to do a single thing.” That is completely unrealistic, and anyone who sells you on that, give me some of that Kool-Aid, because it’s not the same.
You do have to put effort in. You do need to try it. And it’s something that you have to continue to work on. It’s not a one-and-done solution. There was one app that automatically added an accessibility policy to your page, and the policy was flawed, and there was no way for them to even contact you through this policy. So, depending on apps to do the work for you isn’t realistic.
Kurt Elster: One thing I’ve seen that I liked, and you can tell me your thoughts on this, was on a website, it was just built, it was burned into the header. It was text in the header, so it’s right at the top, so I’m gonna hear this thing early if I’m using a screen reader. It said, “If you have trouble accessing our website, we are available by phone. Please call us.”
Ilana Davis: Absolutely. So, one of the things that I saw with this app is that on the accessibility policy, it just added to your footer and it says, “Contact us, and here’s our contact information.” The problem is, is that those who are trying to access your site are not looking for an accessibility policy. They’re looking for a contact. So, they’re gonna go to your contact us page, or they’re gonna search for your website and then contact, but they absolutely will contact you and ask you for help.
But here’s the problem: If it’s hard to find the contact information, they’re not going to invest that time in tracking it down. They will go someplace else. So, when we talk about reasons why you want to have an accessible website, is that they’re gonna go someplace where the company sees this as a valuable piece of their overall plan, right? So, if your site’s not accessible, they’re gonna go to someone else’s who is.
Kurt Elster: That’s the truth of any bad website is like, “Look, if this isn’t…” Your biggest competitor’s the back button. If this website does not deliver on some promise, I’m not gonna spend the effort to try and work around it for you, I’m just gonna go back to the next one, and see if that meets my needs, and keep going round robin until I get the one that does what I want. Hmm. All right-
Ilana Davis: Well, and it’s a way to differentiate yourself, right?
Kurt Elster: Yes.
Ilana Davis: Like if you have a direct competitor that isn’t accessible, what if you were? And you know what, I think there’s like some number, some stat where there is 20% of the traffic of people using websites could have some form of disability. So, that 20% of people you could be missing out on, and that could be increasing your revenue by 20% if you’re accessible and your competitors are not.
Kurt Elster: Oh, absolutely. I mean, that’s like… Yeah. I used that conversion rate optimization example, but like this accessibility is part of user experience, is part of conversion rate optimization. The same language you’re using to describe what you do is the same as me, where you say you work to remove friction from the buying process. That’s the same thing I’m doing! Except your one end is to accessibility and mine is toward revenue. Same end goal. Same. Like the same thing is achieved. So, I think accessibility should be viewed as an important component that will achieve SEO and conversion rate optimization. Like I want to hammer on this, that you will benefit. By serving your customers in this way you will profit.
Ilana Davis: Well, and you know, why… I often hear CEOs saying that they don’t want to invest the money in accessibility, it’s too costly, or they don’t like the design. They want something that’s a little bit more fancy, or whatever. But you invest your money into conversion rates, but you won’t invest your money into an accessible website that actually increases conversion rates. So, it’s sort of like don’t bite the hand that feeds you. It’s the same thing.
Kurt Elster: Absolutely. What do you want people to take away from this episode? What, when it ends, they put their phone down, they open their laptop, what do you want them to go do? What’s the first step they should take?
Ilana Davis: I would say the first thing you should probably do is to take a look at your website and just to see… Like just look at it. Don’t do anything. Just look at it, and how does it feel? Can you see things clearly? Is there any… Is the font small, is your contrast too difficult? But just look at it first and foremost, because you can get sucked into all the testing pieces, but have an external eye, a friend of yours, whoever, just look at your site and tell me is it clear? Is it clear for somebody to be able to see your headings, to see your images, to be able to go from landing on your page to checkout? Just the basics, right?
Then you can get into some of the more testing of your site and figuring out what areas can be improved on.
Kurt Elster: Here’s one. This is an old designer trick. Lean back from the computer, and then unfocus your eyes. Blur your vision. And if the layout, the structure, the hierarchy, still kind of makes sense, all right, you did it. If it just turns into a mess, now you need to start reconsidering the layout.
Ilana Davis: Exactly.
Kurt Elster: Okay, so there are easy, sensible places here to start. This doesn’t… I think oftentimes accessibility has been dismissed as like you said, “Well, CEOs didn’t want to invest in it because it’s viewed as too expensive.” If you start with it just as like this is a core component of design, then I really don’t think it’s… I don’t think it’s inaccessible for merchants, for business owners to achieve.
Ilana Davis: No, and I also would add, you know, you mentioned this a little bit earlier, too, but like the amount of lawsuits since 2015 has increased 40 times over. So, if it costs you maybe $20,000 plus your time, and lawyer fees, and all that stuff to go through a lawsuit, how much money would it cost to invest in creating a web accessible website first and foremost? Make that your default and then you don’t have to worry about all the other stuff that comes along with it.
Kurt Elster: I think that’s a good place to close on. Where could people go to learn more about you?
Ilana Davis: Yeah, so my website is ilanadavis.com. I-L-A-N-A-D-A-V-I-S dot com. I’m also on the Instagrams and sometimes Twitter.
Kurt Elster: I will include those links, as well, and you wrote an article called Does My Website Have To Be Compliant With ADA? I thought that was good. I linked to that in the show notes, as well. Ilana, thank you. This has been productive and insightful. I’m thrilled. Because my fear was, “Hey, let’s talk about accessibility.” And you teach us how to do it, but then it becomes very difficult, and it’s like, “All right, we’ll just hire somebody.” And no, that wasn’t the case here. You really made it seem practical.
Ilana Davis: Yeah. I think people need to not be so afraid of it. It’s a lot easier to make the right steps in the right direction if you just go at it one step at a time.
Kurt Elster: I’m gonna leave it right there. Thank you.
Ilana Davis: Thank you.