Welcome to Part 2! In Part 1, we discussed the importance and function of an Accessibility Statement. Once you have your Accessibility Statement in place, it is time to focus on some of the most common and basic accessibility issues that can present a barrier to users and expose your site to those drive-by legal complaints. For part 2 of this series we will touch on ALT attributes.
ALT Attributes
Missing ALT attributes for images tends to top the list of issues cited in web accessibility legal complaints. This makes sense as automated web accessibility scanners can find these issues quickly. Fortunately, including an ALT attribute for an image is usually very easy!
Here is a simple HTLM code snippet that demonstrates embedding an image into a web page using the HTML IMG tag, but without an ALT attribute:
<img src="./image/companylogo.jpg" />
The above code snippet would fail to pass an accessibility scanning tool. Here is that same code snippet with an ALT attribute included:
<img src="./image/companylogo.jpg" alt="ACME Company Logo" />
Adding the ALT attribute, as shown in the code snippet above, would not produce a failure in an accessibility scanning tool.
Empty ALT Attributes
It should be noted that providing the descriptive text string for the image via the ALT attribute is not always necessary. For example, if the image is considered decorative, an empty (or null) ALT attribute would suffice as demonstrated in the following code snippet:
<img src="./image/companylogo.jpg" alt="" />
The empty ALT attribute causes the non-text content, an image in this case, to not be included in the output for assistive technologies. This means someone who is a screen reader user would never be informed of the existence of the image.
Equivalent Purpose
This does not mean you should add an empty ALT attribute to all the images included in your web content. While doing so may not generate a failure in many accessibility scanning tools, the purpose of the ALT attribute is to provide code-level access to assistive technologies so that the person relying on a screen reader can access the same information that is being provided visually.
Not providing an appropriate text string that conveys an equivalent purpose as shown visually can cause key information to be missed and block a non-visual user from fully understanding or making use of your web content.
For example, if a web page was discussing two different medications and stated the following:
It is important to take the medications at the proper time each day. The image below outlines which tablet should be taken in the morning and which should be taken in the evening.
If the image shown in the example above had an empty ALT attribute, the non-visual user would be missing out on critical information that is being provided visually. While this is a rather silly example, it does demonstrate the importance of providing the proper information to all users.
There are other ways of adding code-level access to the image details that do not involve the ALT attribute and there are other types of non-text content that may need an ALT attribute. We will save that, along with how to create proper ALT text equivalents, for future blog posts.
Coming Up
Thanks for reading! In my next post I will continue to focus on other common and basic accessibility issues that can present a barrier to users and expose your site to those drive-by legal complaints.
Want to See More Content Like This?
Want the latest blog posts, videos, white papers, and announcements? Sign up for our mailing list and stay in the loop!
We're Here to Help When You're Ready
Take a deep breath. Then feel free to reach out to our team when you're ready to discuss your accessibility needs.
0 comments on “First Steps to an Accessible Website (Part 2)”