Hey everyone! 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 a 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 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, in 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. 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.
Let’s say someone’s trying to subscribe to your newsletter and all you’re asking for is the email and then there’s like a submit button, right?
If you go to submit the button and you haven’t entered anything in there, if the box just turns red, that doesn’t tell us a whole lot if you can’t see the color red, right? If you’re color blind or if you just visually impaired you won’t get that information. So, instead, next to that element, that input that turned red, you have a message that says what’s wrong and it tells you how to fix it and then you can use something like ARIA described by and you can point to that message and then when they hover over or focus into that element, the description, which is that message, is then also read to them.
This is what we’re talking about with this article. It’s a big one and it is important and it basically tells you that everything on your page that has any kind of visual context or relationship, if they go together in way, they need to be conveyed the same way to every user.
And ARIA is sort of our pathway to get there. Use of semantic HTML is the best way to make sure that this is happening on your pages without even really having to try.
If you wrap all of your navigation elements instead of a nav and you put your unique content instead of a main and your side bars inside of a side and you’re using your proper headings, that’s like 90 percent of the problem, or the the fix, the solution right there. You don’t even have to try. You just put them all in the semantic HTMLs and you don’t have to worry about specifying rolls or states. It’s all mostly done for you.
A lot of times I also see people using anchor tags for controlling things like a modle. Or switching to a new tab within the page. Like if you have tabs, like you wanna see page one page two page three, within your bigger page, you have these tabs across the top.
I see a lot of people use anchor tags for those. And one thing it’s important to know is that anchor tags are semantic HTML.
So are buttons. They have an implied meaning. Anchor tags are navigation. If they navigate you to a different place on your page, or if they take you to another page, or an external link that’s what anchor tag is for. A button is for controlling widgets and elements on the page.
What’s being shown, what’s not being shown. That’s a button. Trigger a modle, that’s a button. Submit a form, that’s a button. All of those things are buttons. It’s important to have those distinctions.
So, there’s so many things that we could dive into with this. This is such a big and nuanced issue, but the point of these videos be sort of like an overview of the guidelines so that you have a better understanding of what it’s about. Not necessarily each of the individual issues that you might come across.
So, with that said… thank you so much for joining me and hanging in there, as this is kind of a lengthy one.
I’m Josh with Online ADA and I will see you in the next video.Every