WCAG 2.1 Article 1.3.1

Показать описание

Online ADA
Advancing Digital Accessibility

Transcript Below:

Hey guys. Josh here with Online ADA. We're gonna cover article 1.3.1, Info and Relationships.
This is a level A compliance, so it's mandatory, it's a big one!

This one 's a doozy. I see this issue prop crop up everywhere. This is the biggest WCAG article in terms of range of things that it covers. You may have heard of ARIA, accessibility rich Internet applications is what that stands for. And ARIA is a specific technology that uses, is used with browsers, to read things out loud to screen readers to help disabled users understand content and context.

ARIA is responsible for telling screen readers what an element is. What the state of the element is. Is it disabled? Is it required? And it gives landmarks in regions of the page so that users can quickly access that content. If you have section headings on your site using the H1 or H2, all the way through H6, those are going to be read to a screen reader as being a heading.

I'm going to quickly read the description of 1.3.1, but don't let its brevity fool you. There's a lot of information here. So let's read this.

"Information, structure and relationships conveyed through presentation can be programmatically determined or are available in text."

That's big. That's like everything on the website.

If you have a table and you have content within the table, that's a relationship. If you have

section headings, relationship.You're saying, this area of my page is a section. There is a section tag, in fact. There's an article tag, there's a main tag. A big one that comes into play with this article, specifically, is use of semantic HTML.

Semantic HTML is when you're using the native HTML element to a accomplish a task. So for instance, if you have navigation at the top of your page, you've got a list of links, it's consistent every time you go to a new page. If you follow any of those links at the top, whether you have some menus or whatever, the top is always the same. That's your primary navigation, or usually it will be, and most of the time it's right at the top, right?

Well if you build that using a div element, a div is sort of a neutral, non content element. It doesn't say anything about what it is. It doesn't tell a screen reader what is doing or what it's purpose for being is. It's just a logical division in code. That's all it's used for. It's like a little container. But if you want to actually convey meaningful information to a visit a non visual user who's using the screen readers, you can instead substitute div for nav. NAV.

That is a semantic element and it has a ton of pre programmed accessible content sort of tied into it already, just programmed into it. It has a role of navigation. It tells you what it's for. It tells a screen reader that is a landmark, so it's a region of the page that can be easily gotten back to and navigated to. It has an inherent or implied meaning for what it's doing. You know that when you land on a nav, if you're tabbing through with your keyboard, and you land in the screen reader says you're in a nav, you understand that I'm going to be coming across a list of links, they're probably gonna have sub menus, I might have to navigate with the with the arrow keys, maybe not. That's not actually implied with the arrow keys. But you understand the context of where you are and some screen readers, like JAWS will even allow you to ,like quickly navigate around the page based on headings and sections and articles and stuff like that.

Another really big one is the main tag. Whenever you have pages that repeat content, which I guess is a lot of times, but specifically I'm thinking like blog articles. You're gonna have content, maybe a side bar, on every page. You have your header, you have your footer and then in the middle the meat of the page, the stuff that's unique to the page, that should be wrapped inside of a main tag. That's gonna tell the screen reader and the assistive technology that this is the content that you should be paying attention to. It has a whole bunch of accessibility features just sort of like jam packed into it.

Side bars. These are repeated content that's going to be on every page, or many pages, that goes in to a side tag. These are all ways that you can programatically distinguish relationships between your content. Another really big one is the use of color for meaning. You can't just use color for meaning if you were trying to convey like a validation error on on a form...