As the name suggests, Alt is an alternative description of the image that the user sees if the image itself does not appear for some reason. The description is written in the HTML code of the image as an alt text attribute (what kind of words are displayed in the attribute depends only on the webmaster).
This parameter is convenient, desirable to use, and can be used for different purposes:
- to explain to the user what is shown in the picture, if he does not see it due to slow Internet, failure, or disabled image download
- for search robots who use alt attributes during indexing and search for key phrases in it, as in the rest of the text.
Since alt attributes can be beneficial, it is essential to write them correctly to be informative for both the person and the search engine algorithm.
For most web admins, posting an image alt attribute on a website is a straightforward and familiar process, but there are opportunities that some may prefer to ignore. For example, many people know what alt attributes and Titles are, but not everyone uses them. Nevertheless, these are essential parameters that can affect the site’s optimization and the perception of the resource by visitors, especiA11y in cases where the speed of the Internet does not allow them to view the image. These image alt attributes are used not only by people but also by search algorithms, and their use will improve the site’s notes position in the search engine rankings. Alt attributes help people with special needs perceive information on your sites. Therefore, this is an essential parameter that cannot be ignored.
Why does image alt text matter for accessibility?
Alternative images captions help visuA11y impaired people understand what is shown in the picture. People who find it hard to read the text from the screens use a special assistant that reads the content of the site to them, and that is why the alternative signature of the picture must be meaningful. Image alt attribute helps in website promotion and becomes a good helper for visuA11y impaired people.
As with most optimization-related parameters, alt attributes have specific requirements that, if met, are likely to increase the page rank. Although in this case, it is not only the search engine that matters, but the user should also understand what is shown in the picture.
It is believed that the alt attributes in the image should be:
- not spammed and constructive;
- containing a key phrase;
- short (up to 250 characters);
- informative and accurately explaining to the person what he would see here.
An example of a specific image can be used to see how these rules can be applied. Let’s say a photo with a laptop is posted on the page, to which you need to register an attribute.
As mentioned above, the alt attributes parameter should reflect the essence of the picture, so options with an image or even a photo will not work; it says nothing to the visitor. Search robots will also not index this picture because its alternative description does not carry a semantic load.
There are several options to choose from:
- a laptop, a golden laptop, and other similar wording will work if the site on which you are posting the image is informational, so your target audience does not need additional information about the device in the image.
- The laptop is a more commercial form, which will be optimal, for example, for an online store page or a review of a specific laptop model. Such a description contains the key name of the company and the device and will be perceived by search engines as relevant.
Search engines do not welcome spam. If the alternative description turns out to be something like cheap to buy the new powerful Xiaomi Mi Air laptop, the robot will ignore it at best. Try to optimize the alt attributes values, but don’t get too carried away.
How to optimize your site for people with disabilities by using alt text and other attributes?
Optimizing a website for disabled users makes good business sense. You can capture a wider market segment by building a positive brand image. After you have checked your website for internet accessibility, you can follow these steps:
- Add alt attributes. A picture can be worth a thousand words, but visual elements such as images are a barrier to access for blind and visuA11y impaired users. They often have to rely on assistive technologies such as screen readers and updatable braille readers. Screen readers are programs that read text on the screen using a synthesizer or braille display. However, none of these technologies can read images or text in images. You need to add alt text to describe your images to visuA11y impaired users. Be sure to describe the image as accurately as possible.
- Allow users to increase the font size. VisuA11y impaired people often cannot read small text. As such, they have to use certain font settings when they browse your site. Offering an alternative style sheet with the ability to increase the font size without disrupting the page layout should make your content easier to read. Also, make sure your buttons are in larger font size. Also, make these buttons visible to visuA11y impaired people.
- Remember contrast sensitivity. Besides the size of the text, you need to think about color and contrast. People with visual impairments such as retinitis pigmentosa, glaucoma, diabetic retinopathy, and cataracts have low color contrast sensitivity. When designing your web pages, make sure there is a high contrast between the foreground and background, such as yellow letters on a black background. Avoid using thin fonts. Try to avoid using any JavaScript or CSS functionality to prevent visuA11y impaired users from increasing the contrast. Like text size, color contrast is also critical. While the black text on a white background has the highest readability, you can also use black text on a yellow background and yellow text on a blue background. Do not use combinations such as green text on a red background and vice versa, as they are difficult to read.
FAQ
- What Is Image Alt Text?
These are image captions on your site that the developer adds. They are needed in order for search engines to better index your site, and also such text helps visuA11y impaired people understand what is shown in the picture.
- Why is Image Alt Text important for accessibility?
VisuA11y impaired or blind people use special programs that read the text on sites, including alternative captions for pictures. If you do everything correctly, then your captions of the pictures will help such people understand what is shown in the picture.
- What is the alt attribute and the reason for its use?
The alt attribute is defined in a set of tags so that you can provide an alternative signature for images on your site. If your site has an alt attribute, visuA11y impaired people can use the descriptions you provide instead of images.
- How do you write alt text for the visuA11y impaired?
Above all, keep plain alt text. It should give a short and accurate description of what is visible in the photo. Try to limit photo captions to 125 characters or less. Some screen readers stop reading alt text after this.