SC 1.3.3 Sensory Characteristics

Let's go to the first success criteria that is actually very testable and that is, I wouldn't say it's often marked as a failure, but it does come up.

And that success criterion is 1.3.3 sensory characteristics.

And it basically says instructions provided for understanding and operating content do not rely solely on sensory characteristics of components such as shape, color, size, visual location, orientation or sound.

And basically what they want to avoid is to say click the green button or enter your content to the field on the right.

Because if you're using a screen reader, you don't know what color a button is and you don't care.

And you also don't know where the form field is on the page, if that's on the left or on the right.

So you don't want to rely on that.

I mean, you can do things like enter your name into the name field on the right side of the page.

Then that would be clear because you also include the label or name of the field in there as well.

There are a couple of examples that I borrowed from the W3C website.

This one is using color to convey meaning.

So in this case, it is required fields are in red.

And of course, if you can't see the color or you're colorblind, then you don't know which one of the fields has the red color in it.

And so to make it better, you can say required fields are red and marked with an asterisk.

And then, you know, that's at least more clear.

still the best practice would be to use parentheses required in the field name. And this is also, by the way, a violation of success criteria in 1.4.1, use of color. So these are often overlapping, especially if you're into color. But here the fail is explicitly like pointing at the field.

So 1.4.1 would more be like there is color involved to make this distinction.

And then the success criteria 1.3.3, that is basically that you are referring to the color in this explainer text.

So it's a little bit different in terms of what you're failing.

But basically, if you see something like this, you just fail both of them.

You don't want to use text like this to go to the next page, press the button on the right,

or to go to the previous page, press the button to the left.

Nobody knows where that is if they're not a visual user.

So that's not good.

So you want to say press the previous button or press the next button.

And that also helps people with speech input because it's clear with what they need to say.

Also, you shouldn't do something like please see the sidebar to the left of the illustration for links to additional information because you can't know if a user sees it on the left side.

And this actually brought a lot of problems for people who used websites and then remodeled them for responsive design because out of the sudden your content was linearized and what was on the left of the illustration was underneath the illustration or before the illustration and they had to like reconsider that.

So, the best way to address that is to have a little text or a heading in front of this, like additional links, and then it's much clearer what belongs where.

You also don't want to do stuff like this.

Press the square button to exit the survey without saving.

Press the triangle button to save in-progress survey results.

You may return later to complete the survey and press the round button to submit the survey results.

Like this is like you're relying on the shape of those buttons.

And if you had like a PS PlayStation controller, referring to button shapes can be quite tough, you know, because they don't have like labels like A and B and stuff like that.

So, yeah, I think it's a little bit more cumbersome that way.

So you want to avoid doing that on your websites for sure.

And you don't want to use color alone here again, which is the right angle triangle is the question.

And then you have like green, blue, red, yellow and don't know.

and in the good version on the right

they have actually also numbered the triangles

so you can make your decision pretty quickly and easily

and you don't have to guess what the colors are

because that's always bad

so never rely on colors.

Okay.