What Is Accessible and Inclusive Design

What Is Accessible and Inclusive Design

[00:00:00] Introduction and Welcome
[00:00:32] Importance of Accessibility in Web Design
[00:02:00] SEO and Accessibility
[00:03:00] Design Principles: Color Contrast
[00:06:00] Text Over Images and Responsive Design
[00:10:00] Pattern and Visual Fatigue
[00:13:30] Font Sizes and the Golden Ratio
[00:16:00] Managing Content Layout
[00:17:30] Technical Aspects: ARIA Labels and Keyboard Navigation
[00:18:53] Tabbing and Screen Readers
[00:21:00] Alt Text and Heading Structure
[00:25:49] Accessibility Plugins

[00:00:00] We live. I think we're live. Welcome to this. Yeah. Welcome to this week's Geekspeak where we're going to talk about accessibility and websites. And I am Rina Rina from little works, indie media. And my cohost is Greg McKinnon with original 72 creative. Hello everyone. So let's jump into the topic. Great. Okay. Yeah, I came up with this topic as part of my 12 [00:00:30] 12 topic series for this year.

[00:00:32] And my blog fell by the wayside because I've just been busy doing other stuff. But I think this topic is important, very important moving forward because there is a lot more prominence on Making websites accessible, both the website design itself and also the way it's coded.

[00:00:56] Are you finding that also as you move [00:01:00] forward with a lot of your projects? It is the law. So yes. The provincial governments in BC and Ontario passed it and we're expecting the rest of the provinces to go through, if you are in a province that also has it. As law dropped that province in the comments below because I haven't actually checked into it in a while for other provinces, but yes, we definitely integrate that also because it's a a key factor for SEO [00:01:30] for Google, so it's not just only, you're not only doing it because you're required to, and it's benevolent for all, accessible is is good for, I forgot what I was going to say, what the word is, but anyways it's good for the world.

[00:01:45] Good for the Google. It's good for everyone. So the sooner you hop on board and think of this as a priority on your website, the better off you'll be is my thought. Yeah, absolutely. I think [00:02:00] probably maybe you as well, but Phelan and Pip obviously would be able to speak quite well on the SEO side of.

[00:02:08] accessibility, but obviously Google's always changing their factors. And because it's something that is that is moving forward, something that everybody needs to be looking into. I'm sure they are also. Looking at those factors within their rankings. Yeah. So the word I was looking for was [00:02:30] inclusive. I hate it when those words leave me, but yeah, it's not only for inclusiveness, although that is supposed to be the prime reason.

[00:02:37] And it should be the other motivator is just ranking. So you definitely want to take care of this. All so we the title ended up being designed on its own. So we are going to focus. on design, but we are going to mention some technical aspects too. We are not going to mention all the technical aspects because if you've ever read the requirements on the BC government page, it [00:03:00] is dense and a lot, so there's a lot there, but there are some major tick boxes that if you make these changes and organize these things, then you're definitely heading in the right direction and you'll get the good results that you're looking for.

[00:03:15] So do you want to start us off with some of the design ideas, Greg? Yeah, sure. The main one for design, obviously the biggest is the color contrast. So that is basically having text over [00:03:30] an image or over some background color, the contrast of those two colors. needs to be at a certain percentage to be deemed accessible for the visually Impaired I guess people with bad eyesight and even people with like myself who have pretty good Sometimes it's difficult to to read graphics that people come up with Or even if it's just not even only [00:04:00] graphics, but anywhere on your site where you might have text on an image or a background color is really important that the contrast of those two colors is a certain percentage.

[00:04:13] that would meet the accessibility guidelines. So let's just talk about that a little bit more because people will be asking, what is that percentage? And I don't think that we really need to know that percentage as much as we need to know what that means. So when we're dealing with contrast colors, you [00:04:30] might think that red and green are good contrast colors, but if they're in the same intensity, then they're probably not.

[00:04:36] So what we want to do is, talk about contrast being light and dark together, working with light colors and dark colors together. And red always organizes itself to black if you're not seeing colors. So black and red do not make good high contrast colors even though they appear that way if you are I if your site isn't impaired, that might appear that way.

