Tools and info to get your website accessible and WCAG Compliant: Online ADA
Advancing Digital Accessibility
Transcript Below:
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 the next.
0 Comments