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 user has a text alternative that serves the equivalent purpose, 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 its purpose”. This is in reference to form inputs, buttons on forms, first name, last name, email address. All of those forms. 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 your videos or audio tracks or animations, even carousels. 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 sort of text alternative.
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 animated element, but you have to have a descriptive identification of it so, you know they are tabbing through with their screen reader they come across that maybe isn’t explaining everything that’s happening in the animation but it’s going to say this is an animation of ‘insert description here’. Test.
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 content. 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. Sensory. 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, you have 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.
CAPTCHA. 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. It reads, “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 are provided and alternative forms of CAPTCHA using output modes for different types of sensory perception are provided to accommodate different disabilities”.
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 squares. 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 test. 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 as well.
The next one and the last one on this list is decoration, formatting, invisible. “If non text content is pure decoration, is used only for visual formatting, or is not presented to the users, then it is implemented in a way that could be ignored by assistive technology. This is a big one. I see, a lot of times, folks who aren’t really sure if their video should have any kind of alt text on it or any descriptions. They put things like, like a picture of a sunset on a beach for a car dealership who’s having a car sale during the summer, right? Does the picture need a description? It doesn’t really. It’s decorative. It’s going along with a theme.
In this case it’s better to just leave the alt attribute of the image empty and that way it’s marked as decorative. Another way that you can mark something decorative is to give it the role of a presentation. Roll equals presentation on the element itself. That tells the screen reader to ignore this content, don’t read it out loud, it is not necessary for understanding the content on the page. The best thing you can do for the alt text guidelines to make sure that you’re in compliance with this is anywhere on your site that you feel that context or meaning is conveyed in a visual way.
Whether you’re using colors to identify something in a bar graph or whether your image has supplemental information like a description of a particular type of dog collar that has a certain bell on it. Or like a product, is a good example, on amazon you know. If you’re if you have an image of a product on the website and the current page is specifically talking about that product. The product image should probably have a description about what you’re seeing. Those are situations where you would wanna convey to a user who can’t see those things or who has difficulty seeing those things, the same meaning. So a bar graph would have alt text, a long description or an aria described by. Something like that and it would convey that information and the meaning of that bar graph to the non visual user.
I commonly see mistakes with this article on images and on form inputs. A lot of times folks think that the placeholder on a form input is considered a label. The problem with that is that information goes away as soon as you start typing and that isn’t accessible. You need to be able to see those instructions at all time because some of our users who visit our sites have short term memory loss. Or they just got caught up doing other things. Maybe a pop up flashed on their screen and they had to close it and they forgot what form they were in or somebody behind them needed their attention they turn away they come back to it. It’s important that wherever they are on the page, they can determine what they’re supposed to be doing with the input that requires their input. With the control that requires their input.
I see a lot of times image elements are lacking the alt attribute and those are actually mandatory. You have to have those on your images. That is actually just valid HTML and that actually ties into a different WCAG article, but it’s important to have that and if the image is decorative you just leave that alt element, sorry that alt attribute blank and that will mark it is presentation decorative.
Thank you for joining me on this video and I’m Josh with Online ADA and we’ll see you in the next video.