How to make your Shopify store accessible

If you’ve listened to any of our podcast episodes, you know the one thing that makes its way into every episode is accessibility. It’s not only important: it’s absolutely necessary for your store to be accessible.

This week on the podcast we’re talking with Ilana Davis about all things web accessibility: what it means, why it’s important, and tips to make your Shopify store accessible.

guest.

Ilana Davis is a Shopify Superhero who works with e-commerce shops to remove friction from the buying process. She builds and rescues websites that attract more visitors, provides better SEO and increases conversion rates at a fraction of the cost of a full redesign.

sponsors.

Octane AI enables fast-growing D2C brands to increase revenue and collect data from the marketing channels your customers use. 

Clocked in a time clock for Shopify.

With Clockedin your team members can easily clock in and out of their shifts from anywhere. You can manage your team's hours as they work remotely with an intuitive interface that can be used from desktop, tablet, or mobile. 

show notes.

• [02:11] About Ilana
• [05:19] About Ilana’s business
• [07:54] Why parallax sucks
• [10:24] Micro animations
• [14:10] What is accessibility?
• [15:32] Why alt text is important
• [21:12] Increase your font size
• [23:09] Color contrast
• [25:10] Web accessibility standards
• [38:14] The roles played in making a website accessible
• [42:17] Accessibility tools
• [47:21] Store shoutouts: A Kids Book About
• [49:08] Store shoutouts: Kotn
• [49:58] Store shoutouts: Bottle Rocket Hot Sauce
• [50:46] Where can we find you on the internet?

resources. 

• WCAG 2.0 AA Guidelines
• Hotjar
• Lucky Orange
• Web Aim Contrast Checker
• Axe
• Brand Wood
• Kotn
• Bottle Rocket Hot Sauce
• A Kids Book About
• Twitter
• Ilana Davis

transcript.

Kelly (00:00):
If you've listened to any of our podcast episodes, you know the one thing that makes it's way into every episode is accessibility. It's not only important. It's absolutely necessary for your store to be accessible. This week on the podcast, we're talking with Ilana Davis about all things, web accessibility, what it means, why it's important and tips to make your Shopify store accessible. Let's dig in.

Rhian (00:28):
Welcome to Commerce Tea, a podcast to help you succeed on Shopify I'm Rhian.

Kelly (00:33):
And I'm Kelly, grab a mug and join us as we talk about all things commerce.

Rhian (00:38):
Hey Kelly, how can I get to know my customers better?

Kelly (00:46):
By using Octane AI's new Shoppable Quiz, you can easily create beautiful quizzes to learn more about your customers and help them find products, you know they'll love.

Rhian (00:55):
What kind of results can I expect from building a quiz?

Kelly (00:57):
You'll see increases in your conversions and average order value, growth in your marketing lists and higher engagement on your marketing campaigns by using the personalization data you're collecting. And the results are profound, brands on Shopify with the Shoppable Quiz have collected 16 times more emails and discover segments of customers for the 75% higher AOV than the average customer.

Rhian (01:20):
That's so rad.

Kelly (01:22):
Yeah. Plus Octane AI passes the quiz responses into the marketing tools you already use, like Klaviyo and Privy. You'll also get to use this personalization data with Octane AI's powerful Facebook messenger and SMS automations.

Rhian (01:36):
Where can I learn more?

Kelly (01:37):
Visit octaneai.com/quiz to learn more and request an invite for early access. Today, we're speaking with Ilana Davis, a Shopify superhero who works with eCommerce shops to remove friction from the buying process. Ilana, thanks so much for joining us today.

Ilana (01:58):
Hello. Thanks for having me.

Kelly (01:59):
So let's kick things off by having you tell us about yourself.

Ilana (02:05):
Well, I was born on a dark cold night.

Kelly (02:08):
Yes.

Ilana (02:11):
Actually I have no idea if it was a dark cold night. So I'm Ilana Davis, I run my own agency of sorts and I focus mostly on what I call a website rescue. So I don't believe in the need to a complete redesign, I do more of the let's make minor tweaks to your Shopify store that could help improve your conversions without spending an arm and a leg, just to make it a little bit better for you without having to completely uproot all of your customers as well.

Kelly (02:43):
I love that. Also I just empathize with your agency of sorts because until I started the taproom, I was like, "I don't know what to call myself, am I a consultancy?" Freelancer isn't enough?

Ilana (02:58):
I don't consider as a freelancer, because I it's more of a consultant. When I make a decision or when I make a recommendation, there is something behind it. I'm not just going to sit here and plug away behind the scenes and then show you my product at the end, but I'm not an agency because I don't have a team. But I'm not a consultant because I actually do the work too. So I'm like, "I am a mixture of whatever you want to call me."

Kelly (03:22):
I don't think there's a word for it.

Ilana (03:22):
We need to create something.

Rhian (03:26):
I love that.

Kelly (03:26):
We agree.

Rhian (03:27):
I remember, for a really long time, we were doing consulting and apps, and we would go to Shopify Unite. And you have to pick a button, what role you have. And I would have all of the little tags on, because I had, I was like an expert and a partner, and an app developer, and I just didn't remember being like this. This feels like a lot of ways to describe myself and I'm not sure where it lands, and so I kind of liked having all the stickers though. That was fun. Apparently I'm like a child. I'm like, "You gave me a sticker, it makes me stoked."

