Web Design for Digital Accessibility Part 1

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...