WCAG 2.1 Article 1.3.1

Tools and info to get your website accessible and WCAG Compliant:

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

wcag,accessibility,