Ilana (04:05):
Well, and then I also got into [inaudible 00:04:06] of the day. I'm not technically a founder either because I don't have a team and yet I'm building a business and I'm like-

Kelly (04:13):
What wait.

Ilana (04:13):
... "I don't know what to call myself."

Kelly (04:15):
You're a founder.

Ilana (04:16):
I know, this is what I'm saying. I don't know what they were talking about. They're like, "I don't think I would consider you a founder." And I'm like, "Well, I don't know what I consider myself so that's fine."

Kelly (04:27):
Yeah. So that's the other thing I struggle with it. I know this is not at all what we're talking about today, but we're going to do it anyway. Because it's our podcast, I'm CEO. Rhian and I have had multiple conversations about my problem with calling myself a CEO and multiple people were like, "You got to do it anyway, just call yourself founder and CEO of The Taproom." I'm like, "I don't report to a board." And so my way around calling myself a CEO is just by calling myself, chief everything officer. And that's the only way that makes it feel okay to me.

Ilana (04:57):
I like that. It's the same thing with the whole idea of a Shopify expert.

Kelly (05:01):
Right.

Ilana (05:02):
Technically I'm an expert, but I hate that term.

Rhian (05:04):
Yeah, same.

Ilana (05:05):
Oh yeah.

Rhian (05:07):
I get the badge.

Ilana (05:07):
Yeah.

Kelly (05:07):
I don't use it.

Rhian (05:08):
But.

Kelly (05:09):
I think I use Shopify Plus Partner more than anything else.

Ilana (05:13):
Yeah. I'm the same. I use partner, that's it, yeah.

Kelly (05:15):
I like my partnerships. Okay. So-

Ilana (05:18):
Anyways.

Kelly (05:19):
.... tell us more about your business.

Ilana (05:23):
I'll give a little bit of a history. I started out actually in HR, so my background comes from human resources where I would work in many different SAS startups in high tech industries and building teams from there. And after a while I realized how much I hate HR and that it's not for me anymore. So I transitioned into web development and started helping my husband out with tech support, for his apps, he's also on Shopify. And then started my experience within HR to build sites and focus more and more on accessibility.

Ilana (06:02):
I don't consider myself an accessibility expert as we just discover the word expert, I don't like, but I do use it in everything that I do. So in every site that I build, every consult that I have, it's part of that discussion of around accessibility and who can actually use your site, who you're targeting, who's your market and what does that look like for them. So I kind of build my business around that and the mission around serving not just who you think your customers are, but really who the actual customers are.

Kelly (06:39):
I love that. I think that's super important and yeah, that's something I always stress as well is, until you actually talk to your customers, you don't know who your customers are. We can all make guesses and we can create the most detailed business plan about who we're going to target. But if they're not the ones who are buying, you won't know until you actually talk to them.

Ilana (07:00):
Yeah. And we might get into this a little bit later, but just because we're talking about it right now, I often talk about accessibility on various forums and I'll say, "What you're asking to do, isn't accessible, so please consider another option and here's another option." And they're always like, "People that are blind aren't on my site, are you sure? Are you positive about that?"

Rhian (07:18):
That sounds like the Worst pushback, I've heard that to and I'm like-

Ilana (07:21):
I know.

Rhian (07:22):
... "Why would you just... how, ablest is a comment like that?"

Ilana (07:26):
Right. Well, and that's what it is, right? It's like you have your privilege and you think that no one else is experiencing a different experience. And so you don't realize what the possibilities are out there and you know what? Maybe a blind person isn't going to buy your art, but it's not for the lack of want it's because you're preventing them from doing it. And there's a big difference.

Kelly (07:47):
Exactly.

Ilana (07:48):
That's my little rant for the day.

Rhian (07:50):
No I love it. Get on the soap box. I want to hear it all.

Kelly (07:55):
We love getting up on our Hills and dying [inaudible 00:07:58] so.

Rhian (07:58):
Yeah. Before we started recording, we were talking about parallax and why I loath it. And it's because it literally makes me motion sick and want to throw up. And that's something that I think impacts a fair amount of people. And yet it's still something we see all of the time or any kind of fast motion. And it's just something that it's kind of trendy still, so people still do it. And I go to your site, I'm like," [inaudible 00:08:26] the space where I throw up and I'm going to be leaving immediately."

Ilana (08:30):
And let's talk about what parallax is. Parallax is the idea that you have two different images now, and one image and moves faster than the other much like a video game. That's what it was created for, that's the purpose of it. I cannot play video games for this exact reason. No matter what I do, I can't play those in-person, first person games, I don't even know what they are anymore. I can't do them.

Kelly (08:53):
I think the first person shooter's kind of...

Ilana (08:55):
Yeah. I can't do any of that. And even I used to play Super Mario Brothers as a kid, and that was easy for me because it was literally just one image that went across. But now everything is all fun, and I want to have this idea of motion and it's like, for a game, sure, I could see that being logical, but not for your website. I don't need that motion for the website as I'm looking at it. And it absolutely makes you nauseous. And I'm going to go on another rant, because I just had this conversation.

Kelly (09:23):
Yes. Go rant.

Ilana (09:24):
I love rants, not about Shopify websites, but Facebook now has this idea of a 3D image.

Kelly (09:30):
Oh yeah.

