One of the most common ways to improve web accessibility is by inserting textual alternatives into images, so that people with visual disabilities can access the content without having to view it.
Web accessibility is an increasingly relevant issue in our society, since many people with physical or cognitive disabilities depend on assistive technologies to navigate the Internet; for a website to be accessible, a series of requirements must be met. Starting with the correct insertion of textual alternatives.
What are textual alternatives in images?
Text alternatives, also known as “alt” attributes, are written descriptions that are added to images so that users who cannot see them can understand their content. These descriptions are read aloud by screen readers, which convert the visual content into audio.
The insertion of textual alternatives to images is very important. Since they allow people with visual disabilities to understand the content of the web in its entirety. Without these descriptions, images become inaccessible and content is lost for a large number of users.
Why are they so important?
In addition, textual alternatives are also important to improve the user experience, not only for those with visual disabilities. Descriptions can help users better understand the content of an image, even if they can see it. This is especially useful in cases where the image is complex or not directly related to the surrounding text.
The inclusion of textual alternatives in images is also important from a legal point of view. Many countries have laws requiring websites to be accessible to people with disabilities, and the lack of textual alternatives to images may be considered a violation of these laws.
How are textual alternatives inserted into images?
Images in “Img” format:
Inserting textual alternatives into “img” images is important to ensure that people who are visually impaired or who use screen readers can understand the content in the same way as people who do not have these disabilities. Here are some tips for inserting textual alternatives into “img” format images:
- Be sure to add alt text to all images on a page. Alternative text, also known as “alt text”, should be a brief and accurate description of the image.
- Use the “alt” attribute in the HTML code. The “alt” attribute allows you to add the alt text directly into the HTML code of the web page, making it easier to access for people using screen readers.
- Use the “title” attribute to provide additional information about the image. The “title” attribute allows you to add additional information about the image, such as the author or source of the image.
- Use images in the following formats: BMP, GIF, JPEG, PNG, SVG and WebP. Make sure the image file name describes its contents clearly and concisely.
Images in “Background” format
Background images do not have an “alt” attribute like regular images and are generally decorative in nature, so it is not necessary to provide an alternative description for images in this format.
Images in “SVG” format:
Regarding the insertion of textual alternatives in images with SVG format:
- Use the
tag: As with traditional images, SVG images must also have a textual alternative. The tag is used to provide an alternative text description for SVG content. Additionally, this tag can be read in most browsers and assistive devices, so it is good practice to include it in all SVG images. - Use the tag: The tag is used to provide a more detailed description of the SVG content. This tag is not read by most browsers and assistive devices, but can be useful to provide additional information about the image.
- Use concise and descriptive alt text: As with traditional images, it is important to provide concise and descriptive alt text for SVG images. Alt text should clearly describe the content and function of the image.
Icons in “ASCII” format
Our recommendations for inserting textual alternatives in ASCII format icons are:
- Insert a “span” class with the “sr-only” attribute:
See the Pen
Untitled by Taller Agencia (@webmastertalleragencia)
on CodePen. - Apply CSS properties so that only screen readers recognize this text:
See the Pen
Untitled by Taller Agencia (@webmastertalleragencia)
on CodePen. - Use a clear and concise description of the icon. The description should be detailed enough so that people can understand what the icon represents, but not so detailed that it is overwhelming.
In short, inserting textual alternatives to images is an essential part of web accessibility. It allows people with visual impairments to understand content they otherwise wouldn’t be able to, improves the user experience, and complies with laws requiring web accessibility. Therefore, it is important to ensure that all images on a website have clear and descriptive textual alternatives to ensure a positive and accessible user experience for everyone.
If you have doubts about the insertion of textual alternatives or regarding web accessibility, contact us and we will resolve all your doubts in this regard.