[00:04:59] It might appear [00:05:00] really poppy and bright, but it's actually can be problematic, but I did want to talk about one thing that you brought up. This idea of text over images on images, when we, when you think about a website, I actually like to pull out the text from the images and lay the text on top of the image.

[00:05:20] On the website platform rather than actually putting the text in the image for two reasons. One is because if the text isn't in the [00:05:30] image and you don't put that on the alt text, if you describe the alt text and you don't get every little piece of text in there because that you can't have a huge alt text.

[00:05:39] If you don't have that, then the electronic readers can't read it. There's going to be something that's missed. If you have text, if you're using headers that are and overlays, text overlays that are part of the, you type it into the website rather than you have an image with it on it, that's going to work better because readers will [00:06:00] read the text that's actually in the text.

[00:06:02] On the website. So that's one important thing. And then the second reason why is because if you put a lot of text and this, I feel like we might be hitting the same age, Greg, or I might be a little older, but more experienced with less eyesight. But If you have your text on your image, and your image is this wide, oopsies, where am I, this wide on the screen, as soon as you go to a mobile, it goes down down, until you can't read that small text on your image [00:06:30] anymore.

[00:06:30] Even with, I'm finding, even with reading glasses it's very hard to read, so that's the second reason why text on images, I try and avoid. It's perfectly fine when you want to send something out on a social post or whatever, and you can put the text in the status, but for websites, it's really important to try and avoid that completely.

[00:06:51] There, there is the ability. And I, again, I like your suggestion of not putting actual text. into the [00:07:00] image itself and exporting the whole thing, unless it's obviously like a social post has got to be like that or something that that doesn't have a lot of text that even one shrunk will still be fairly readable.

[00:07:16] There, there is the option, although I don't suggest doing it like this, I would suggest doing it how you do in being able to. Put in images in your site and when it [00:07:30] scales to mobile, you can use different versions of that image to display it properly. If you really want to control your image exactly how you want you can do that.

[00:07:42] But again, it would be much easier to do it the way that you said. Okay. Yeah, that's true. There are always possibilities. There are always exceptions to the rule, but for instance, this isn't an accessibility thing. It's, it was more for performance optimization [00:08:00] SEO is people who have videos on their, in their hero section, you don't want a video loading probably in your hero section on your mobile.

[00:08:10] So instead on the mobile version, you don't load the video, you load a static image of. That represents that kind of a thing, but why don't you want to put a video up there? I'll give you all the reasons You can but If the video is Large like you're trying to download that [00:08:30] video. And it's directly in your Your hero section.

[00:08:35] So the first thing it's above the fold, right? So it's going to be loading You Right away. It's not going to be, loaded later when you scroll down the page or something. So you can't push it off until, you scroll to it a thing. So the initial load, I always tend to try not to have at least a really large video that.

[00:08:56] Is at the top of the page that plays right away [00:09:00] on your mobile option. And that's another thing is that many browsers and themes won't support video in the header anyways, because it's just not a great idea. What Greg is talking about, if you've got something that's Large to load. That means that the time to see the site takes a long time and people will jump away from your site because they think there's something wrong or they get impatient or whatever the case is.

[00:09:25] So you'll lose that traffic. And then the other thing I was going [00:09:30] to say about Responsive videos and having the mobile different than the the website is that you also have to take into account that what it actually looks like when it becomes responsive. So what I do on my, my Desktop is I will make the browser smaller, because you're going to get people at, I think a standard desktop is 15, but there's also 16 inches.

[00:09:54] So does it go down for the 16? So does it go down? Sorry. So if you're doing it to, If [00:10:00] you're making it look good on a 16 inch screen, does it look good on the 14? Does it look good on the 13? Cause now there are 13 inch screens that are coming up with, I Apple. And then all of the tablets and then down to all of the phones, the big phones, and then they have.

[00:10:15] around. So it can be a bit cumbersome doing that. But and yes. Okay, so I think I've just diverted us back to the first part of our I might have done that. Still good information.

[00:10:28] What we were [00:10:30] talking about color contrast, and then you got into the image aspect and so color contrast, just to wrap up color contrast, I think people get the idea. But there are color contrast checkers on the internet. I can link those in our in the comments later on. And basically colors are scored as a pass or a fail.