Ilana (09:31):
Which is very similar. And it makes me so nauseous and especially on my phone, where it takes up your whole screen. And as you're scrolling, I literally have to step back and shake my eyes and close my eyes, and scroll past it. So this idea of the parallax or these 3D images, if it's not even called that, but they don't make sense, they were built for a different purpose and someone thought they were cool and said, "Oh, let's put it online, so everyone else can see how cool these things are." It's such BS, I don't need this stuff to be good.

Rhian (10:06):
While we're talking about terrible additions to platforms when Twitter released voice, which I think they've now rolled back, I was just mortified. I was like, "Hold on a second, you're launching a product that is voice, that with no transcription whatsoever and you just made your product 100% inaccessible, just overnight.

Kelly (10:31):
I'm glad they rolled that back.

Rhian (10:32):
I am very glad they rolled that.

Ilana (10:33):
I don't get it. Yeah. I mean really, and I mentioned this I think with Kelly on a thread in Twitter at one point and someone was like, or she had asked me about parallax. And I was like, "Yes, parallax is terrible, please don't put that on your site, it actually makes you... " Many people who have migraines, it's not even a vision issue, they have migraines that can't actually process the image that's happening and they will just scroll past it really quickly. And someone was like, they had no idea that that was even a thing. And I'm like, "If you think about many of our technologies that have been created, are created for accessibility purposes," right? And this is one of those things where voice is one of the examples where they probably thought it was a cool thing to add so that it would be easier for people to dictate what they wanted to put down, but it hurts sometimes more than it needs to. And parallax is just not one of those needs to have on your site. It doesn't help anything.

Rhian (11:30):
So we talked briefly about parallax and the challenges that that creates. What are your thoughts on those micro-animations that are super popular right now? You know what I mean? Like the little, [inaudible 00:11:42], that's how I was feeling, that's the noise they make in my brain, where you see a little animation over the product or over the words, does that matter? Is that just a developer being like, look at the cool stuff I can build?

Ilana (11:58):
That's exactly what I think it is. It's like, I want to show you how my skills are and I need to justify that I'm a skilled developer. I don't know the purpose of it. I don't get that it's... Yes, it's pretty and it makes your site look cool, but is there value, add?

Kelly (12:15):
That's exactly-

Ilana (12:16):
What are you adding to your site for that? Right?

Kelly (12:19):
... I see some micro-animations that are super cute, but they don't serve a purpose. There are smaller things like a buttoned hover states, when he actually hover your cursor over a button-

Ilana (12:31):
Absolutely.

Kelly (12:31):
... and it changes the state, which basically looks different, so you know you're hovering over it. And you can use an animation to make that a little bit smoother, as opposed to just like, in your face change color. But in terms of just adding micro-animations, content sliding in from the sides as you scroll down the page or fading up, or whatever, it looks cool, but we're getting right back to the same issue of that, the motion that's not necessary.

Ilana (13:02):
Yeah. It sort of reminds me, do you guys remember a long time ago, PowerPoint when they first started creating all these different animations that you could do. And it was like, everyone had to do the colors of, when they have the arch, the header of your text. And it had this variegated coloring thing going on and it was like, it served this purpose of it looked pretty, but you actually couldn't read it when it was actually projecting up in your classroom. It's the same thing, right? It's like, I think that many developers and many people in general want things to look pretty. And so they do something, they create this little micro-animation or whatever it is that looks cool, but it serves zero value. And that's what I want to make sure that people are thinking about because you're investing in that development. It costs money to develop this little twitch of a graphic. And if you're not providing any value, put that money elsewhere. I don't understand.

Kelly (14:04):
So I think to get to a higher level of discussion here a little bit, and just kind of back up a little, what is accessibility? We keep on talking about things being accessible or not accessible. What does it mean to be accessible?

Ilana (14:19):
Being accessible is really just ensuring that there's no barriers that prevent people with disabilities from interacting or accessing your website. So if you literally think about it of like, can I actually touch your website? Can I access your website? Yes or no, then you are accessible, but there are various things that come into play that then make it inaccessible, meaning I can no longer interact with your website. And that's what we're going to talk about, I think. But I just wanted to like, there's a difference between, can I get to your site? Yes. Can I interact with it? Yes. To a point and then it becomes no longer accessible.

Kelly (14:56):
So let's start digging into some of those things. We've talked about parallax being examples of how it can disrupt the flow or usability of your website, but there can be much worse things that are on your site that can make it inaccessible, like not being able to access links, or not understanding what the image is on the website are. So you have no idea what it is that you're looking at.

Ilana (15:20):
Yeah. And I love that Rhian's here with me when this, because as someone who works with SEO, like you're going to love this little tidbit. And I know that you guys have talked about this before, too, but with alt tags on your image, right? That tells screen readers what is happening in the image. And that helps to explain what's going on so that the person who maybe can't see that image can still see what's happening on the page. And as I've described before, and I know that you guys have talked about it is when you're using alt text, the best thing for you to do is pretend like you're describing it to somebody on the phone, so that they can't see it, but you have to describe it enough that they can understand what's happening, but people still don't understand this.

Ilana (16:06):
And so what I wanted to add to that is pretend that Google is a blind person on your website, and Google has to know what is in that image. The only way Google is going to know what is in that image is if you use your alt text and you describe what is happening in that alt text to the image. So Google is a blind person, they're exactly the same thing because the blind person is going to use a screen reader to understand what's happening there. The screen reader is going to read back the text that's on your site, the alt text that's hidden behind your image, and Google does the same thing, they're looking at the description that you've put in there. So if you cannot grasp that somebody is using a screen reader to look at your site, google is looking at your site. Google needs to know what these things are. Otherwise, you're not going to show up on your ranking.

