Join hosts Natalie Garza and Natalie MacLees in episode 28 of the AAArdvark Accessibility Podcast as they continue discussing web design for digital accessibility. Topics include the proper use of headings for creating meaningful hierarchy, text spacing and typography principles, consistent navigation design, considerations for limiting motion and animations, and the impact of videos in design. Learn about best practices and resources like WCAG in Plain English and the new AAArdvark Circle community.
Natalie Garza: Hello, everybody, and welcome to the AAArdvark Accessibility Podcast. This is episode 28. I’m Natalie Garza, one of the co-hosts, and with me today is.
Natalie MacLees: Natalie MacLees, the other co-host.
Natalie Garza: And she is an accessibility expert here to answer all of our questions today. So this episode is the second part of the one we did last week on web design for digital accessibility. We’re gonna pick up where we left off. So starting with the next topic, which is headings.
Natalie MacLees: Headings. Yeah. So you wanna make sure that you’re including headings in your design. And before you hand that design off to a developer, you would wanna put some annotations in the design. To let them know which heading levels should be used for each thing, and that way, you can make sure that there is a meaningful hierarchy to those headings.
So I think we’ve talked about this before, but just a quick refresher. There should be one H1 on the page, and that H1 should be the main idea of that page. So the main reason that that page exists, it’s probably going to match or be very close to the title of the page. So that’s a good hint on which heading should be the H1 on the page.
Then each section of the page should be headed up by an H2, and if you have subsections under those sections, those would be H3 and so on and so forth. You can go all the way down to an H6, although it’s pretty rare to need much past an H3 or an H4.
Natalie Garza: Yeah. And remember, headings are not stylistic choices like they’re there for a reason.
Natalie MacLees: Yes, they do make text large and bold, but they also say this is a heading for the section of content that follows. So if you just need big, bold texts because you’re putting text over an image for a big banner or something like that, you have to think about whether that makes sense for that to be a heading or not.
Like, is it actually heading up a section of content? ’cause if it’s not, it should probably just be a paragraph that’s styled to be big.
Natalie Garza: All right, so those are headings next on the list. Text spacing kind of goes hand in hand.
Natalie MacLees: Yeah, and I would even maybe call this typography. So there are only a few official WCAG rules that deal with text and typography. Shockingly few, if you ask me, actually, because there’s no rule around minimum font size, for example, which is kind of surprising. And there are no rules around which typefaces you choose. And obviously, a typeface can be pretty difficult to read, for anybody like, let alone somebody who may have a learning disability or a reading disability.
But we do have a few rules around line heights. You wanna make sure that your lines aren’t too squinched up all together. You wanna make sure that words aren’t pushed too far together, that there’s a nice space, a nice separation between words. You don’t want letters touching each other. And those are all things that you can do, like in a design program, and with CSS, you can scrunch text steps.
So if it’s really small, so the lines are touching each other, and the letters are touching each other. That’s a bad idea. You wanna make sure that it’s really easy to distinguish one character from another, but then also you don’t want them too spread out because that makes it also hard to read.
So, just some really basic rules around good typography can go a long way. And there are some official WCAG rules that line heights should be at least a certain amount, that paragraph spacing should be at least a certain amount, etc. So you definitely wanna check on those and make sure you’re following those rules.
But then aside from the official rules, I think you do wanna be really thoughtful about what typefaces you choose, what sizes of those typefaces you use, what colors you use for text, because all of those things are going to impact the readability and can impact people with different disabilities. So just being really thoughtful and making sure that things are very easy on the eyes, but very easy to read.
Natalie Garza: Is there any best practices for typefaces or choosing typefaces?
Natalie MacLees: Oh, there are so many. There’s people who are complete typography geeks who will talk your ear off about the difference between Arial and Helvetica, for example.
There’s a lot of nuances in typeface, right? Typefaces, like there’s a lot of different considerations that go into selecting a typeface because there’s different amounts of legibility, and then legibility is different for things that are printed versus things that are on the screen. So there’s considerations there.
And then, of course, we all know that typefaces are also very evocative. They have a mood to them, right? They are one of the best ways to establish a distinctive brand is to have some really nice choices of typefaces that you’re using in a design. So there’s a lot of considerations that go into typography and I would say. That most of those considerations actually have an impact on accessibility, even though officially there are only a few rules around typography in the WCAG guidelines.
Natalie Garza: Okay, so there’s not any like “use Serif and not San-Serif” best practice or something? No.
Natalie MacLees: Isn’t that surprising?
Natalie Garza: Yeah, that is kind of surprising. I bet there are guides out there. They’re like, “Oh, most accessible fonts” or something.
Natalie MacLees: Yeah. Yeah. And I know, there’s somebody that I follow on social media, Piccia Neri has a course on accessible typography, if that’s something you really wanna dig into, you could check out her course.
Natalie Garza: Okay, cool. I’ll find it and link it in the notes.
Natalie MacLees: Okay.
Natalie Garza: Alright, next on the list, navigation for the site.
Natalie MacLees: Yeah, so you can’t just do whatever you want with navigation. You have to be thoughtful about it.
One of the most important rules for accessibility is that it is consistent from page to page. I can predict what navigation is going to look like on different parts of the page to help me find my way around. So that is an accessibility consideration.
It’s helpful for people who are using screen readers, who can’t see the screen and have to rely on just their memory for what was where. And that can get very confusing if it’s switching around from page to page. It’s also helpful for people with memory issues or with cognitive disabilities who may have trouble.
Just kind of any help that they can get in understanding where they are on a page. It is really helpful, but that’s really helpful for everybody. Like anybody who’s trying to make their way around a site appreciates when there’s consistent navigation. And navigation is not just limited to like that line of five links in your header, right?
Navigation means a lot of different things. It’s your pagination, it’s using your, skip links. To skip over parts of content to get directly to the main content, for example. And then it’s also using things like breadcrumbs to say like, “Hey, here’s where you are. You know, you’re in this section, this subsection, and then this page is nested in that subsection” so that you can kind of understand how the content on the site is structured.
So all of those different things are navigation or part of navigation and have a lot of considerations for improved accessibility.
Natalie Garza: Yeah. Even goes beyond if like you’re making a blog layout design, like there could be a table of contents. How can people navigate between the blog posts? There are different types of navigation depending on what you’re working on, too.
Natalie MacLees: Yeah, it depends on what you’re working on. So any way that people are getting around from one place on your site to another place on your site, that’s navigation. No matter what it happens to look like.
Natalie Garza: Yes. And even site maps.
Natalie MacLees: Yes. Site maps can be very helpful on a large site where you’re trying to figure out how is this all organized? Yeah. Site maps can be super helpful.
Natalie Garza: Yeah. I feel like a lot of people don’t realize those exist.
Natalie MacLees: You think so? I tend to look for that in the footer if I’m just lost on a site.
Natalie Garza: Those were new to me when I started working here. I was like, “I didn’t know there was a page with every single link on it.”
Natalie MacLees: They’re so helpful.
Natalie Garza: All right, next topic. Blinking, flashing, and animations.
Natalie MacLees: Yeah, so for a variety of different reasons, we wanna make sure that we are limiting the amount of motion that’s happening on a page, if not avoiding it altogether.
There are some very specific considerations, like one is if you have blinking or flashing, which can impact people who have vestibular disorders or seizure disorders.
And if you’re not thoughtful and careful about how you handle that, you could cause somebody to have a seizure or lose consciousness and become injured, right? If they fall down, they could become injured pretty seriously. So you wanna be really thoughtful about those things.
And then animations in general. You wanna be really thoughtful about them because people with different kinds of learning disabilities and cognitive disabilities, and honestly, just anybody, can be really annoyed if they’re trying to read an article and there’s just a constant animation running over on the sidebar. It’s so hard to focus on the article and read what you’re supposed to be reading. And some people actually find that literally impossible to do. They just cannot read or focus.
So you don’t wanna have an animation that the user can’t control, that they can’t pause it, they can’t stop it, they can’t hide it, and it, they just have to deal with it if they wanna work on the screen.
And maybe they’re trying to fill out a form, maybe they’re trying to read an article, maybe they’re trying to watch a video, and this other thing is running and it’s very disruptive and it can make people feel sick.
It can give them headaches, it can give them dizziness, it can give them nausea. So you wanna be really thoughtful about that and respect if they have set their setting in their browser to say, “I prefer reduced motion.”
That you respect that, I have that setting turned on on my computer, and I’ll tell you almost no site respects it. So please respect that. And then if you do have to include some kind of animation, make it opt in so people turn it on if it’s something they wanna see. But if that’s not possible, you need to at least make it opt out, make it so that they can pause it, stop it, hide it, and they don’t have to deal with it.
Natalie Garza: Yeah. Super popular in modern sites to make their pages look dynamic, but some people will get sick.
Natalie MacLees: Yes. Some people definitely get sick, or just get distracted or annoyed or frustrated, but also can sometimes get very sick. So be thoughtful about that.
Natalie Garza: And then I think I wanna add in one last note, but really, designers don’t have too much say in, but they can sometimes choose to put videos into their designs, and that’s a whole other accessibility topic too.
Natalie MacLees: Yeah, especially a couple of years ago, you saw this on every site, a background video. So like, you know, your big hero section of your homepage, for example, wouldn’t just be an image as a background, which is problematic enough for a lot of people, but an actual video that you couldn’t pause. Or stop, and it was just running all the time. Yeah. So I’m glad that that fad has kind of faded, because that was awful.
Natalie Garza: Yeah, it got replaced by animation, so, so.
Natalie MacLees: Yeah, that’s true.
Natalie Garza: Yeah, so I guess the designer doesn’t have too much say in like, “oh, there’s like captions and there’s like a transcript.” But I guess annotations and just keeping those things into consideration, like adding a ton of videos, there’s gonna be a lot of captions and a lot of work on making sure that those are accessible too.
Natalie MacLees: Yes, there is for sure.
Natalie Garza: So that wraps up the second part of web design for digital accessibility. Where can we learn more about this? WCAG in Plain English. We have a design category specifically to call out all the success criteria that have to do with design specifically. All right, so like contrast, text spacing, which we went over, headings, et cetera, et cetera.
So go check it out. I’m gonna put a link on the screen and in the notes. And Natalie, do you have something important to share with us?
Natalie MacLees: So we are launching AAArdvark Circle, which is a community for freelancers, agency owners, web developers, designers, anybody who works building websites, a community to learn how to do that accessibly.
To learn all the technical side and then also learn how to get clients to come along on the ride with you, get them on board. How to price things, plan things out, and all of that, so that you can make all of your work accessible. So if that’s interesting to you, you can join the AAArdvark Circle
Natalie Garza: Yes, and we’ve talked about a special hand gesture whenever we do this Circle.
So go check out WCAG in Plain English, design category, and the AAArdvark Circle. We have summer bonus special, and with that we’re gonna wrap up episode 28 of the AAArdvark Accessibility Podcast. Thank you guys for joining us. We will talk to y’all next time.