[00:10:51] And there's a double a or a triple a. And then so there's not a specific one point where once you pass [00:11:00] this, you're good. There is a range. There's a point where you could pass and it's like a double A, like you're fine with this, but you could be better with a triple A. rating, which is a higher contrast, but there is a threshold where you can go in between to get your color contrast correct.

[00:11:20] And so there are a couple of other things when we think about visual. Because we're really focused on that right now. We'll get into other things a little bit later, but when it comes to contrast that's not [00:11:30] just about colors. It's also about patterns So patterns do very weird things to people's eyes and make it very hard and I think if you've ever looked at brutalist sites, which I think had a comeback I don't remember which time period but the brutalist sites not that long ago.

[00:11:48] They were, I found them very hard to read because they were super bright colors, super intense colors. They were all around the same sort of tone of color. And then they had these things that were moving and these patterns that would [00:12:00] happen. And I found that very fatiguing on my eyes. So it works really well for industries that that sort of, are a little bit like mimic that feeling.

[00:12:10] Like they're trying to get your attention, but they don't need your attention for a long time. Like maybe they're trying to point you to an art show or something like that. And it's really quick. That might work out really well, but you want to think about those patterns. I actually, there's a a yoga studio that I know and they've put patterns in behind their schedule.

[00:12:29] So the [00:12:30] schedule or the schedule is black, Transparent and then right behind it is and it's nice It's these soft dots, but I can imagine there are people that can't read that. So patterns are the other thing You also don't want like really high cross high the same kind of stuff that they used to talk about if you're gonna be on TV being interviewed You know what?

[00:12:48] You don't want to wear black and white stripes because it's weird, all that sort of stuff is the same. So your designer should really be helping you out making these choices and they shouldn't be putting these things before you. That will [00:13:00] be wrong anyways. But so this is really for the DIY folks out there.

[00:13:03] You want to make sure that your, the patterns are nice and easy. And then on top of pattern images along the same, the exact same lines, I would say Patterns for sure, but any like super complicated images with a lot of shapes and detail just that are just all over the place, like the simpler it can be the better.[00:13:30]

[00:13:30] Yeah, there's a great time to employ the kiss method. Yes. I just noticed on screen, my name is like directly in the center of the blue stripe on my shirt. I know, I've been looking at that. It looks like I'm wearing a Greg McKinnon shirt. You're wearing a Greg. We can. I know. I feel like I need, swear.

[00:13:48] I'm really not. I'm not that potential . Alright, so the next thing that I wanted to address is, for a long time, small fonts were all over websites, like really tiny. I think they, they were like eight [00:14:00] point. I never really know what the point is on the website. Like what you choose for points, because it's quite different than what you do in Illustrator or a Photoshop.

[00:14:09] What kind of. Font sizes, would you recommend for body copy, for example? Like I think everybody knows to make their titles bigger, but the body copy can sometimes be really small in an eyestrain suggestions. Try to follow the the rule of, what am I trying to say [00:14:30] here? What's the what's the grid?

[00:14:32] The three, 3. 1, the golden ratio. Sorry. I try to follow the golden ratio to create most of my typography. So I will obviously start with the main body text, which I tend. Most of the sites I'm doing these days is about a 17 rem. All right. And sorry, 17 rem or 17 [00:15:00] point, 17, 17 point. And then from that point on, I will try as best as possible to create headings Going up from that based on the golden ratio for as optimal, design and visual as possible, sometimes it doesn't work out exact, but I do try to follow as much as possible that method to create my headings for the sites.[00:15:30]

[00:15:30] Cool. Do you have a little chart or something like that, that you can share with us on the golden moon for font? I have a file that I have that shows what I typically tend to use. Maybe I can share what it looks like. Okay, cool. Then let's look yeah, I'll see if I can find something like that too.

[00:15:50] Oh, I see. There's lots on the internet. Okay. So the other thing that bugs me the most, this is like a big pet peeve. For me is when the [00:16:00] borders are really quite narrow on the sides of the website. And then the paragraph is two or three sentences and it goes all the way from one side of the screen to the other side of the screen.