Rhian (16:58):
I'm so glad you brought that up. I feel like I'm constantly speaking about alt texts. And when I heard the analogy that you had made regarding a telephone conversation, I was like, "That is a phenomenal way to describe it." Because I feel oftentimes it's hard to get buy in. And it's like, and I always am like, "Google also can't read it unless you tell them what it is." And for whatever reason, when I have been saying, think of it, describe it, like you're talking over the phone that clicks in a lot of people's brains because they're like, "Oh yeah, I know how I would describe something over the phone." I'm like, "Oh, hey Kelly, this is what my Jenny's ice cream looks like, guess what it tastes like too." And that is different than just saying Jenny's ice cream.

Ilana (17:47):
Yeah. Which a lot of people do that.

Rhian (17:49):
Right.

Ilana (17:49):
They're just going to say Jenny's ice cream and then they'll give you the flavor. And it's like, well, that doesn't do me any good.

Rhian (17:54):
No. Yeah. They're just two product title, I don't want to see that.

Ilana (17:56):
Yeah. And you know what that is, that's called stuffing your keywords.

Rhian (18:01):
Thank you and it's using templating software and technologies, which Google also doesn't like. I know we're here to talk about accessibility, but I just.

Kelly (18:09):
They go hand in hand.

Rhian (18:11):
Yeah.

Ilana (18:11):
And that's what it is. Right? That was my whole point of this, is that Google is the need for accessibility also. Yes, accessibility is incredibly important and every time I talk about it with my peers, I have a friend of mine who is visually impaired, and when I've said to him before that I'm like a soap box with this stuff, he literally is like, "Thank you so much, I appreciate the work that you're doing." Because there's no one out, I mean, there are people, but many people are not realizing the importance of this. So if you literally cannot grasp that there is a person out there that needs accessibility Google does too, Google needs this things.

Kelly (18:50):
Exactly. I love that, I've been really thinking about this lately. I know this is like the total tangent here, but I work in technology and I don't think that if I had worked in technology, that I would be even remotely exposed to what it means to be accessible. I may think of ADA, like the Americans with Disabilities Act and things like wheelchair access. But again, like we're in technology, you're running a store online, it goes well beyond, can somebody actually access your website? So it's just like, I don't know why this is something I've been thinking of, every single night for the past three or four nights, things I like to go to bed thinking about, I guess.

Rhian (19:39):
But it's crucial that we think about it because I feel like so many folks have this idea in their head of either what accessibility means, or what disability means, or what being differently abled means. I, for all intents and purposes move around the world, like someone who is able bodied, but I had brain surgery eight years ago and it impacts my ability to hear. And so oftentimes I'll go on websites and there will be things that I'll have to stop, and if there's any kind of cross conversation, if there's anything behind me, I literally cannot hear the website or the content, or TV, or if you're at a conference and there's, which we will get back to one day. But people don't consider that and especially because you assume perhaps, people who are at a deaf or partially deaf can read sign language, but that's not true. And I say that because I can't read sign language.

Ilana (20:46):
Yeah. I think there's a lot of assumptions and I think your guys are a 100%, right. There is this notion of, I have a vision of what someone thinks that a disability has.

Rhian (20:57):
Right.

Ilana (20:57):
They're in a wheelchair, they're blind and they have to use braille to communicate for example. The accessibility features that are across websites, the accessibility accommodations, not even within your website, but as Kelly had mentioned within the ADA, it goes so far beyond a standard definition of what you might think someone with a disability is. You have an aging population for example, if you're older your vision becomes impaired and I'm not blind, I could still see, but I absolutely won't be able to read not 12 pixel, but 12 point font that's even smaller, right? And so, when Kelly, you asked me other things that people could do, increase the font size, make it so that your minimum font size is at least 16 pixels.

Ilana (21:50):
And I'm emphasizing pixels because designers use points and they're not the same thing. Points are actually much smaller than they are in pixels. If even better use REM, if you're going to be that specific, because then it's relative to what your base font is. And those things then become a adjustable on various mobile devices and on your desktop. And that's really important if I'm looking at it from a perspective of an aging population, they might have their phones set to zoom really big. And if the font isn't relative to what else is happening on the screen, then I can't see anything that's happening.

Rhian (22:33):
And to go into REM a little bit more detailed, just to give like an example of what it is. Let's say your base font size on your website is 16 pixels. If you set a certain like heading, for example, to be the font size of two REM, that is two times 16, so it would be 32 pixels, is how it would appear. But the fact that it's relative means that as you, as you zoom, as you increase your font size, it increases at that same rate. So you're still getting the same experience as you should with everything skilled the same way.

Ilana (23:06):
The other thing that I wanted to touch on, when you're looking at ways to improve your site for accessibility, color contrast is a huge issue. And I see this, I do website reviews, you guys caught them tear downs. I do website reviews too. And so many times have I seen white text with this gray background? And I'm like, "I don't even know what that says, I have zero concept of what you're trying to tell me right now." And which we can talk about tools anytime, but using tools that help explain the contrast level and sure that visibly I can see the difference is really important. And that's not just a matter of am I visually impaired, if I'm outside and the sun is beaming down on my phone and I'm trying to make a purchase really quickly before I have to run someplace else, the way that the sun reflects on the screen changes how visible your text is when it has a poor contrast.

