Join hosts Natalie Garza and digital accessibility expert Natalie MacLees in the 27th episode of the AAArdvark Accessibility Podcast, as they discuss important considerations for designers in creating accessible websites. They cover topics including color contrast, touch targets, responsive design, hover and focus states, and forms. Also, learn about resources like WCAG in Plain English and the AAArdvark Circle community.
Natalie Garza: Hello everybody, and welcome to the AAArdvark Accessibility Podcast. This is episode 27. I’m Natalie Garza, and with me today is,
Natalie MacLees: Natalie MacLees.
Natalie Garza: And she is an accessibility expert here to walk us through today’s topic, which is web design for digital accessibility. So a lot of people think that digital accessibility falls only on developers’ plates who are building the websites, but that’s completely untrue.
Natalie MacLees: I mean, it does fall on their plates, but it’s not only on their plates. It falls on the plates of everybody who’s involved in making a website. So starting from planning, project management, design, user experience, content, copywriting, marketing, photography, and images.
Every part that goes into making the website, everybody has some responsibility for accessibility, but we’re not gonna talk about everybody today.
We’re just gonna talk about the designers.
Natalie Garza: Yeah, because the designers, a lot of the time, will set the tone for the website project.
Natalie MacLees: Yes, the designers tend to come in pretty early in the process, so they have a lot to do with the direction that things go and making sure that things like color schemes and forms and all of those are designed to be accessible from the very beginning.
Natalie Garza: ’cause you can’t always expect the developer to know how to implement a lot of stuff. Like the designer, they’re the one there to tell them how you should execute the website, whether it’s like a hover state that you don’t often think about or like the form errors that often get missed, like the designer’s there to say, this is how it’s supposed to look.
Natalie MacLees: And to a certain extent, this is how it’s supposed to work. Also, there should be some accessibility annotations in most designs that explain a little bit about how something is expected to function to make sure that it’s accessible.
Natalie Garza: Exactly. So in this episode, we’re gonna walk through all the different concepts or things that designers have to keep in mind when designing accessible websites. Starting with contrast.
Natalie MacLees: Yes. Probably the most common accessibility failure across the internet is insufficient color contrast between text and whatever background it happens to be on, whether that’s a solid background color, a gradient, a background image, something that changes, something that’s absolutely positioned over some other part of the site.
There are so many different ways that color contrast can fail. And there are also some trends in web design that are very inaccessible, like using very light pastel colors as a background with white text.
You know, it has a very fresh, fun feel to it, but it is not sufficient contrast, and it is very difficult to read that text. And sometimes people really get carried away with it on very, very light colors with white text, and it’s just too difficult to see.
So you wanna make sure to avoid things like that, and that there is, for normal size text at least a 4.5:1 ratio, for bigger text it can be a 3:1 ratio, but making sure that you’re at least there with a color contrast to make sure everybody’s gonna be able to read the text.
Natalie Garza: Yeah, and often missed, too, is the contrast within the images.
Natalie MacLees: Do you mean like cases where there’s text in the image?
Natalie Garza: Yeah.
Natalie MacLees: Yeah, you generally you wanna try to avoid using images of text, but it’s not always avoidable. And when you do have to use an image of text, you wanna make sure that it also has sufficient color contrast and that you’re including that text as alt text.
So somebody who can’t see the image can still get that content. That’s starting to get into the development side of things though, but it is something that you would want to annotate on a design to say, “make sure that this text gets included as alt text”.
Natalie Garza: Yes. Next on the list is touch targets.
Natalie MacLees: Oh yes. People love making little teeny tiny x’s for us to try to click with our big human meat fingers, just doesn’t work. So for AA, WCAG AA things should be at least 24 by 24 pixels, which should be roughly the size of the your fingertip. So that you can tap that pretty reliably with your finger.
If you wanna go for AAA compliance, which I actually recommend that anywhere possible you do, it would be at least 48 by 48 touch target. So that’s really easy to tap with your finger. It’s easy to click with your mouse.
There’s a really basic user experience rule that the bigger something is, the more likely people are to click on it. And why are you putting it on the page if you don’t want people to click on it? So just to keep that in mind and have plenty of space around things.
You know, people have different kind of mobility issues and fine motor control issues that make it really difficult to click on something that’s very small and very fine, or that’s right next to other things, right? It’s hard to get just the thing that you want if you don’t have a lot of fine motor control over where your fingers are going. So that’s really helpful.
It’s also just helpful if you’re like looking at, I don’t know, something on your phone while you’re walking and holding a coffee, right? wanna be able to reach that button and close it pretty easily with your big fat thumb. So handy for lots of different cases.
Natalie Garza: Yeah. Speaking of mobile design, do you wanna talk about responsiveness?
Natalie MacLees: Yeah, we could jump over to that. You wanna make sure that, because lots of people are gonna be using all different screen sizes, so you wanna make sure that your design works on all of those different size screens, that it adjusts, and that nothing starts overlapping, nothing starts going off the screen, right?
We don’t have to scroll horizontally to try to get to anything. And, also, that mobile view is probably gonna be triggered by people who zoom in on your page. So people who need to use a screen magnifier or who just need to zoom in on a page to be able to see it better.
You know, whether because they have a vision, disability, or because they just forgot their reading glasses that day, you know, we’re all, we’re all getting, you know, one day older every single day. And eyesight, especially close-up eyesight, is one of the first, you know, the first signs that happen, as you get older, as you lose your close-up eyesight, and it becomes harder to read small texts that you would read up close.
So making sure that you can zoom in and everything looks good. Nothing overlaps, nothing goes off the screen. All the functionality is there. I can still understand how to get to everything.
So responsive design, that’s really helpful because now anybody using, you know, if they’re using their phone or their tablet or whatever, they can get to it. But now we’ve also accommodated people who are using screen magnifiers and making the screen bigger and using whatever kind of assistive technology they might need to.
Natalie Garza: Yeah, I feel like the touch targets and responsiveness kind of go hand in hand. Like you have to be able to click all those buttons on the screen.
Natalie MacLees: You have to, yeah. If you are trying to open the menu to try to get around a site and like, but a little hamburger menu is teeny, teeny tiny, and you gotta try three or four times just to click it. It’s, yeah, it’s terrible. Nobody wants to use a site like that.
Natalie Garza: Yeah, I especially appreciate larger touch targets like on Google Maps when I’m trying to drive. And it’s like, I’m not trying to press that button. Ugh. Shaking everywhere.
Natalie MacLees: You shouldn’t be using your phone while you’re driving!
Natalie Garza: Okay. Well, well, well 😏
Natalie MacLees: Sometimes you do have to mess around with the navigation a little bit.
Natalie Garza: Yeah. You have to change the song. You have to turn off the announcer.
Natalie MacLees: They just passed a law in California. They took away our ability to use navigation while driving. So there was an exception previously that you could interact with your navigation while you were driving on your phone, but you couldn’t do anything else.
And now they just passed a law, they took that away. If you need to mess with your maps or whatever, you need to pull over.
Natalie Garza: Maybe in other places it doesn’t make too much sense, but when you’re trying to merge into a seven-lane road, like in Los Angeles, it does kind of makes a little sense.
Natalie MacLees: Yeah, you don’t, you don’t wanna be looking at your phone while you’re doing that.
Natalie Garza: Anyway, digital accessibility. As you can see, it helps everybody, whether you’re driving, whether you have larger fingertips.
All right, next topic, hover and focus states, which often do get forgotten, and it’s up to developers to figure out what they’re going to look like.
Natalie MacLees: Yeah, this is probably, I would say the top thing that designers tend to leave out of their designs is, you know, what’s supposed to happen when I hover over this link or this button or this form field and what’s supposed to happen when it has focus? And those are really important things for accessibility.
We want to make sure the, hover states less so, but the focus states are very important for users who are navigating by keyboard alone, they need to be able to see where the focus is.
And the browser default focus is okay, but it, it can be enhanced a lot of the time. And what you also don’t wanna do as a designer is instruct the developers to disable the focus styles, which sometimes happens. Because they don’t like to see a dotted line around a link after it gets clicked, for example.
But there are CSS adjustments that you can make to prevent that from happening, and it is really important that those states get styled. If you don’t do it as a designer, you’re leaving a developer to do design and that never works out well for anyone.
Natalie Garza: Mm. No. Speaking of states, I think that’s a good segue into forms that also get overlooked. Like, how is a form supposed to act whenever somebody clicks submit, or when somebody clicks onto this field, what is it gonna look like?
Natalie MacLees: Yeah. What are the active states for the forms gonna look like? When a form field has focus, how are the labels going to appear on the screen? Because you cannot use just placeholders. You do have to figure out a way to have an always-visible label for every single form filled out there. You need to figure out how an error message is gonna be shown.
So if somebody skips a field and tries to submit, how are you gonna show that error message to them? You have to figure out how you’re gonna mark the required fields so that users can see what those fields are.
And those are all things that get left out a lot of times from design, but they’re all really important. They’re important from an accessibility point of view, but they’re also really important from a usability point of view, really important parts of design that we have to remember.
Natalie Garza: So a lot of stuff to cover, but we are halfway through and so we are going to continue in another episode, cliffhanger!
Natalie MacLees: Yay, part two.
Natalie Garza: So keep an eye out for that next episode, we’re gonna cover a few more things that designers need to keep in mind for digital accessibility.
We have a fancy, cool, awesome resource that you can go check out called WCAG in Plain English, and you can go to WCAGinPlainEnglish.com to go read all the articles and you can filter by success criteria that applies specifically to designers, and you can flip through and read in plain language what each of those means.
Natalie MacLees: And understand all those different design requirements.
Natalie Garza: Yeah, all the ones that we went through, plus more that we’re gonna include in part two.
Natalie, do you wanna talk about the circle?
Natalie MacLees: Yeah. And then we’ve also launched AAArdvark Circle, which is a community for anybody working in web design, web development, who’s building websites and needs to learn how to do that accessibly, how to incorporate accessibility into their workflow, how to understand what all the different requirements are.
And how to figure out how to talk to clients about that and get clients on board, how to plan for it, how to price it out, all of those different things we’re gonna cover in the AAArdvark Circle.
So if you go to AAArdvarkAccessibility.com, you’ll see a banner, right across the top of the page. If you wanna click on that and get more information about the circle, we’d love to have you join us.
Natalie Garza: Yes. So with that, we’re going to end this episode of the AAArdvark Accessibility Podcast. Go check out the AAArdvark Circle and WCAG in Plain English, and we will talk to y’all next time.
