How to Add and Edit Alt Text in WordPress®

Since the passing of ADA laws, more and more websites are adopting accessibility standards for people who are browsing the web with assistive technologies such as screen readers. These assistive devices play a major role in the accessibility of a website much like the mouse and keyboard. What many businesses don’t realize is that, in order for a website to be compliant with the law, it must be accessible to those with disabilities.

Visually impaired users rely on screen readers to convey the content on the website. All content on the web page, multimedia or non-text content, must have a textual substitute. For standard images, this substitute is known as “alternative text” or “alt text.”

What is Alt Text?

Alt text, refers to the textual description for images on a web page. With alternative text, users with visual disabilities are able to perceive the content of the image, as long as the alt text of the image is adequately defined.

If an image does not load correctly, alt text also serves the purpose of providing a textual description in place of the image. This is useful in cases where users may have blocked images or if an image ever becomes unavailable.

Much like screen readers, alternative text is also used by search engines “bots” as a factor for SEO. As an SEO best practice, all images that convey content should have appropriate alternative text to give the best user experience as well as rank for possible keywords.

How Alt Text is Used

Alternative text can be presented in three ways:

• Directly on the HTML <img> tag
• Surrounding or adjacent text that provides context to the image
• On a separate page linked from the image

The most common use of alt text is using the alt attribute on the <img> tag. Although there are different methods to displaying alternative text, all images should still have the alt attribute directly on each image tag. Images that do not convey content must have a null or empty alt attribute like alt=””. This lets screen readers know to ignore the image, or that the context is displayed elsewhere.

What is the Difference Between an Alt Tag and a Caption?

Website platforms like WordPress^® provide a few different inputs for all images. While all inputs serve a similar purpose of describing the image, each input has a unique way of displaying their information to the user. For instance, alt text is used by screen readers to present information to blind or visually impaired users.These screen reader technologies alert the user of an image element, accompanied by the alt text of the image. Since images are announced by the screen reader, it is generally best to avoid using words like “An image of..” or “A screenshot of..” within the alt tag.

Captions and descriptions also convey context to the user in a different manner. Captions are displayed visually to the user, usually beneath the image, and can be styled using CSS. Descriptions are displayed on the image attachment page; this is typically not used and can usually be left blank.

In order of significance, it is always best to at minimum fill in the alternative text for all images. The only case that alt text should be left blank, is if the image is purely decorative or does not convey content.

Adding Alt Text in WordPress^®

WordPress^® has built-in functionality to adhere to ADA guidelines. When adding an image to the media gallery or adding an image to a post, you can add or edit the alt text of the image in the image options. When describing the purpose of the photo, the alternative text should be brief while still providing an adequate explanation of the image’s content. In other words, the alt text should be sufficient enough to act in place of the image.

Need Help with Alt Tags or ADA Compliance? Turn to PaperStreet for Assistance

ADA compliance is an important regulation that all websites must follow. Our team can help you with both an audit and/or implementation of ADA compliant practices. We invite you to contact us for more information.