Content Structure

So the next section is content structure and the success criterion for content structure is mostly

success criterion 1.3.1 info and relationship. Now, info and relationship is one of the

broadest success criterion that you will see. It's probably like a little bit of catch-all for you

When you're doing audits, especially if you're going in there, you have the level A rank.

So it's super important.

And basically, the idea is behind the success criterion is that you give the user and their assistive technology enough information so that they can interpret the content that is on your page and reinterpret that for different assistive technologies.

So, for example, we already talked about headings, making sure that they work, that the structure is conveyed, that it's clear, oh, what is a heading, what is a normal text.

That is super important for navigating the whole page.

And one through one is basically about the same thing, but more general.

So it's for all information structure and relationships.

that are conveyed through presentation that need to be programmatically determined or available in text.

Now, programmatically determined means that you can read it with a computer.

So that would be something like marking up headings.

You put the H1 or H2 or whatever around the text and the computer can say like,

this is a heading because this I programmatically determined that,

but that also goes for other information and structure and relationships. So, um,

can look into the content structure page in the, uh, page structure tutorial, and it's a pretty

long, uh, article and I will not go into details. Um, especially I will just skip articles and

sections at top, they're not super interesting. But there are paragraphs on any page and you want

to make sure that they are in the P element. Now, is this like super important to be conveyed to a

screen reader? Sometimes it is. Like they will usually make like a short pause at the end of a

paragraph that they wouldn't do if you just have a line break there or visual break. So it's a good

thing to have that. Now, the next one is lists and lists are super important because they can,

they are one of the few things that we can use to group things together. Sections are another one.

But with lists, you have a couple of different options to use your,

to like group elements. So the first one is an unordered list and I will make my screen size a

little bit bigger, font size a little bit bigger. First one is an unordered list. Now an unordered list can be a group of almost anything. It just means that, oh, this is a list and it is no particular order. Like if you go and you, you shop for,

Or like a tasty vegetable chili.

You want to buy corn and tomatoes and beans and onions and garlic.

But it doesn't really matter in which order you buy them.

As long as you have them at the end.

So for this recipe it wouldn't matter if the beans were the first thing or the third thing or the seventh thing.

So you can use an unordered list for that.

And generally, many screen readers and assistive technologies will announce those lists to the user.

They will say like, oh, this is an ordered list and it has like seven items.

And then you as a user know what's going on.

And then it will say something like bullet corn, bullet tomatoes, bullet beans, I would say.

It really depends on your configuration of your screen reader.

would say, uh, core, uh, an ordered list, uh, item one corn, item two tomatoes, uh, that can happen.

And then you've got ordered lists and this is where the order actually matters. Um,

and here we have the, uh, the example first, uh, cook beans for 45 minutes, then second cut

vegetables in small cubes third saute onions and garlic for deglaze using the tomatoes for fifth

add corn and beans you can't do this any other well you probably can do it in another order but

you can't you don't have a lot of like leeway through it you can can't just add the corns and

beans as the first stage and then cook them for 45 minutes because that makes no sense uh you can't

uh you know uh you have to cut the vegetables before you uh you you um put them in and stuff

like that so you need to have that order in and that's where you have an ordered list uh when that

matters. And that will be basically announced in a similar way, like the unordered list,

it just will say ordered list. And sometimes it says one of seven or something like that.

You can also nest lists. So that means that you have a list and you have a list inside of a list.

So in this case, we have as the first step, prepare ingredients, and then we have an unordered list

Inside of that, it says, cook the beans for 45 minutes and cut the vegetables in small cubes.

So you can basically say it doesn't really matter in which order I'm doing this, or I can do it at the same time.

So I have this as the first step, but inside of, of the first step, but inside of an unordered list.

Then there are description lists.

We have seen them with the language example.

I don't want to go into them very much.

They can be useful for grouping as well.

And especially if things apply to different information like these authors, John and Luke, that would work.

And then you have the one editor, which is Frank.

Now, description lists, they are sometimes not announced super well in screen readers.

So you can use them, but sometimes they say like authors defined by John or, you know,

or something like that.

And it's a little bit awkward.

So yeah, it's a thing that exists.

And you have quotes, long quotes in a block quote element, and you have inline quotes in a queue element.

These are never really announced, so you want to make sure that it's also clear in the text that you're using them, that these texts are quotes.

For example, by using quote marks, that's an easy way to do it.

Yeah, and then there are tables, but tables is a story for another time, but they can

help with a lot of like info and relationship stuff and you need to use tables properly

to make that work.

Here's a full code examples of a page.