[00:16:10] I find that so hard to read. Honestly, we could do columns. We could put a photo in, we need to change that up. You don't have to go all the way to the edge. Although I understand that lots of people working with templates and they're built that way, but. Move that padding in a little bit, please. Are you talking about mobile versions of Scythe?

[00:16:28] No. Oh, is it [00:16:30] all Scythe? Yeah, so on the desktop mostly is where I find this. It's just such a long spans of space to actually get your eye across. And I think that probably has more to do with the fact that the person who was putting in that content is not. A designer and yeah, sure, putting in their content.

[00:16:51] They don't consider those things. So yeah, for sure. Yeah. Or they're just using a text box. They've added a text box with [00:17:00] no formatting of the text boxes in. How it should go on the page. Yeah. So that's one thing that can be changed. And and just for the record, I have had designers send me designs with a full page text and I usually send it back, but designers don't save you from that problem all the time.

[00:17:23] I don't know. I can't say. Okay, let's move on from the design stuff into some [00:17:30] of the more not important, more, not more important, but just as important things that are more code related from a code related side. And we have about 10 minutes. I'm just going to fire off a couple and then we can discuss them.

[00:17:44] There's one that I know we talked about in our preview that you're going to get into but I wanted to mention there's I don't know how new they are, but there are ARIA labels that you can put [00:18:00] into your HTML elements that help with accessibility. Focus control is something that's big, and also the one that I know you will get into, the keyboard navigation.

[00:18:12] Yeah. All three of those, I think, are Some of the biggest things for the accessibility on a site. Yeah. So when we're not thinking about most people will look at a site and be able to tell if it's accessible from that perspective, but they don't really think [00:18:30] about other people's disabilities and how that might impede them.

[00:18:34] So for example, using a mouse is is difficult for a lot of people. And so what we want to do, and some people will have an adapted mouse, so they'll be fine or some other way to navigate on their touch pad. But one thing that we want to make sure that we do is organize so that we can tab through the website.

[00:18:53] So tabbing is amazing. I'm going to put a site. That is a really good example of tabbing [00:19:00] and it's for actually a a society that works with people and to get them back into the workspace. So we'll give them a little plug too, by sharing their site. It's a site that we actually developed a number of years ago, in fact for them.

[00:19:14] And for what we did was we may, you make sure that your tab. button works. So you should be able to put your cursor at the top of your site and then tab through and it should go all the through the menu items. And what it does is really neat. It creates a little [00:19:30] colored square so that the people that are tabbing can follow what they're actually what, which element they're actually on.

[00:19:37] And it helps to do things like Get them through the site to the buttons where they can actually fill out forms or to get them to the fields to fill out forms or push buttons or just generally interact do pop ups to get the pop up information to come out without having to scroll. So that I love that for a lot of people.

[00:19:58] And that's one thing that we don't think [00:20:00] about not everybody thinks about when we think about websites. And tabbing is a natural thing on, in HTML. If you hit tab, it will pop up. For forever. For as long as I can remember hitting tab, we'll basically tab through each link in order that they are on the site.

[00:20:18] But even more, more to that, you can actually set a tab index order. So if you want if you want the tab tabbing to happen. [00:20:30] In a very specific way to make it even easier for people to, to navigate the site through that functionality. You can add the tab index attribute and specify how you want. To be able to tap through the site.

[00:20:46] Can I just go back to one thing that we missed out that is super integral, but we just assume that everyone's doing it at this point and that is filling in your alt text on your images. Okay, we didn't actually say that. So I'm just going to cover it in one quick sentence [00:21:00] and what you.

[00:21:00] to do is you actually want to describe the image. We're no longer keyword stuffing those. And that's the piece that Google picks up on. So we actually want to describe the image as what we're seeing. So it would be, if I was to describe Greg's image, I would say man sitting in front of his computer with the camera on, he's wearing a gray shirt and, little descriptions, descript, anything that's possible.

[00:21:23] important in the description to allow somebody who can't see it to actually form a [00:21:30] visual representation in their brain. And the ARIA label that I had mentioned earlier is a similar attribute that you can add to HTML elements to provide additional information. About the purpose and it's mainly to help with screen readers.

