Learn what alternative text is, where it goes, what the alt attribute is, and why the alt attribute is important. Check out our other two alternative text videos and resources below. Share questions, feedback, and experiences on Twitter using #accessibilityFocus.
Alternative text video playlist: https://www.youtube.com/watch?v=CTPhJnJ6SZs&list=PLl4N9bkQPE8708fUPfZM1xYWfrlMVBAn4
Alternative text article: https://blog.pope.tech/2022/04/05/alternative-text-alt-text/
HTML alt attribute: https://www.w3schools.com/tags/att_alt.asp
More alternative text articles and videos: https://blog.pope.tech/2022/04/06/alternative-text-training-resources/
0:21 What alternative text is
0:42 Where alternative text can go
0:56 The alt attribute
1:19 Alt attribute read by screen reader examples
1:37 Why the alt attribute is important
Josh explains WCAG Article 1.1.1
Tools and info to get your website accessible and WCAG Compliant: http://OnlineADA.com
Unlock the WCAG walkthroughs for level AA compliance, get accessibility web development training, and additional tools training in the Accessibility Academy: https://onlineada.com/academy/
Are you a digital agency? Join our Partner Agency Program! https://onlineada.com/partners/
Advancing Digital Accessibility
Hey everybody! Josh here with Online ADA
and in this video we're gonna cover WCAG
article 1.1.1 of the WCAG
accessibility guidelines. So what is WCAG 1.1.1?
This is the alt text. It says non text content
this is for level A compliance
the actual documentation for this article reads
"All non text content that is presented to the
has a text alternative that serves the equivalent
except for situations listed below.
Controls and input.
If non text content is a control or accepts user
input and it has a name that describes his
purpose". This is in reference to form inputs,
buttons on forms,
first name, last name, email address. All of those
Those are gonna be
inputs that require
something from the user and they need to have
labels and they need to have instructions
that would comply with
the alt text requirement.
Time based media. These are gonna be things like
videos or audio tracks or animations,
Things that are playing that
are animated or moving that a non visual user
may have difficulty with
when they visit your site. They need to have some
Let's read that one.
If non text content is time based media, then text
alternatives at least provide descriptive
identification of the non text content.
Now this is saying
that you don't necessarily have to have a text
dictation of everything that's happening on that
screen or in that
but you have to have a descriptive identification
you know they are tabbing through with their
screen reader they come across that maybe isn't
explaining everything that's happening in the
but it's going to say this is an animation of
Test is literally what it sounds like if you are
taking, like for a college exam
or some sort of school related activity,
Test is going to be an actual test that happens
on the website.
So if non text content is a test or exercise that
would be invalid if presented in text,
than text alternatives at least provide
descriptive identification of the non text
Most tests that you have on a website are probably
gonna be like the radio buttons yes/no,
a) b) c) d),
something like that. So that is text content.
This would be a situation where
the test was presented in maybe like a video
format or if there was,
I can think of,
software that might be teaching you how to speak
Spanish or something and you have to
speak into a microphone. That would be sort of
the situation where
you actually start to have a description of what
is required for a non visual user.
I personally have not ever run into this one
myself but it reads, "If non text content is
primarily intended to create a specific sensory
experience, than text alternatives at least
provide descriptive identification of the non
text content". Same story,
that can't really be dictated or described
perfectly you have to just give a description of
an overview of what the content is to the user.
This one happens all the time.
Forms have these, you know anytime you have to
sign up for newsletter.
These are for avoiding spam and they are to
make sure that you are a human
that is submitting the form and not a robot or a spammer.
"If the purpose of non text content is to confirm
the content is being accessed by a person rather
than a computer,
than text alternatives that identify and describe
the purpose of the non text content
and alternative forms of CAPTCHA using output
modes for different types of sensory perception
are provided to accommodate different
Now that's a big one.
I run into a lot of times on a forms where you
only have like a check box
or you have something where you have to pick all
the storefronts out of a bunch of like a grid of
Those are great
and they definitely provide their
purpose to visual users, but somebody who's hard
of seeing may have difficulty seeing those
storefronts in the pictures. So
this is saying that we need to have some way of
switching that over to like an audio
Or from the
checking the store fronts to a check box or
something like that. Some alternative
that is text based that a non visual user can use
The next one and the last one on this list is decoration,
"If non text content is pure decoration,
is used only for visual formatting...