Tools and info to get your website accessible and WCAG Compliant: [ Ссылка ]

Unlock the WCAG walkthroughs for level AA compliance, get accessibility web development training, and additional tools training in the Accessibility Academy: [ Ссылка ]

Are you a digital agency? Join our Partner Agency Program! [ Ссылка ]

Online ADA
Advancing Digital Accessibility

Transcription Below:

Hi guys. Josh with Online ADA here once again and

today we're covering article 1.4.1,

the use of color.

This is a level A requirement.

Let's jump right into the description.

Color is not used as the only visual means of

conveying information.

Indicating an action,

prompting response, or distinguishing a visual

element.

There's a note to this one.

This success criterian addresses color perceptions

specifically.

Other forms of perception are covered in

guideline 1.3, including programmatic

access to color

and other visual presentation coding.

Now, there is always gonna be some overlap between the

articles of the WCAG accessibility guidelines.

And,

this one was

a

very niche use case. They're trying to

specifically help out folks who have

color blind disabilities

and

this overlaps with

the sensory characteristics article that we also

covered

in a previous video.

The big takeaway here is that you don't wanna use

just color to indicate

information, or to convey information.

A really good example of this is using a bar

chart

to convey information that might be complex, or

simple, it doesn't really matter, but you have these

different bars that have different levels and

they're typically only coated

with different colors. But in this article

it's saying that it's important to use something

like a pattern as well as the color,

because someone who is color blind may not be

able to distinguish the difference between

these bars.

And it's also a good idea to use something like a

legend and all of your tables to properly

associate the pattern and the color

with the information in the,

or in the bar chart.

Another use case for this is gonna be something

like a progress bar,

where,

maybe you have a color, a green bar that's going

across

and then you have the different steps

lined up.

And rather than just using green

bar,

the green bar, to go across, you will also have

something like a dashed arrow. Like a black arrow

or something in there that's

conveying the same information

but not just using color.

That's gonna go a long ways towards providing the

same information

to users who can't distinguish that color.

This would

probably be more effective if you had green and

red, like two colors that means different things

in the same circumstance. So

maybe a green bar indicating progress, red meaning

you haven't gotten there yet, or black, or

something.

The arrow is doubly effective in that case,

because now you can see exactly what the progress

is as opposed to wondering which one is which.

So,

as always, when you are

using color to convey information, it's always a

good idea to use text

cues whenever you can, especially if you have a

button,

you need to have some sort of text label for it.

Whether it's a green button for submit or red for

cancel.

They need to have the relevant text cues as well.

And

especially something like a progress bar or a bar

chart, it should also be described in text.

That's also covered in this article.

Ensuring that information

conveyed by color differences is also available

in text.

And that's the understanding 1.4.1,

article G 14.

There's lots of good information in the WCAG

quick reference guide.

It outlines all sorts of

examples of where code is not meeting compliance

and a lot of good examples of different use cases

for these articles as well. So there's lots of

good information there.

I encourage you to check it out

It's the W3C

WCAG

guideline quick ref.

Thanks for joining me in this article and I will

see you in the next one.

свернуть