Web Design for Digital Accessibility Part 2

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