So this goes from the body and then you have the H1, you have the navigation with the H2,

you have the main article with an H2, and then you have a couple of paragraphs and an

unordered list.

So this is something you can find on a lot of pages.

For example, here on the Access Lab page, I showed this before, here on the right you

see all the headings.

this is an H1 called access lab. Then you have the actual blog post as an H1. Then you have the

contrast checker as an H2, and then you have the screenshot as an H3, and then you've got an H2

again, H3 again. So this is pretty standard stuff for the headings. And you can, you know,

depending on what tool you're using. You can also show like landmarks. We have the nav on the top,

and then main is basically everything here. So it just puts it in the middle, scrolls down there,

which is useful. But if you go into the edit elements page, and then we look at this

part here where it says like, this is an H2 write contrast checker, and there's the link here. So,

can basically click on that. And then on the right, we see that, oh, there's first a paragraph

with the link in that in there, and then there's a paragraph, and then there are a couple of bullet

points. So they are in an unordered list, three bullet points, and then there's the H3, and then

There is an empty element which shouldn't be there.

And then it goes into the next section.

And that goes for all of these sections.

So it's super common to see these types of content floating around.

And that's good.

And it should be pretty easy to see if it's used well.

Sometimes you get into more complicated stuff as well, where you have like subsections and show and hide sections.

But the important thing is that what is inside is reflecting the content on the page.

So if it is a paragraph, it is also implemented as a paragraph and same goes for lists and stuff.

Now, there are a couple of things that are important when we're looking to things like

these links here, or also on this articles page, there is this read article link.

And as you can see, it is the same in every teaser.

So what that usually means is that if I have a screen reader and I get the list of all the links,

it can happen that I have a lot of read article links in there or I have only read more links in there or something like that.

And you don't want that to happen.

So you want to make sure that your link name is mostly unique.

I don't say purely unique, but the more unique, the better.

So if you look at this article here, this read article link, it's actually, well, it's ARIA hidden truth.

So it's not there for screen readers, but it's also inside of this link.

So this is not the actual link.

The whole thing is the link.

So you have this unique link name, which would be top seven free color contrast checks and

analyzers plus the paragraph over there, if it's not hidden somehow.

And that's good.

So that allows you to just use that as your link.

And you don't have read articles 17 times in your list of links.

And you can actually use this functionality, which gives you a list of all the links that

are in there.

So here we see the long list and they have long link titles and don't care for the area

hidden.

It's not 100% how a browser would read this.

The important success criteria for links are the following three.

Link purpose in context.

And that basically means that the link needs to be easy to understand in the context where it is in.

So if you have a heading and then you have a read more link, that technically meets this definition.

but it's like very awkward, don't do it.

But yeah, you have to make sure that it works

with the programmatically determined link context.

And that basically also makes sure

that you can use something like, you know,

read the news about X and Y,

but you can also just link X and Y.

as the link text because it's inside of a paragraph.

So it is easier to understand or it's possible to say like,

what is this link about?

I read the rest of the text.

You can, let's take a look at what programmatically determined link context is

because that's one of these WCAG texts that is not super user-friendly to understand.

And basically says additional information that can be programmatically determined from relationships with the link

combined with the link text and presented to users in different modalities.

So that basically means stuff that is around the link

or that is in the same paragraph list or table cells as the link

or is related to a heading.

Yeah, it's pretty low level, but I mean, it's a single A criterion,

so they want to make it very achievable.

There is a big brother of this, which is link purpose link only.

And that basically says there needs to be a mechanism to allow the purpose of each link

to be identified from the link text alone,

except where the purpose of the link would be ambiguous to users in general.

And that's a AAA criterion because, you know,

you need to be so much more specific.

Like mechanism is not a good link text for this.

You know, you would say mechanism definition or something like that.

And so this is a super hard thing to really well achieve.

And so this is AAA.

And the third one is label and name.

This is a new one in WCAG 2.1.

And basically it says for user interface components

with labels that include text or images of text,

the name contains the text that is presented visually.

So what does that mean?

If I look at my own website, we have at the top right, it says basically there's a micro.blog and a Mastodon and YouTube link.

And so the accessible name and the same goes for blog and videos and stuff like that.

These links need to have the text that is visually presented inside of the link as text.

So in this case, videos needs to have videos somewhere in the link text.

So I could say videos that Eric recorded, that would be totally fine as the accessible

name.

But whenever you see something, it should be probably the same text.

And here I have Mastodon as the, I think only link text in there.

Yes, here it uses ARIA label.

and so I can say in a voice input mechanism, I can say click mastodon,

and that would click that link because that's the sign there.