How To Make Your Website More Accessible With Samantha Mabe

TRANSCRIPT AUTOMATICALLY GENERATED [00:00:25] Diane: Hey, Hey, today's guest. Samantha Mabe is the creative director and designer behind Lemon and the Sea where she creates websites with beauty and brains while she's passionate about all things conversion, she believes accessibility is also key. Hey, Samantha, welcome to the show. [00:00:38] Samantha: Hi, thanks So much for having me today. [00:00:40] Diane: So let's kick off with a quick intro to you and your business. [00:00:45] Samantha: I am Samantha, as you said, and my business is lemon and the sea. I do Squarespace website design for all types of creative service providers and coaches. And. Has been a lot of fun. It's been a lot of pivots over the years, but I have found something that I really love and that I think can really help people in their business. journey. [00:01:10] Diane: so people always tell us to think about like websites as our business home. And we've become increasingly aware over recent years that we're not always doing the best job of inviting everybody in. We're great with pretty branded photos and a sexy logo and dazzling copy. But we forget that not everything works for everyone the same way it works for us. So what are the main areas you look at when you're thinking about accessibility on our website? [00:01:37] Samantha: So I look at a couple of different things. Okay. You have to remember that accessibility covers so many different types of things. So it might be people who are hard of hearing or, but they also may just have slow internet. So things don't load very well for them. It's not just for the visually impaired or the hard of hearing. It's so many different aspects of. Life and how things work on the internet that affects accessibility. So when I go to somebody's website? what I really want to do is make sure that anybody who lands there can get the main ideas of what you do and how they might be able to work with you. Even if your images don't load or the graphics don't show up for them. [00:02:32] Diane: Okay. So it is a bigger spectrum, but I liked what you said there about the key points, because a lot of people, all one man shows or they've had their websites designed for them and they've got very limited ability to tweak and change them. And so to think of this huge spectrum of accessibility that we need to consider can feel like a mammoth project. So are you thinking of things like if the graphics doesn't load that there's the kind of texts that tells you what the graphic is? Or are you thinking like, Hey, don't put your key point only integration. [00:03:05] Samantha: Yeah. So both of those are really good points. The things you kind of want to think about when it comes to images is that most platforms will let you add what's called an alt image tag. You want to name that? Something that is a picture of the image. It's not a place to just keyword stuff, things, it should be a representation of what the image is. If it won't load for somebody, it's also a really good practice to not create graphics with the text on them. So instead of. Creating a graphic in CAMBA with your headline written on it, and then uploading it to your website. You want the image in the background, and then you actually want to type in that headline so that a screen reader can read it so that it will load no matter what. And that makes it more mobile friendly because it's going to resize. It's not going to cut stuff off when people are on a phone or an iPad or a different screen size. [00:04:04] Diane: so is there a top 10 things that everybody should think about to really practically go. Okay. I'm going to go and look at my website. And work out where it's maybe the least accessible and the things I should fix that are going to have the most impact [00:04:18] Samantha: Sure. I have six main things that are pretty easy fixes for most people. If you can go in and just makes a cup, make a couple of tweaks to your website, you might not even need your designer to do these. The first couple have to do with legibility. So just the ability to read your website when somebody comes to it, and this is important for anybody, it doesn't matter who it is. That's coming to your site. The first thing we want to consider is the size of your font. So if you are using really small font sizes, it might look nice in your design and you might be able to read it, but other people are not going to be able to. I like to tell people to use at least a 16 point font. Bigger than we're used to typing our term papers in, but that is what is going to look best on screens and the most legible for people. And it just gives a little more breathing space. When you have super long paragraphs of text on your website, people aren't going to read them anyway. So bumping up that font. It's good for having people actually pay attention to your content too. And the other thing to consider with legibility is your color choices. So especially if you have a, you want to look at your background color, and then your text color in front of that. So if you have a white background and a really light gray, Not everybody's going to be able to read that you want to make sure there's a high enough contrast, and there are actually specific guidelines for this. But that can be confusing for people. I like to use a tool called web aim. It's w E B a I m.com. You just type in the code for the color code for the background and the foreground, and it tells you it's good or it's not good. And then you can adjust from there. [00:06:16] Diane: Fab. [00:06:17] Samantha: Yeah, and I have a two and a half year old and we read a ton of books. And I, now that I'm paying attention to this in my design world, I look at it in these books and I'm like, that is a dark blue background and black text, and nobody is going to be able to read this story. [00:06:35] Diane: We've all been taught to think about how pretty does it look? Not necessarily how usable it is forever. [00:06:42] Samantha: Yes. And the thing you have to remember is now Google has changed their algorithm a bit. So when it comes to search engine ranking, it's actually looking at some of these factors. It's looking at how user-friendly your website is because it knows that that's important. It doesn't mean you're going to be unable to be found, but having good user experience through accessibility will, can help you rank higher. [00:07:10] Diane: okay. So we want to make sure that everything's really clear with font size and with color choices. What's the next most important fix [00:07:17] Samantha: Okay. So the next two are like, we already talked about the metadata, the alt tags for images. You want to make sure that you've got at least on the main pages. So start on the main pages of your website and any image that you have go in and add the alt tag, a description of the image. If it does have text on it, then at least write that text in the alt tag so people can see. If you can set it up so that it's an image with actual type in front of it, that's preferable. And then you can go back and do other pages. As you have time. This is all about just making incremental progress. Instead of feeling like you have to do a total overhaul, [00:08:01] Diane: Would you do that? Even if you're using the picture purely decoratively, you know, to break up a sales page, for example. [00:08:07] Samantha: you don't have to worry about it so much. I like to include an alt tag just to have it there so that it doesn't just say DSE 0, 0 11 or something, but it's not as important if it's just a decorative image. These are more for images that are relevant to your content. So if it's a screenshot of something or a workbook that you have in your module, you want to make sure that you're telling people what that is. And then the next piece of kind of. What I liked it's accessibility under accessibility is captioning and transcripts. So if you have any kind of video on your website, or if you have a podcast, you want to give people a secondary way to consume that. So if you have video, you want. Captions on it that they can turn on or off. If you have a podcast, you can put a transcript on your website. That's easy for them to read. And again, these things, you know, they can help with SEO if you've got a transcript, because it's got all those keywords now on your website, but it's also helpful for people who would rather read than listen. And there are many different ways that people approach this. Sometimes they've just got really extensive show notes. Sometimes it's an actual transcript that you can open. You can do what makes the most sense for you. But it's important to have that way of consuming content for people who need it. [00:09:35] Diane: I think also transcripts have for me, I use them. If I've listened to a podcast episode, maybe I've been out for a walk and I'm like, oh, that's a really interesting point. I want to come back and revisit it. It's easier for me to search the transcript for it than to dig through a 30 minute podcast episode, for example. So I think. People who are happy to listen to the podcast is still going to find a use for that transcript [00:09:59] Samantha: Yes, absolutely. And the searchable factor is a huge one. People are not going to usually go back and relisten to a whole podcast episode to find something, but if they can easily search for it, then they might do that. [00:10:13] Diane: I feel like some of these accessibility options make your website a better conversion to. As well as making it more accessible. [00:10:21] Samantha: Yep. That's absolutely true. Just accessibility in general is good design and it's good conversion because the more people that you can allow to. Use your website and get all of your content the better, because there are a lot of people who want to work with you, but maybe they can't listen to a podcast all the time. Maybe their kids are screaming in the background and they'd rather read a blog post. You never know what it is, but it's just, it makes good business sense to take the extra time and make that effort because it's going to pay off. [00:10:59] Diane: so we've done legibility, we've talked about color. We've talked about transcripts. We've talked about tags on our images. What else can we do? That's fairly straightforward, but it has a big. [00:11:10] Samantha: So the third kind of category is usability. Thinking about how people use your website. The first one here is buttons. So this is a big thing for people. Always want our websites to look really clean and branded and conversion. Copywriters will tell you this too. Your buttons need to stand out if you want people to click on them. So they should be. A color that is different from the rest of the page, that grabs people's attention. It also makes it easy to find. You want to make sure that the font again is big enough and easy to read that the contrast is high enough to read. So those goes back to the legibility, but you also want to make sure that it actually looks like a button. I think this is not as much of an issue now that a lot of us are using platforms that have prebuilt buttons. Make sure it's an actual button, like a rectangle or a circle, something that people understand they can click on and it will take an action instead of a link or even an image. Sometimes people use images instead of buttons. And that is not as effective because people know what a button on a website looks like. And so you want to fall in that same kind of standard of the industry. [00:12:33] Diane: and I guess if your user is having an issue with your images loading, you don't want them missing how to connect with you [00:12:40] Samantha: absolutely. The other thing to think about with buttons is what you write on the buttons. So. If you are writing your call to action, you want to make it clear what people are going to do next. So you can still do something like I want to get in touch with you. It doesn't have to be just if you click this button, this will happen. But you also don't want to use something really generic where they're not sure what's going to happen because people. When they come to your website, want to know what that journey is? And if they're using something like a screen reader, it's going to read that button. It'll tell them it's a button, but they need to know. okay. That's, that's where I want to go as opposed to somewhere else on the page. [00:13:24] Diane: That makes sense. If it's something super creative and hilarious and the screen reader reads it to them, they're like is this just part of the copy? Okay, great. Keep going. Where are these buttons? [00:13:34] Samantha: Absolutely. And then the sixth thing is just to think about your, the flow of your website. So. When somebody lands on your website, what do you want them to do? How can we make it as easy as possible for them to take action? How can we direct them to the next step that they are interested in without them having to search through your menu and your footer and everything else? So. I like to do this in two steps. The first one is just think about your website journey. What does that mean? Action. You want people to take and then how do they get there? So they might land on your homepage. Then they're going to go learn about your services, then they might book. So those are your steps. And they've got that button. The second part of thinking about the flow of your website is the actual purchasing or. Completing an application, depending on what you're doing, how easy is that for people you want it to be as few steps and as a little information as possible a so that you don't lose people along the way and B, so that it's easy for anybody who is having some accessibility issues, for whatever reason that they can do that quickly. So I had a client who. By the platform that she was using, it was like a six step checkout process before they actually got access to their course and you're going to lose people. So we went in and we said, Okay. when people want to buy, they need to be able to click a button, fill out name, email, credit card information, hit the buy button, and then. They might have to wait for an email to actually get access to that course, but it shouldn't be six different things that are coming into their inbox or whatever else we want to make that as quick and simple as possible. Even if that means that maybe you have an application form that you usually ask 10 questions, shorten those, get the information you absolutely have to have. And anything else you can get later if you need it. [00:15:53] Diane: So when you say as little information as possible, I just want to clarify. So if they're going on to a checkout page, you mean they need to fill in as little as possible to do the buy. It doesn't matter if you have here's, what's included as a list on the page, it's more, the amount of inputs you need from them is this little. [00:16:11] Samantha: correct. So on a checkout page, I have had people asking me. I don't know, they ask for a lot of information about their business. If you don't actually need That just get, you know, name, payment information, give them a check box to sign up for your newsletter or not. And let them buy, instead of asking a million questions, because you're trying to collect information, it's just going to slow people down and some people are not going to want to fill it out. [00:16:41] Diane: That makes sense. I always get really irritated when I have to do even a two-step checkout. So somebody six step checkout, I would have been gone We've talked about. A lot of things people can change and I'm betting the people are thinking, okay. Yes, that's a lot for me to change. I've got time to make one change. Is there something that is your absolute pet peeve that you would be like this? You have to change this immediately. [00:17:00] Samantha: I think my biggest pet peeve is the color of your font. If you can only make one change, make sure your font is a dark enough color that people can read it. [00:17:11] Diane: And that should be fairly easy to do, right? Because you should have your brand. That I'll hopefully in there. And you can just plug them into the tool. And check that really quick. [00:17:19] Samantha: Yep. And you might have to make a little bit of an adjustment. Pick a darker font color then is in your brand colors and that's okay. It's better for people to be able to read it then everything beyond brand. Exactly. But that's what I would do. And if you've got to go in, check that for your main font, if you've got images on your header that are a dark color background, just make sure they're dark enough and that the white font will show up. So that is the main thing that I am telling people all the time. Like it's a quick fix and it makes a big impact. [00:17:53] Diane: And usually you can change that at a website level. So I know that we've talked about accessibility as a conversion tool, but. we've probably only like vaguely tapped on the conversion side of websites. And I don't want people to get off and think, well, I'm going to make all of these changes while I'm in there. I might as well be thinking about conversion as well. Is there something that you have as a resource that they can grab that they can think about conversion and accessibility at the same time, in the same way? [00:18:19] Samantha: Sure. So I have a PDF guide that is five updates for a higher converting website. And it's five quick things you can do. It should take you under an hour to do all of them. And you can get that@lemonintheseed.com slash five updates. And it's the number five. And then the word updates. [00:18:39] Diane: I will link that as well, so everyone can find it easily. Oh, so many things to, to consider and think about. I'd never even thought about the the loading of graphics on my website at all. So I definitely have to have a little mini project for myself to finish up. I always like to ask my guests a couple of questions first up. What is your number one lifestyle boundary for your. [00:19:01] Samantha: As I mentioned, I have a two and a half year old. And so I have very limited childcare hours, which means I have very limited work hours and I hold those boundaries pretty tightly. So my clients know that if they email me after a certain time, they're not going to get a reply back till the next day. And my kid knows that if mom is upstairs working in her office, he's got a. Grandma help him instead of me. So that has been, had a huge impact on my business and has been really good for me. And for him to really say these are the boundaries. And then once it's our time together, we get to hang out and adventures. [00:19:44] Diane: it's the side effect from the pandemic that kids have really learned, Hey, like my parents have a job When there's the sign on the door or the door is shut, don't come in and interrupt. I'm always excited when we see a kid pop up or a dog pop up, it's always a welcome break, but I think it is an interesting boundary from a kid perspective [00:20:03] Samantha: yeah. We've I mean, we've had so many conversations. Mom has to go to work, why? Well, mom gets to help people and she has to make money. Why Do you have to make money so that you can have food and clothes and all the toys? And I think it's good for him to learn early. You can do something that you love and make money. And, but you do have to like set a time aside the time to actually go do it. [00:20:27] Diane: and that you can then have fun outside of those hours by. Okay. Finally, what is the worst piece of cookie cutter advice you've been given as an entrepreneur? [00:20:38] Samantha: Oh man. There's a lot of cutter advice out [00:20:41] Diane: Yeah, this is, this is always the one that I have to say to anybody. You could only choose one. [00:20:46] Samantha: I think the one piece of advice was to try to make an opt-in for every podcast episode. So I have a podcast and I've had people who bake podcast opt-ins for every single one. And I tried that for like a month and it was, it was. It didn't work for me. It didn't work for my audience. And I just felt so overwhelmed and was like, I can't do this. I don't have time for this. Nobody wants this many downloads in their inbox. So throwing that out the window and really just trying to give value was so much helpful for. [00:21:28] Diane: Yeah, I definitely, when I started the podcast, there were definitely like the first few episodes where I was like, oh, you could use this option or you could use that option. And then I kind of found myself almost. Not being able to create content because I was so focused on, well, what's the opt-in at the end of this. Instead of just being like, Hey, I'm going to turn my mic on and deliver some value today. So, yeah, I wholeheartedly agree with you on that one. [00:21:49] Samantha: And I think people understand that this is a way of delivering value and if they want other things from you, they know how to find you. [00:21:57] Diane: I mean, we will put it all over our show notes all the time, right? Oh, this has been so good. So many things to think about little mini website project for me, I think for the end of the year, what's the best place on the socials for people to. Tell you their stories or the things that they're struggling with or show you. Awful color combinations. [00:22:16] Samantha: You can find me at lemon and the see on Instagram. That's where I usually hang out. It's also lemon and the sea on Facebook, but let me know, you know, what you're struggling with. I'm happy to take a look at things and give some advice and just answer question. [00:22:31] Diane: awesome. you so much. This has been fab. [00:22:34] Samantha: Thank you so much for having me.