Take a look at the photograph below, what do you see?
An apt description of the image would be “A boy and a girl riding a scooter and a bicycle respectively in a suburban environment.”
If we tried to “ask” an artificial intelligence software to describe the photo, it would probably reply with something along the lines of “An image with two children,” or even, “Two persons driving on the road.”
In other words, we do not yet have the technology that can accurately describe the occurrences in images. We must still rely on the human eye to provide Alt Text for images.
What is Alt Text?
Alt Text simply means “alternative text” and is used online to substitute non-text content with short descriptive content, mostly for images (but can also substitute multimedia, videos, etc.).
Most users would not encounter Alt Text, but for users with screen readers, for instance, Alt Text would play an essential role in their browsing experience.
An image with a pup lying on the porch would trigger the screen reader that would read aloud: “A puppy lying on a porch. Image. Clickable. Click to visit link in new window.”
Offering Alt Text for your images will not only make your website more accessible but will improve your SEO (search engine optimization) results as well.
How to write Alt Text
As a rule of thumb, the Alt Text principles are:
Describe the image for what it actually depicts.
Bad example: “A tower.”
Good example: “The top of a lighthouse against a blue sky.”
Keep the description short and efficient.
Bad example: “A clay, small bowl placed on a stone platter and some wrinkled fabric with at least 10 juicy strawberries inside.”
Good example: “Strawberries in a brown bowl.”
If an image has a body of text next to it there is no need to repeat this information in the Alt Text.
Using a vape as a substitute for cigarettes is a great way to quit smoking and maintain good health while remaining relaxed.
Bad example: “Relaxed woman in black top smoking an e-cigarette as an alternative for real cigarettes.”
Good example: “Woman in black top smoking an e-cigarette on a black background.”
- No-no words
Avoid the usage of words like “image” or “graphic” as screen readers already note this.
Bad example: “A graphic showing a white keyboard with a green handicapped button.”
Good example: “A keyboard with a green handicapped button.”
Why is Alt Text important?
When a blind or visually impaired individual engages with content on a website, he cannot see images like the majority of users. These images are sometimes integral parts of the web page’s content. Not comprehending what the image depicts could prevent a blind user from engaging or understanding the full context of the content. In some instances, this could result in the loss of a customer, giving up on a purchase in the middle of the process, or emotional frustration that would distance persons with disabilities from your website.
Web accessibility guidelines require placing Alt Text under images so users with visual impairments can read them via screen readers or other web accessibility enhancement tools.
Who’s responsible for Alt Text?
It is important to note that Alt Text for images is a standard requirement to achieve the ADA and WCAG 2.1 web accessibility guidelines. This requirement is stipulated in the law and is a must for all businesses with websites.
Moreover, obliging to this requirement is the sole responsibility of the business. Even when choosing to work with a web accessibility vendor, such as the leading company EqualWeb, the job to jot down Alt Text is of the business—as images normally change and update. A web accessibility solution provider would needlessly fill in the Alt Text details only to later provide false descriptions of the latest images.
A vendor could notify a business that it's missing Alt Text, and we at EqualWeb sometimes do this due to our impeccable service, but ultimately it is not the responsibility of the accessibility provider.
Become fully ADA compliant and accessible
Are you interested in meeting web accessibility standards according to the latest ADA requirements and WCAG 2.1 guidelines?