What Is Website Accessibility?

Brett Johnson [: 00:00:13

Welcome to the Circle Sessions featuring the Circle Of Experts. The Circle Of Experts are Yasmine Robles from Robles Designs, Tonnisha English Amamoo of TJE Communications. And Don The Idea Guy. I'm Brett Johnson from Circle 270 Media Podcast Consultants. Each week, one of the Circle of Experts joins me to talk about critical aspects of growing your podcast. We focus on marketing, social media monetization and website design and the implementation of all these together. This week. Yasmine is here from Circle of Experts. Yasmin works alongside clients to design a website that's driven by strategy, looks amazing and you can actually use to grow your podcast and then in turn your business as well. Yasmine, thanks for joining me today.

Yasmine Robles [: 00:00:55

Yeah, I'm glad to be here again.

Brett Johnson [: 00:00:57

We wanted to discuss website accessibility and I know that term is not foreign to podcasters because we're going to talk about this a little bit into the episode about transcripts and the accessibility for those that really can't hear the podcast but want to read that opportunity for a transcript. But there are a lot of other pieces to accessibility for website design and the user for the website that you and I want to go over, but maybe we probably should go over what the definition of what website accessibility is first.

Yasmine Robles [: 00:01:31

Yeah, so just to jump in the W3C, which stands for the it's basically the Web Accessibility Initiative. It's a free resource. So you can Google W three C, but they define it as basically websites and web tools that are designed and coded for people with disabilities. So this can be apps and websites and a lot of them currently have barriers. So if you are, for example, using autoplay videos or even the podcast episodes, people might not necessarily be able to hear those, but it's a layman's terms. It's basically the goal is to make the web accessible and for the benefit of individuals, businesses and society. We just want to make sure that we are including these folks because let's say, for example, you have a shopify store, you want to make sure that it was designed with accessibility in mind so that people who might be a little maybe have some visual disability, they can still go through and shop. And there's lots of people, not just in this country but in the world with some sort of disability. A few of those disabilities are auditory, cognitive, neurological, physical, speech and visual. And this isn't just a tool for it's not like it's just for people with disabilities. It also benefits us that don't have these limitations. So, for example and I've done a lot of these myself when I'm using a smartphone or my smartwatch the smart TV and other devices, anything with a small screen. It's important to have something that's mobile friendly or different modes to use the information situational limitations, which can be, for example, if I'm in bright sunlight or I am, let's say, in a library and can't necessarily listen to an audio or watch a video, is there a transcript or a blog article under that? And then people with slow internet connections. So recently I went on vacation, had to drive through the mountains and just being bored. And on my phone there were some websites or images that wouldn't load. There was no alt text, which we'll get into, and I couldn't tell what was going on on certain sites because there was just no signal or not enough signal. And according to the Bureau of Internet Accessibility, Inc. No website can ever be 100% accessible. And I've tried. I make websites for a living and it's just incredibly hard because you can't touch all of these. And it also depends on the platform you're on. So if you are, for example, on a shopify site because you have e commerce and you're hosting your podcast, it's probably at some point going to be dinged for some sort of accessibility issue. WordPress squarespace, they all will have their quirks. But the goal is again, to make sure that you are trying your best to make it as accessible as possible. There are a couple levels that our goal is basically to AAA level, but there's level AA and then AA, which is the most strict. Usually I go after the AA. Conformance. And as a downside, some companies, at least from anecdotal stories, there have been law firms that will try to find sites or companies that will try to find sites that are not accessible, that are smaller mom and pop sort of sites and will go after them for not being accessible. And I'm not a lawyer, but what I've heard is that they can find someone, for example, with a visual disability, say, can you see this site? Basically the person says no and then there's a lawsuit. Usually, even if you win the lawsuit, as a business owner, you still have to pay legal fees. And these can range from like $5,000 and up. And it's just very hard for a small business to be able to scrounge that kind of money and just say, yeah, I'll pay $20,000 for this lawsuit, no problem. So just a couple of things to keep in mind about why you should be watching your website when it comes to accessibility.

Brett Johnson [: 00:05:41

All right, well, you're kind of painting a picture that maybe you could lose some sleep at night over this. Maybe. But I think hopefully what you're painting here is if you do what we've talked in previous episodes of doing the best practices to make your podcast the best it can, or I should say your website the best it can be, you may be answering these questions already to a certain degree.

Yasmine Robles [: 00:06:06

Yeah, and I don't want to scare anyone. It's not like you have to toss your website aside and start over. But it is good to keep in mind moving forward as you're building out your site as you're adding more podcast episodes, blogging, adding videos, making sure that you are supporting or at least keeping in the back of your mind these accessibility issues and doing some checks and balances. Every so often, what I'm going to do is give you a list of ways you can audit your site, starting with images. So alt text, and we've talked about this in previous episodes, I don't know how many times, but alt text or alternative text is basically the text that's hidden behind images. You can think of it as a description of what's on the image. Now, this is great for people without disabilities when the image doesn't load because it'll show that text. And I can get a better idea of, oh, this was an image of Thomas Jefferson. But if that alt text is not filled in, i, as a user, cannot read what was supposed to be there for SEO purposes. The bots cannot read what that image is supposed to be. Even if the image shows up. Now for someone with disabilities, their screen reader is going to read that alt text or the file name and it's not going to be pretty if your alt text ends up being the default, which could be, I don't know, IMG three, three, four, it could be hieroglyphics.

Brett Johnson [: 00:07:37

Of just letters and numbers. I've seen too.

Yasmine Robles [: 00:07:39

Yeah, so you want to make sure that the alt text is filled in because it's what's going to be read. I've even done the thing where I might get an email from someone and I'm just not for some reason in the mood to read it myself. So I'll ask my phone to read it for me and yeah, it'll go through. And whenever there is a weird image or an attachment, it'll read the file name when there's an article on a website and every so often there might be an image, it'll read the image. So it'll read me the article in its little robot voice, but then it'll go through the image and the image will be something like something random that has nothing to do with the article. So it's not helping your user, it's not helping your SEO purposes, and even people without disabilities, it's not supporting them. And as a side note, and I know again, we have mentioned this multiple times in multiple episodes, but avoid images with text within them. So images that have the text embedded. Useful for social media, yes, but not useful for your website. You want to avoid that because if the image doesn't show up, nobody can tell what is on it.

Brett Johnson [: 00:08:50

Is there any way that you can, I don't know, preview what that accessible item would look like on a screen for a person that's using it in that way? I don't know how to explain that or how ask the question better, but that you post something up and you're actually seeing it as that person would see it that has the visual problems.

Yasmine Robles [: 00:09:20

Yeah, there's some tools we'll go over, but also if you just for imagery as a quickie, you can kind of, let's say you're creating something on Canva, squint your eyes a little. Just kind of if you aren't visual. I don't wear glasses, so I try to squint my eyes, step away a little bit from my screen, make sure that I'm seeing it at whatever I'm creating in Canva or Photoshop, that I'm seeing it at what the actual size is going to be, not zooming in. And so that kind of gives me a really quick and dirty way of, okay, well, the color contrast, it's kind of blending in. I can't read the text. Same thing with your site. You can do that. And then there are tools that we'll talk about that you can actually, for example, Google. You can put the URL in and it'll tell you if it is accessible or good, good.

Brett Johnson [: 00:10:09

Now, next you wanted to go over text.

Yasmine Robles [: 00:10:11

Yes. So your text just a few key points to keep in mind. Your text should provide, be informative, and have unique page titles. And so page titles are like, let's say if you Googled hamburgers in Columbus, Ohio, the page title is the blue link and the name of the page that shows up in the search results. It's also the name of the page that will show up. Usually I have too many browser tabs open to see it, but if you hover over that tab, it's the name that's going to pop up there. The page title is used for SEO purposes by bots to gauge sort of what is this page going to be about. And your people with certain disabilities will also be utilizing this, whether it is with screen readers or other tools that they might have at their disposal, to figure out what the page is about without necessarily having to kind of scrounge through everything that's in it. You want to make sure you're using headings to convey meaning and structure. And what this means is that if you've ever done one of those high school essay outlines where it's like number one is a certain subject, and then you have a little indentation and letter A and so on, and you're kind of outlining everything that will go in your essay. Think of your page and the text within the page in that way where it needs to be organized, it needs to be separated with headings should have some bullet points, make things easy to read, short paragraphs, make sure your text is actually giving information, and that the link. So if you've ever clicked on a little hyperlink within a paragraph, that the link. Text is meaningful. So you don't necessarily just want it to say click here. But you wanted to say, for example, if I'm sending you a link to my latest website article about accessibility, I would hyperlink the part that says website article about accessibility and link that to the article. So no matter what, they know what they're clicking on because it might not show up with whatever tool that they're using. Yeah, make it easy and readable and easy to understand. So overall, these things that we just talked about, the images and the text, it's basically to make it super easy for anyone with or without disabilities to go through your content. It's important for SEO as well. So even if you're not thinking about accessibility, keep it in mind because bots are looking at this and your user is not going to want to see a very unorganized transcript or article about your podcast episode. They want to make sure they can easily skim through it and easy to understand.

Brett Johnson [: 00:12:53

I was just going to say, everything you mentioned here for images and text is exactly what, as a plugin, Yoast SEO would tell you, you didn't do this, you didn't do this. So really, if you're already doing these two sections right now, you're okay. You're doing the right things. Anyway, though. You were playing it for Google, but you're actually helping some people that have some issues seeing, hearing, and need that accessibility level cranked up. You're doing it already for them, which is great. Yeah, there are some keyboard inputs that I never thought about. Go over those with accessibility.

Yasmine Robles [: 00:13:32

Yeah. So keyboard input, if you think about your tab key on your keyboard, you can usually, depending on the site, start tabing through the navigation and kind of tab through the entire page. And this is useful because some people cannot actually use a mouse, and many older users actually have limited fine motor control. So it's easier to tab through the page. And even I do it where if I'm going through a form or something, I can tab through the entire thing and kind of fill it in that way without having to use my mouth. And when you limit the capability of people being able to tab through, you're cutting out a part of the population that actually could buy from. You could utilize or listen to your podcast, and it's just not a functionality that a lot of people think about because they can use a mouse. But imagine not being able to use that at all, or your trackpad on your laptop and then try to go through a site and it's pretty hard sometimes on certain ones.

Brett Johnson [: 00:14:34

And then I mentioned earlier transcripts for audio. That has been a discussion now in more detail the last two or three years, namely because of the accessibility as well as the opportunity for Google to really know what's being said in your podcast. But there's also a price to that. Any AI that's transcribing, there's some money involved, unless you find some free sites that will transcribe rough, that sort of thing. But let's kind of go over again why it is important for the transcript, for the audio.

Yasmine Robles [: 00:15:12

Yeah, so not just for audio, but also if you're doing video. So Podcasting, YouTubes and YouTubes. YouTube. Anything like that. You want to make sure you're providing the transcript at least, because some people, whether they're at work and they're looking at an article that they shouldn't be looking at, they don't want that video to play, or they actually do not have the capability of either seeing or listening, then your transcript will be very important. Yes, you can use certain for example, there's a few other tools out there, I think Otter is one of them, which might provide a free transcript. But make sure you go through it and make sure that it's understandable. Then put it up on your blog post. The other thing that you can do is take that transcript and create it into an actual blog post. So actually into an article and that's going to help your SEO again, again, these things help with your SEO because you're going to be using those keywords and people who don't have disabilities will be able to find your article, read through it and then buy from you. Become a member, listen to your podcast and it's just a great user experience. And just think about all of the people who aren't capable or are hard of hearing or are deaf and a search engine popping something up for them such as your podcast episode. And they can't even listen to it. So they can't get the important information that you're trying to get out there and you're going to be missing out on a valuable fan.

Brett Johnson [: 00:16:41

You mentioned this next one a little bit earlier in regards to the squinting and images and stuff, but color is important as well too, to kind of make sure obviously you're looking at color for branding and a consistency across everything you do. But there are some other nuances to think about with the color.

Yasmine Robles [: 00:17:01

Yeah. So there should be sufficient contrast between the foreground and background of the color, especially when it comes to text. And again, we'll talk about some tools coming up. But if you want to just point your eyes and kind of see if the best contrast again is like black text on white background, engaging it from there, how does your text pop from the page and given the font family? So if it's a really hand script, kind of handwritten kind of font, is it still readable when you squint? If not, then it might be a little too small. Squinting is great to check the color contrast, anything like that, readability on the site and don't use color alone to convey information. And what that means is that, for example, if I am using a bright pink to showcase that it is a hyperlink within a paragraph. You also want to make sure that it's underlined because people with color issues or color disabilities, they might not be able to see that it's pink or green or whatever color it is that is on your site, so they won't be able to tell that something is a link. So make sure you're offering other forms of suggestions. So if it is a link, it's also underlined, maybe it's made bold or italic on your site. And again, it's just think about these folks with disabilities, whether it is some kind of color impairment or if you want to really make your life interesting, you can set your computer or your phone up for a grayscale and see what your website looks like using that method. And it is crazy that sometimes you will not see certain text because not only did it didn't blend into the background because of color, but it was so close on a scale of contrast that it just disappears into the background, whether it was green and red or anything like that. So it is really cool. A cool way to check for color contrast on your site is to just make it all grayscale. But keep in mind, just because you see color a certain way doesn't mean other people see it the same way. And if there's not enough contrast or differentiation from certain colors, people with different monitors, whether they are maybe cheaper monitors or just calibrated differently, they will see something very different from what you are seeing.

Brett Johnson [: 00:19:28

Right? And who among us really doesn't know? Someone in our circle of people. They call themselves Colorblind. Maybe get them to look at your website, they joke about it. They can't dress themselves in the morning unless their spouse puts their clothes out. So they're not wearing two different colors that don't go together. But if you have somebody in your sphere, ask them to take a look at what you put together. It could be a helpful piece to how you put it together.

Yasmine Robles [: 00:19:57

Yeah, definitely. Ask around if your spouse wears glasses to ask them to take it off and look at your site. If you know somebody with some color disabilities, ask them to take a look at it just because it's going to help you so much just thinking about all of these other folks out there who nobody really thinks about and who could become your most valuable fans, right?

Brett Johnson [: 00:20:21

Exactly. So you put together a really handy checklist to go over. This will be in the show notes, but let's go over this checklist.

Yasmine Robles [: 00:20:31

Yeah, so a little bit about what we talked about and then a little bit more. Page title. That's the first thing. Go in and check your page title. Make sure that every page has a unique one and that it has a description of what that page is about. And that as a bonus, make sure that it has some keywords pertaining to what your subject matter is. So page titles I would do first image text and alt text. And this can go for charts, illustrations, photos, anything like that. Go through if you have time. For example, on WordPress, you would go through your media files. If you don't have the time, don't worry about it. Just next time you upload images, just keep it in the back of your mind but make sure that it has some alt text on each image, that it is somewhat unique. I think we talked about this in a previous episode, but that it has also a description of the image. So if it is a photo of me yasmin Robles that you name it, yasmin Robles headshot. Maybe if you want to be snazzy about your alt text you could say website designer in Columbus, Ohio then headings go through your pages and if you had no images or design at all and there's actually a tool, you can use the inspect tool on your browser but you can see what it would look like just with text and code. And if it is not organized properly with headings, then you can tell by, let's say if you pretend that there's no images on your site, can you tell where the heading is, where certain sections of the page are, what they're about? Or are you using so many images as a decorative element that when you take those out there is no way to organize the site or the page? And then what I would do is go in and check your colors through a color contrast checker. And this is basically a tool online. There's a lot of them online, but you put in the color code for your text, your color code for your background color, and then it'll tell you if you pass or fail. Keep in mind your text size though, because if you pass but you actually made the text really small, then it might fail to pass and it's just going to be hard to read for people. Then I would check the keyboard access and visual focus. So you can do this by going onto your site and just kind of hitting the tab button and seeing what order it goes in. It should go in an order that is just natural for the user. So, for example, if your user is filling out a form and this has happened to me before, I fill out a form and I'm tabing through the form. But instead of taking me to the next open field for me to enter information. It skips it and goes to the next one, and then it kind of jumps back up so it's not in order. And it's a little jarring for the user. So make sure that it goes in a natural order and people can use a tab key. The next thing I would check from there is just your forms, your labels and errors. So what this means is that go to your contact form and fill it out incorrectly if that is a feature of your contact form, and see what sort of errors pop up. So if it says if I was supposed to fill in my name and it's not optional. It is mandatory. Then where does the little pop up come up for errors? And do I actually see it or is it sort of hidden from the user's view? Okay, the next one. People love things that are animated and that have movement, but make sure to not overdo it. Not just because it might not be that great, but because if you have too many flashing or blinking things or too much movement, it might be disruptive to the user's journey. But also people with certain disabilities that they can't see that I've never heard of a site actually causing seizures, but there are certain disabilities where people should not be seeing like crazy flashing things or blinking lights and stuff. So just make sure to tone it down, keep it subtle, keep it elegant, don't overdo it.

Brett Johnson [: 00:24:40

Well, I think you also need to take a look at does it serve its purpose? Is it just kind of you saw something cool and think, well, that'd be so cool to do something flashing for this episode or this blog that I'm doing. But does it really help you in any way? Why are you really putting it there? It could be annoying for anyone. So maybe it's something just kind of think about why other than you think it's cool. Maybe it's going to be a distraction for everyone and kind of ruin that whole blog post.

Yasmine Robles [: 00:25:11

Yeah. And the best animations are the most subtle ones that add a little extra to the website. So if you want to think of it like a taco, I love tacos, but if you want to think of a regular taco and then you might want to add some extras on it, maybe some cheese, because a taco is just like your tortilla and your meat and everything else. The cilantro everything else is like this added flavor. If you like cilantro. If you don't like cilantro, add something else. But it's like an added flavor, an added detail. And that's how, really, animation and movement on a site should be. It should not be the number one thing. It should be almost like an afterthought of, wow, this faded in and it looks so cool. Think of it. Yeah. Don't overdo it on the flashing movement and blinking stuff. And then finally check your multimedia. So make sure that your videos and your video and audio has controls for the user to start and stop. I've seen some sites that have a video embedded, and they take away all control, so I cannot even pause the video. There's no control to lower the volume. There's nothing like that. I can't rewind the video, I can't turn on the CC, I can't do anything. And it's very frustrating. Even as someone who is a regular user of websites, it's very frustrating for me. And I can't imagine for someone with disabilities or even someone in a quiet space who can't turn off a video or pause a video or use the restroom and then come back to the video. It's very frustrating. And so just make sure that your multimedia, whether it is a podcast playing or a video, it does leave the user some control.

Brett Johnson [: 00:26:55

Good. Now, you had mentioned and I jumped the gun a little bit earlier about some tools, but you do have let's end this episode with some tools that we brought up a lot of things to take a look at. Some things should make you feel secure that if you're doing things the way you should be already, you're probably okay. But there are tools to help you get a bit more granular in regards to some things you just don't know because you're looking at the website in a way you always have. And now you need to take a look at it from the point of view of someone else that needs a little bit of help. And you've got some tools here that are great resources to help you build a better website.

Yasmine Robles [: 00:27:36

Yeah, and these are free, the ones I'm going to go over. There's a lot of them on the web and there are some plugins for WordPress and some other sites, other platforms that they will apply a shift to or change your site depending on the disability of the user. So usually we've seen this or we've installed it on sites like some medical spas and things like that and it'll just be a pop up almost like the chat boxes and it'll ask if, for example, if I need something changed and it'll try to change the color contrast and things like that. I will say that I am more a proponent of make the changes on your site. Yes, you can pay for this additional feature, but make the changes on your site at its core, because even if the person does not have a disability and doesn't click on that to increase the contrast, it could still be hard for them to read or to view or tab through or anything like that in the core of your site. That foundation of the site, you want it to be built with the user's journey in mind, not just having this quick fix that you can throw money at. Yes, it's a great tool. They are great plugins to use. There's lots of companies that offer it, but just keep that in mind. A few free tools that you could look at if you just want to play around with accessibility. I really like www dot w three. They explain a little bit about accessibility and have a few tools. There the color contrast checker and again, there's a lot of them out there, but the one that I usually default to is Web Aim resourcescontrastchecker. No dashes or spaces between contrast checker. And again, you'll just put the color code, your hex code and you'll put both color codes for the background. And the text, and it'll tell you if it passes or fails, and it'll say, hey, if this is large text, it'll pass, but if this is small text, it's going to fail. And you can gain an idea on how you can apply that to your branding on your website. Another one that has really great tools is Wave Web Aim, aim. Again, great explanations on accessibility and the legalities of it, but also a few tools that you can use to ensure that your site is accessible. The other thing that you can do is just install Google Search Console onto your site and this will help not only for SEO purposes, but any errors that you get on your site. For example, one of my clients, it kept saying that we found that it was saying that certain text on the site was too small. And what we did, for me, it looked great. It was a fine size, I can easily read it. The contrast was great, but I ended up increasing it by about two pixels and it made the error go away. But also it was telling me this because it makes sure that it was mobile friendly. On mobile, it might just be too small. And for other users with certain disabilities, the text might have been too small for them to use it. Also, for example, on a phone, it'll tell you if the link inside of a paragraph, the size or line height of the sorry, I'm going to get a little bit of jargon. But the link within a paragraph, if the area where my thumb or my finger is going to hit is too small, it'll give me that alert. And that just helps the user experience so much. So Google Search Console and watch out for those alerts that it gives you. And yeah, the Internet has a lot of accessibility tools out there, but those are some of my favorite ones.

Brett Johnson [: 00:31:22

That's super. Yeah. So if the listener has any further questions, want to get a hold of you about anything we talked about in this episode, how can they get a hold of you?

Yasmine Robles [: 00:31:31

Yeah, they can go to my site, Roblelessdesigns.com, and just shoot me an email, fill out the contact form with any questions. They can also send me a message on Instagram at Roble Design Studio and they can download the free website checklist located www.roblesdesigns.com, checklist super and you can get.

Brett Johnson [: 00:31:52

A hold of me www.mypodcastguy.com. Thanks for following and subscribing the Circle sessions with the Circle Of Experts from Circle 270 Media Podcast consultants.