Meaningful text is pretty straight forward: when a user reads text or has it announced to them, they should be able to immediately understand what it means even without any surrounding context. A lack of meaningful text can affect all users, but especially those who rely on assistive technologies. In this lesson we’ll be going over a few instances where you should start making sure you provide meaningful text to users.
By the end of this lesson, you should be able to:
- Know how to provide meaningful links.
- Know how to provide meaningful text in forms.
- Know how to provide meaningful
altattributes for images.
Providing meaningful errors to users when they are filling out or submitting a form can turn the experience from frustrating to… well, maybe not fun, but at the very least just a bit less frustrating. Let’s take a look at a few error examples, ranging from not helpful at all to very helpful:
<!-- Example 1: Huh? --> <div class='input-error'>Error: Invalid input.</div> <!-- Example 2: That makes more sense. --> <div class='input-error'>Error: Email is invalid.</div> <!-- Example 3: Even better! --> <div class='input-error'>Error: 'JohnSmith@@test.com' is not valid. Example of a valid email: firstname.lastname@example.org.</div>
Even if you could tell what input caused the error in Example 1, which may not always be the case, the error doesn’t provide any meaningful text. What input is invalid? Why is it invalid? How can you fix it? None of these questions are answered. Now imagine how meaningless this error must be to users of assistive technologies, who may not be able to see where an error is rendered on the page and may only have “invalid input” announced to them.
The error in Example 2 clearly tells you what input is invalid, so you now know exactly where to go. While this might be all a user needs to know, it’s worth keeping in mind that it is still a rather vague error. We don’t know why our email is invalid.
The error in Example 3 is even more meaningful. It not only tells you what input is invalid, but also how to fix the error. Generally when you inform a user of a form error, you should be informing them what input caused the error and, when possible, how to fix the error or why the error occurred in some way.
Another way to provide meaningful text in forms is with instructions, such as when a password input lists any characters that the password must contain (“Must include at least one uppercase letter and one number…”). For instructions that are unique to an input, they should be placed alongside the input itself. Instructions that are more global across the form, such as indicating which inputs are required, should either be placed at the top of the form (“* indicates a required field”), or placed alongside the input or its label (“Name (required)”).
At this point you should be pretty familiar with the
alt attribute on
img elements. Whether you are or not, let’s see if you can tell which of the following examples is valid:
<!-- Example 1 --> <img src='...' alt='' /> <!-- Example 2 --> <img src='...' alt='Odin' />
Believe it or not, both examples above are valid! While Example 1 doesn’t actually have any meaningful text (perhaps a meaningful lack of text), you should still understand its importance. When you’re using an image purely for decoration, or the image just isn’t really important for the user to be aware of, you generally don’t want users of assistive technologies to be made aware of it. In those cases, you should always use an empty string for the value of the
alt attribute, the presence of the image could still be announced, which may confuse the user (especially if the file name was a random string of letters and numbers).
For Example 2, the screen reader would announce, “Odin, graphic”, making the user aware that there’s an image and what it’s an image of. What the alternative text should be for an image will ultimately depend on various factors, though. Read Alternative Text - WebAIM to learn about when and how you should be adding alternative text for images based on the function of the image and the context surrounding it.
This section contains questions for you to check your understanding of this lesson. If you’re having trouble answering the questions below on your own, review the material above to find the answer.
This section contains helpful links to other content. It isn’t required, so consider it supplemental.
- Making Accessible Links: 15 Golden Rules For Developers is a little old, but is still a great list of 15 rules for creating, well, accessible links. Some of the rules the article goes over were mentioned in this lesson, but there are some other rules that can help make sure you’re creating a11y friendly links.
- Usable and Accessible Form Validation and Error Recovery goes over a few different ways you can provide errors to users (using the