Ilana (24:11):
So ensuring a strong contrast isn't just about, can I, as someone who has a visual disability or maybe I have some visual impairments, it's also a need on a day-to-day basis. And that's what many people forget is that accessibility is not just about someone who you have in your head as has a disability, it's also for the greater population. Most people need these things, that's why there are things like fidget spinners, right? Fidget spinners were created to help someone with anxiety and be able to use their energy on that. And it's the same thing. Now, kids, my eight year old uses it all the time and she doesn't have any issues with disabilities or anything like that, but she loves them. But it's the same sort of idea. A lot of things that are created around accessibility are then pushed out to the greater public for this very reason.

Kelly (25:04):
So love to talk a little bit more, you mentioned standards at one point, and I kind of want to talk a little bit in detail about what web accessibility standards exist, because there's a level when it comes to e-commerce, there's a little bit of a gray area.

Ilana (25:22):
Yeah. So, I'm a frequent shopper on Facebook groups, if you will. And I feel like it's once a month, someone has said, I'm getting sued the ADA... " Someone had filed a suit for me against the ADA and everyone will make comments about, "It doesn't apply to you don't have to worry about that, it's only for 15 employees or more." And if you're under that, you're good. Okay. So let's talk about the ADA, for example, the American with Disabilities Act, was designed in 1991 around in-person, brick and mortar stores, for example, in brick and mortar businesses. And there is no definitive law right now currently designed for websites or interacting online. So the ADA does not necessarily apply to you as an eCommerce store. However, it absolutely applies to you as a business.

Ilana (26:25):
And regardless of whether or not you have X employees or whatever, you still have to make accommodations, you still have to abide by what is the standard of what's called WCAG or web content accessibility guidelines. The expected level that people are working with is 2.0 AA, which please look it up because I'm not going to go into huge in-depth as to what that means because it's a lot.

Kelly (26:54):
We'll put a link to that in our show notes.

Ilana (27:00):
WCAG is what most people are looking at with regards to accessibility standards. There is no law, there is no, I have to meet these guidelines in order for me to be accessible. I want to be 100% accessible online, and I'm going to accomplish these things that doesn't exist. So when you are looking at the ADA, it's a gray area, it's all gray and everyone can be at risk and everyone, regardless of your size needs to take it seriously.

Kelly (27:32):
I often see it. I actually like I've had clients also say, "Hey, I'm getting sued, why didn't you tell me this was a possibility." And well, we can get into a whole conversation about that. My point being Shopify, because this is these are standards, these are not laws. Shopify is working under the same idea here. So I see blame pointed towards Shopify. I see blame pointed towards the themes that you purchase, why aren't my themes accessible? They can't guarantee that level of accessibility because a lot of it also depends on what you're adding to your website.

Ilana (28:14):
Yeah. Let's talk about that first, again, first of all, when you sign up for Shopify, you basically waive them of all liability for anything around these lines. Same thing with your theme, same thing with your apps that you're working with, everyone is not liable, except for you, the store owner, you are the person making decisions on your store. You are the one that is held responsible if your website is not accessible. And you know what? Frankly, that might suck, but it's reality. So I actually had this conversation with a client today and I told them I was going to be bringing this up, but I'm not going to share who it is. But they have an app and the app that they're using currently makes their site inaccessible. And it is a basic functionality that I wish Shopify had, but they don't, the theme that they're using, doesn't do at the level that they need, so they have to use this app in order to meet these functionality that they want to have.

Ilana (29:16):
In order for them to do that, they are accepting that risk, that if they get sued, they are liable, nobody else is liable. And that includes Kelly and her team if they do development, they are not liable, because you the merchant, the owner are the one making decisions as to how you want your store to look. And that means making choices around your contrast, that means making choices around the design elements and whether or not they're accessible. That means using apps that are accessible. That means pushing back on your apps and on Shopify and I'm going to say this again, demanding that they become more accessible. I have had multiple conversations with the UX team at Shopify, and they're trying, they absolutely are, but what's happening is that as soon as you make changes to your websites, you make one font change, one color change. it's no longer in the themes responsibility, it's your responsibility.

Rhian (30:20):
I know it's prostrating because nobody wants to take the blame. Especially when you're served with papers, let's say you're being sued. Yeah, it is a personal attack to a level, because it is your business, it is your website, but it's something that you need to take responsibility for. I do hope that Shopify ads, like, as you said, "There's an app that makes your site inaccessible," that should be part of the review process. And so there are definitely things that Shopify could be doing in them vetting and the reviewing stages to prevent some of these situations from happening. Would you be willing to explain what the app does?

Ilana (31:03):
It's a pretty popular app, so I'm not going to. But I will say the reason why it's not accessible, what it's doing is it's using JavaScript to override everything that's on the page.

Kelly (31:15):
Okay.

Ilana (31:18):
For example, this is one fun way to test things. If you disable JavaScript, can you navigate through the site still? Can you use tab on your keyboard to go through and select different things? And if you can't do that, most likely it's inaccessible because of this app. And so with this app, even when I turn off JavaScript, what it should be doing is defaulting then, right? If I turn off JavaScript, it should default somehow so that I can still access the site and it's not doing that. And it's a hard problem to solve.

