Hello Everyone. Josh here with Online ADA. In this video we’re gonna cover article 1.3.3 of the WCAG accessibility guidelines.
This is a level A requirement and let’s jump right into it. 1.3.3 reads, ‘Instructions provided for understanding and operating content do not rely solely on sensory characteristics of components, such as shape size, visual location, orientation or sound.’ I don’t see a lot of these out in the field, but the gist of this article is talking about using only shapes or only colors, or visual location, to indicate that something is happening on the page or to convey information to a user somehow.
A great example of this is form validation. This is something I do see actually. Whenever you’re submitting a form on a website, whether It’s subscribe to a newsletter or you know signing up for something or doing a credit card payment or something like that, when you hit the submit button, often times, you’ll see some sort of red border around the text field that needs correcting if there’s a problem.
This is a great indication to a visual user of where the problem area is, but if you only rely on the red border and that is technically only using a sensory characteristic. We’re only using a color to indicate the problem. There needs to be a spoken read aloud message to the user. It shouldn’t remove their focus from the element they’re currently on, cause that can be confusing. And it should also have text associated with it. Most often times you see text right below it that’ll have some sort of a helper advice or instructions on how to correct the problem and what is wrong, and it should also say like what field it is. So if it’s the first name field and you left empty then it should say ‘first name field should not be empty’, or something like that. The thing is, a lot of times, in code, we haven’t made a programmatic association with the message and the box.
So if you have those two things, the red border in the text field as well as the text description of what’s wrong, if they’re not programmatically associated with let’s, say an aria ‘described by’ attribute on the element, then that’s technically still using sensory characteristics only. Because the user would then have to go hunt for the other information and they may not understand the relationship between the help text and input. So it’s important to make sure that color isn’t the only way that you’re validating your forms.
Another good example of where this has come up in the field is, someone with a list of tasks to do may have a green check mark next to the tasks that are completed and then maybe like a circle next to the ones that haven’t been completed. And they’re all grouped together in the same list. If you don’t have any alternative text that’s describing to blind user or someone with visual impairments what is happening aside and you’re only using the green check box, then they won’t understand that relationship, that association. There needs to be some other way of informing the user that the box has been, or that item in the task list, have been completed. It’s really that simple.
A lot of what we do with WCAG accessibility is just making sure that users of all sorts of different disabilities have the information they need to accurately and appropriately use your site, without any issues. So, that’s really all there is to this article. Thanks for joining me and we’ll see you in the next.