[00:21:50] Excellent. Oh, yes. And the screen readers read the H the alt text also. Yeah. Okay. Back to the to the technical bits. Did you have any other [00:22:00] ones to add to that? I think we're, we got five minutes and the other things I wanted to, other than filling in all of these basic things, because it all helps with accessibility is like the alt alt text on images and and even titles on Links and images and all those things there.

[00:22:21] There is also a and I see this all the time is people use heading tags wrong within websites and [00:22:30] one of those things that's really important for accessibility is that you're Heading structure on the page is actually correct because if it's not H1 through like then H2 and then under, if there's H3 is under that, like it, it really, it's really important that those H heading tags are structured properly.

[00:22:50] Yeah, and again, I see this all over and tons of sites that nobody tends to use the headers, right? They use them [00:23:00] more oh, I want the text bigger here. So that's right. I know. I can't tell you how many people I've had to educate on that. So the H tags have a particular function. If you want to change the look of an H tag, because you want a bigger, bolder, whatever, different color, you do it from your global settings.

[00:23:18] And then you use the setting. The H1 tag consistently, H2 tags consistently throughout your site. There should only be one H1 tag. I actually worked on a [00:23:30] site once that had seven H1 tags on one page. And it's a disaster. Google doesn't know what to do with it. What is the title of your page?

[00:23:39] And then and then the Yeah. So make sure you're doing the global changes. If you want a different look, it's really easy to do that. Make sure you're using the, when you format your blog posts, for example, cause these are H2 tags, H3 tags, H4 tags are usually used in longer blog posts.

[00:23:57] And and so you'll use them consistently. [00:24:00] Make sure that. Each priority piece has the same weight of tags. So if you're doing a, doing it on paper, and you're doing like your, you can actually number them if you want. And before you put them in, the second part that I want to say is that you should be using age tags and not formatting your sentences separately.

[00:24:21] This is another thing I come across a lot where people will change the color or they'll bold something. Or they'll put it in italics and make it bigger so that it looks like [00:24:30] it's an H tag because it's a title of some kind, but it actually doesn't have the H tag attached to it. So again, Google's not going to pick up on that and nor will the e readers.

[00:24:39] So that's super, super important. I always tell people, the only time you should be formatting is for those little spots. You want to use it like Like the MLA or the APA. If you're want to emphasize a few words within a sentence, you can definitely make that italics. That's the convention. An underline is actually [00:25:00] what is to indicate italics before we had italics on typewriters.

[00:25:04] So underline and italics is the same function, and if you have italics, you use that, not underline. And bold, you can also use that for to make a couple of words pop, but you would never use a whole sentence or a title. You would Do that through your age tags. All right. That's my, those are my pet peeves.

[00:25:23] Through all of the basics like the majority of the things that people can take [00:25:30] care of themselves, there, there is a lot more to it. The last thing I wanted to say to start the wrap up was that if you don't want to do this yourself on your site, There are services available. Two of them are AccessiBee and UserWay.

[00:25:49] Both of them are accessible plugins that you can install on a WordPress site, which will look at the page [00:26:00] and do all of the things to that page that have not been done to make it accessible. And that's when I, if people notice when they go to a website, there's a little blue circle With a person look like looks like a star person.

[00:26:14] That's the accessibility icon. And if you click that, it will actually give you the accessible version of that page. And so if people don't want to work on all of these things up front and implement them [00:26:30] themselves, they can subscribe to one of these services that. We'll make their site accessible and compliant with the plugin, with the help of a plugin.

[00:26:40] I've heard mixed reviews on how that works, but that I do use tests, testers on sites all the time. So are we wrapping up then? Cause I've got the next week's schedule organized. I think we need to, it's 1130. Yeah, it's 1130, so we are done. Yeah. Next week, please join me and Phelan [00:27:00] for the most helpful tools for your digital journey.

[00:27:03] Search and social. Oh boy. Okay. I got it. I've actually started bookmarking all of my favorite tools last week. So this is just in time for me to finish that task right on. So thanks for joining us. We are live. We go live every week. So wherever you found us, you can come back for next week or you can just catch us on the replay.

[00:27:23] We stream we. Place our stream in multiple places. But if you want to join our group of [00:27:30] people and have discussions in our group, we're in the Facebook group geek speak marketing mixer on Facebook. Join us there. See you next week. Thanks everyone. Bye.