Ilana (31:49):
And it's expensive for the app to solve. I'm not going to lie about that, many people look at mobile first design as a common method of developing right no. If you look at it as accessibility first, meaning accessibility is top of mind when you're developing an app or when you're working on your website, or if you're marketing out externally and how you market the products out. If you're using a cause ability first in your designs, then you are at a lower risk of being held accountable, if something is going to happen, right? Because they can see that you're trying, you're working towards it and I'm not a lawyer. So please don't quote me on that and don't come back to me later. But when people see that you're trying, they're less likely to come after you, but you don't get to claim ignorance when all of a sudden something's broken and you don't know what else to do.

Ilana (32:40):
So understanding what apps do, understanding how they interact with your site is really, really important for you as a store owner to understand your liability. So I think, what people forget is that many app developers don't intend to do harm. And what often happens is a lack of ignorance on their part. And this goes for app developers, and designers and marketers, they just don't know, people are not educated. It's not an excuse, right? They still have to do these things and that's what you are here for. You're here to say, "Hey apps developer, hey marketer, I need you to do these things for me." Ultimately, the merchant is liable, so if the app developer can't do these things, then it's your choice as the store owner to either use them or don't.

Ilana (33:34):
But what I have found, and my husband is a developer, he's incredibly smart, he doesn't know the first thing about accessibility until I started saying, "Hey, you need to make sure that's built into your front-end for your merchants." And he had no idea that that was even a reality. So I think what's happened is that over the time developers weren't taught this for whatever reason, or didn't learn it. And I see Kelly's shaking her head, and I think it's really unfortunate. The only reason why I'm aware of it, is because of my background. And I have literally had conversations with people who are deaf, who are hard of hearing, who are visually impaired and they're begging for a solution. And I think there's just this disconnect between the end user and the people that get to make those decisions and know how, of how to implement these things. So I don't believe anyone is doing it maliciously by any means.

Rhian (34:31):
That's totally fair. And I hope if we have some app developers listening to us, that they perhaps take a moment to reflect on how they can make their apps more accessible and to make sure that they are in turn providing an accessible option to their merchants.

Kelly (34:47):
Rhian, are you reflecting right now?

Rhian (34:51):
No, we're good.

Ilana (34:54):
But I will say, I've done this sort of talk before on a different podcast. And I had app developers reach out to me and say, "Oh, can you consult for me?" No, go learn it, take time and go learn it and figure out how to implement it yourself. This is not how I make my money, I don't make my money on accessibility, that's not where my focus is. But the difference with me is that it's important to me, I make it a priority. I have learned how to make it work with what I need to do for my stores. Right? So when I build stores, when this app that we were just talking about, they were asking me like, I want to do all these things. And I tested it, and I turned off JavaScript and I'm like, "Oh crap, this isn't what you wanted, you told me accessibility was really important to you, here's the risk."

Ilana (35:38):
And then the store owner gets to make those decisions of whether or not they're going to take that risk. And another side moment here, but I've had people on Facebook also say, "Do you know how expensive it is to make an app accessible or a website accessible? What if I told you it was going to cost $20,000?" And I was like, "Do not lecture me, first of all, second of all, what if I told you that it's going to cost you $20,000 or more, if you go through a lawsuit." And she was like, "Oh shit, you're right."

Rhian (36:09):
Exactly.

Ilana (36:10):
It's the same thing, either you're going to pay the money upfront, and you're going to make it a priority right now, or you're going to make a conscious choice to ignore it and take the risk later on of paying way more money down the road. Because guess what? It's not just the onetime cost of putting accessibility first and then maintaining that accessibility. So it's not a onetime process, it's an ongoing, but if you get sued once and then twice, and then three times, that's not $20,000 that you've invested, that's $60,000 that you've invested now. So which one is it?

Kelly (36:45):
Exactly.

Rhian (36:46):
And for those of you who have never been involved in a litigation procedure, I have been and let me tell you, it is A, not fun, it is B very, very, very expensive and it's C very difficult to win. And if you do win you can sync, I mean, we're not talking tens of thousands, we're talking hundreds of thousands of dollars.

Kelly (37:15):
Hundreds. Yeah.

Rhian (37:15):
So to me, there's an easy, that's in my brain, especially knowing what it's like to have been litigated against. And everyone knows [inaudible 00:37:24] what she's litigated against? Let me tell you, we changed our name. I just think that people don't think that all the way through, right? They're like, "Oh, it's too much money up front." I'm always like, girl, let me tell you what will happen when you get hit with that, when you get served papers, because I know what it's like, and you don't want to be on the receiving end of any kind of litigation.

Ilana (37:53):
And I'm not trying to, fearmonger, it's a reality.

Rhian (37:56):
No I am.

Ilana (37:57):
Yeah.

Rhian (37:58):
But I'm not a lawyer. So don't take my word. Just know the attorneys do cost a lot of money.

Ilana (38:05):
But it's not even the dollar amount, think about it also, how much time did you have to spend on that?

Kelly (38:10):
In stress.

Ilana (38:11):
That is a time suck.

Rhian (38:12):
So much stress.

