<blog>
Beyond a Pretty Picture

Image credit: Original image

Originally appeared in LinkedIn AccessABILITY

In my last post I discussed the importance of keyboard accessibility. How it is an important part of web development that guarantees your website is accessible to everyone. Not only to those that can’t use a mouse, but those that use alternative input devices besides keyboards, and those that prefer to navigate using the keyboard over a mouse. This time around I’ll take a look at alternative, or Alt text.

What is Alt Text?

Alt text is a brief, succinct text description; however, if you want it to be more descriptive, you can make it longer. It is inserted into an image tag in a webpage's HTML code or into a platform's designated alt text field. Alt text should accurately describe the content and purpose of an image even though it is typically brief. When used in web development projects, it is also frequently referred to as an "alt tag" or "alt attribute". Alt text serves several purposes - it provides accessibility for visually impaired users using screen readers, it helps search engines better understand the content and context of the images for improved SEO, and it displays a text description if the image fails to load properly. Well-crafted alt text is essential for making your digital content inclusive and optimized.

The alt text should capture the intent of the author or designer. It needs to be objectively descriptive of meaningful information. For example, instead of "photo of a doctor and patient shaking hands", better alt text could be "a doctor providing reassuring care by shaking hands with a patient."

It should never include "image of" or "picture of" as these are a given and will complicate screen reader output. Alt text falls under WCAG Success Criterion 1.1.1 Non-text Content and you can dive into the intent, benefits, techniques, and examples at Understanding SC 1.1.1.

Image Descriptions

An image description can be used and is typically included within the body of the webpage. The purpose of an image description is to provide additional context and information about a visual, beyond what can be conveyed in short alt text. Image descriptions have become an accessibility best practice, especially for complex images like charts, graphs, illustrations etc. The alt text provides the short high-level description, while the longer image description fills in the additional key aspects and nuances of the image that are important to understand the full meaning and context. It allows users to build a more complete mental picture.

Context

Keep it brief but informative. 150 characters is the maximum recommendation to paint a clearer picture for graphics or images alike. If you have longer alt text, I suggest that you consider an alternative for mobile experiences – if the messaging within the alt will still make sense. For mobile alt text you could consider limiting to around 60-80 characters to fit on smaller screens that truncate text. Dynamic alt text can be managed via JavaScript or other scripting techniques that can understand viewport dimensions and update the code.

Good alternative text provides a precise description of the image and conveys what is most important. If it’s required for you to “set the mood,” then do so. Focus on describing the most important and relevant aspects of the image related to the surrounding content.

• Ex: Student jumps for joy during a graduation ceremony
• A family sits together, holding hands, devastated by the loss of their furry friend

Use plain, literal language rather than metaphors or descriptions requiring interpretation. For functional images like icons or buttons, describe the functional purpose rather than appearance.

Be accurate and ensure that all the information that you are adding to the alt text is correct.

Be Equivalent

The purpose of writing alternative text is to provide a textual description of the image without losing or adding information so that it is equivalent to what a sighted user would normally gauge from viewing the image. Alt text should be an objective text equivalent to convey the same key information, meaning and purpose as the image itself, without adding subjective interpretations or details.

Omit extra information. Ex. If a person is not identified by name in the copy, then there is no need to be that specific in the alt text.

If the person is known and you acknowledge them in the copy of the post, feel free to use their names in the alt text.

Language and SEO

Alt text plays into SEO—include keywords, as long as they’re relevant.

Use language appropriate for the target audience. This is important when considering the differences between an HCP- and a DTC-targeted website, banner, email, or social post. If there were identical images used on websites targeting each audience:

• The HCP website might have scientifically descriptive information included in the alt text (if it explained the image)
• The DTC website might have less complex language that may be easier for a patient to understand

The overall best practice is to strike a balance - use keywords naturally when they are relevant and properly descriptive, but prioritize accurate, literal descriptions over artificially shoehorning keywords. After all, the primary purpose is to convey image content and context effectively for users.

Sometimes it’s Important to Say Nothing

While descriptive alt text is important for informative images, it's equally important to properly utilize null or empty alt text ("" – which includes a space) for decorative images that don't convey meaningful content. Screen readers will skip over these, avoiding unnecessary clutter. However, if alt text is left completely blank, some screen readers may still announce "image" unhelpfully. Using null alt text eliminates this while allowing decorative images to properly pass accessibility checks. Informative images like product shots, illustrations, charts/graphs and (sometimes) icons that convey significant meaning or functionality should take precedence over purely decorative images without informative value.