Ilana (38:13):
One of the things that I really wanted to make sure we talk about is the role everyone plays in build an accessible website. So we've talked a lot about the purse strings, right? Who holds the money, who gets to make those decisions based on cost, that's typically your investors or the store owner, If you don't have an investor or maybe your customers, those people who are asking for help, right? So maybe they're also holding those purse strings, but we've talked about money. The other side of it is the sales and marketing side, which we've talked a little bit about earlier as well. So your SEO for example, and how people are coming to your site, people are always telling me all the time I have all this traffic to my site, but no one's buying.

Ilana (39:01):
That could be a lot of reasons. One of them, could be, you have bad SEO, you're attracting the wrong people to your site. And if you work hard on improving your SEO and focusing on the SEO elements that also aid in accessibility, you're only helping yourself, okay? The other side of that is why people don't convert, could be the designers and developers that are on your store. So they need to learn how to build accessible elements, that might mean that you're using things like REO labels within your themes, for example, that might mean that you're picking the right contrast or the right font size, or whatever that is. But designers and developers need to educate themselves on what makes a site accessible and not accessible and how they can contribute to that conversation. I literally have this conversation every time I talk to one of my clients.

Ilana (40:01):
So you can't tell me that I don't get to make those decisions, that's up to my store owner, as to who decides that, I pushed back. Yes ultimately the store owner gets to decide, but I'm going to say, are you sure you want to make that decision? Because by making that decision, you are no longer accessible, but I've done my job, as the designer and developer to raise my hand and make sure that they get to be educated. So designers and developers, you have a role, but then you also have of your users, users play a huge role in what makes a site accessible or not. And the reason why I'm emphasizing that, which we talked about early, if you don't know if your site is accessible or not, one ask your users, ask them if they had any problems making a purchase.

Ilana (40:51):
If they ran into any hiccups, use tools like a Hotjar or Lucky Orange, for example, to watch what they're doing and see if there is something physically preventing them from clicking a button, or whatever that may be. Also I've actually watch things on Hotjar for my site and I've been able to see errors on my page that I never noticed before, because I'm too close it. So asking your users, how things are on your site, if they were able to access things, but also test your site. You can use various tools to see if the code is there, but actually use your site, go through and make a purchase, and try to do it from the standpoint of I've never been to my site before, don't know what it looks like. I'm going to just pretend like I'm someone new.

Ilana (41:44):
But if you can't do that, hire someone to do it for you and ask someone to do a usability test on your website, have your grandma or your neighbor who is older, go through your site and can they actually navigate things. So literally every one can play a role in what makes us accessible or not. And if you tell me again that a blind person doesn't buy art from me, I'm going to lose my shit, because they probably are trying to buy from you, but they can't. And you haven't asked them if they want to buy from you.

Kelly (42:16):
Exactly. So I actually want to dig into some other tools, any other additional accessibility tools that you have.

Ilana (42:23):
Yeah. So the thing that I use like daily is, webAIMS, Contrast Checker. I don't know if you've ever heard that or not, but, it literally allows me to type in the hex color for my texts.

Kelly (42:42):
Oh this one. Yeah.

Ilana (42:43):
And then my color for my background, I use this daily.

Kelly (42:48):
It's such a handy tool.

Ilana (42:50):
It really is. And I've also seen, I think there's some apps that have this built in as well. There's a lot of accessibility apps that also within Shopify that have these things built in. Okay. Actually, I'm going to talk about that for a second. The apps that are on Shopify that say, "Put this on your website and you'll be fine for accessibility are not a catchall."

Kelly (43:13):
No. And I've heard people who have used some of those apps before who still get who still get sued.

Ilana (43:21):
Yeah. And that's the thing is, I talked before about testing and there are two different ways to generally two different ways to test your site. One of them is technology and that's using various tools like a webbing there's AXC, which you can do A-X-C to see if your site is accessible and it'll show up all the areas that might pop up if something's not going to be considered accessible or not. But it's also usability, accessibility is not just technology wise. Can I kind of add this to your site? Accessibility is also like, can a user actually use your site? So it's not just technical. It's also actually going through and testing the site. But the contrast checker is something that I use all the time. I would also say that, there's another one and I can't find it right now. I was trying to find it earlier, but I haven't been able to locate it.

Ilana (44:19):
There is one that you can upload an image and then put text over it and it'll tell you if it's accessible or not.

Rhian (44:29):
That's pretty handy.

Ilana (44:30):
And I am going to try to find it because I usually have all these things bookmarked, but it was so nice, because as I was mentioning before, when you have your banner image and the text just so happens to hit a gray spot and it's white text on gray background, but the rest of it is dark. You don't necessarily know that it's going to be a problem. It's called brandwood, B-R-A-N-D-W-O-O-D.com. And I will, I will send you the link so you can put it in the show notes as well.

Kelly (45:01):
Perfect.

Ilana (45:01):
But, it is a really cool because I could upload an image and then I can put text over it and it'll tell me if it's compliant or not.

Kelly (45:09):
There's I don't remember the word for it. A11Y is accessibility because there are 11 letters in between eight and Y. That in itself is not accessible.

Rhian (45:21):
I always thought, A meant Ally, like you were being an ally, like literally I had no idea that that was... I know what meant. But-

Kelly (45:32):
So another one that you you often see is internationalization I13N.

Ilana (45:36):
Yeah.

Rhian (45:36):
... That's absurd. Also that's such a big word.

Kelly (45:40):
Exactly.

Rhian (45:40):
You say it [inaudible 00:45:40] fast, you can't.

Kelly (45:43):
You want to bet.

Rhian (45:43):
I'll do it right now.

Kelly (45:45):
Internationalization, internationalization, internationalization.

Rhian (45:47):
Buying chicken in [inaudible 00:45:50]. Fine.

Kelly (45:50):
Boom, I'm glad we had this moment. I would say let's actually transition into store shadows now, because we've been talking about how scary accessibility can be, but it is, I would say to summarize it's something worth spending your time on. It's something that's worth investing in and it makes the web a better place.

Ilana (46:13):
Yeah. And that's my thing, right? Is I'm not trying to fear you into making these changes. My hope platform, if you will, is that I've literally had people beg me to make accessibility changes because they want to purchase from you. They want to buy from you and, oh, here's the other really cool things, before we wrap up. Let's pretend that your competitors are not accessible, but you are. There are 20% of the U.S and 15% worldwide, people have a disability. So if 20% of the people can access your site, but they can't access your competitors, much more revenue is that in your pocket?

Kelly (46:58):
Am I supposed to do that right now? Okay.

Rhian (47:00):
It's a lot.

Kelly (47:01):
It's a lot.

Ilana (47:02):
It's a lot.

Kelly (47:03):
Also you say, pretend your competitors are not accessible. It's reality.

Rhian (47:08):
They're probably not.

Kelly (47:09):
Probably aren't. Yeah, exactly. Okay. So let's do some store shout outs. Ilana you go first, what are you shouting out this week?

Ilana (47:18):
I am shouting out. It's a website called A Kid's Book About, and it's this gentleman here in Portland, Oregon who wrote a book called, A Kid's Book About Racism. And since then they have a whole bunch of books on their site now, anywhere from creativity to anxiety, to I think there was like women's rights and COVID-19, there's a lot of stuff. But the thing I love about this site is it's not really a kid's book to read.

Ilana (47:51):
I mean, they can read it on their own, but it's meant to have your parents and the kid read it together and then discuss. And it was one of those things I actually bought, A Kid's Book About Racism a few months back. I think it must have been in May or June. And I sat down with my eight year old, and had a whole conversation about racism. And those you can't see me y'all I'm white as white could be. I am a cis female, which means I was born I'm female and that is my gender today. And I am married to my beautiful husband. I could not be any more white on white, on white and the standard thing that people expect, right? But when you have conversations around racism and they have books coming out on systemic racism that I'm super stoked about, but I get to have these conversations with my eight year old and we get to open up and have real world issues presented to her and not hide behind it.

Ilana (48:53):
It is amazing. So I highly encourage everyone check this out. Their site's really simple to navigate. And it's just one of those where I'm always like take my money. Because every time they release a book, I want to buy another one.

Kelly (49:05):
I love that. Rhian what is your story of the week?

Rhian (49:09):
Mine for the week is Kotn, K-O-T-N.com. And the reason I chose them is not only is their store beautifully designed, they also build sustainable products and on their landing page, it talks about traceability where the product comes from, it shouldn't be a luxury but a standard. And here's what I think is really cool. And this is direct. That's why we built cotton from the ground up working directly with every step of our supply chain, starting with the raw cotton. So they went all the way back the supply chain to make sure that their product was sustainable ethical and I think that's really cool.

Kelly (49:56):
I love that. So my story of this week is bottle rocket hot sauce. I bought some hot sauce and it turns out that the guy who owns this company lives 20 minutes from me as well. So it's a local company I'm supporting local business and they sell four different kinds of hot sauce, being hot, hotter, hottest and béarnaise sauce.

Rhian (50:21):
What did you get?

Kelly (50:23):
One of each.

Rhian (50:24):
Can you just do them like shots of them and will you make a video and send it to me?

Ilana (50:33):
Yes.

Kelly (50:35):
No.

Rhian (50:37):
Oh fine then.

Kelly (50:39):
I have my limits and that is not part of the story.

Rhian (50:43):
Okay, we draw our lines there. I see. I see. Well Ilana, thank you so much for joining us and we have an important question to ask you, where can we find you on the internet?

Ilana (50:53):
Oh yes. So please visit me, I'm on Twitter. It's Ilanadavishr, I-L-A-N-A or you can visit me @alannadavis.com.

Kelly (51:04):
Amazing Alana, thank you so much for joining us today.

Ilana (51:08):
Thank you.

Kelly (51:08):
I love all things talking to you forever. And as you very well know Rhian and I love to tell people about how to explain something over the phone. We bring that up all the time, whenever we have an opportunity to, so-

Ilana (51:25):
Thanks.

Kelly (51:25):
... thanks again for joining us.

Ilana (51:27):
Thank you.

Kelly (51:32):
Thanks for tuning in and thanks again to our sponsors for supporting this episode. We now have a YouTube channel. Visit us at youtube.com/commercetea for doing friendly Shopify Store Teardowns. And I think you'll really enjoy them. If you like this podcast, please leave us a review on Apple Podcasts. We would love to see your feedback. You can subscribe to Commerce Tea on your favorite podcasting service. We post new episodes every Tuesday, so grab your mug and join us. See you next week.

Rhian (51:59):
ClockedIn as a time clock for Shopify with ClockedIn your team members can easily clock in and out of their shifts from anywhere, you can manage your team's hours as they work remotely with an intuitive interface that can be used from desktop tablet or mobile. Check it out @clockedin.io or in the Shopify App Store.