Alt Text

Alt text provides a text alternative for images and helps screen reader users understand the purpose of the image. View the Alt Text Fix-it Clinic recording.

Fix-it Clinic: Writing Alt Text – May 1, 2024

What alt text is, when to use it, and how to make it useful

Read the alt text video transcript.

Quick tips

• Make alt text meaningful and concise.
• Use punctuation and end with a period.
• Don’t include URLs or special characters, such as quotation marks.
• Don’t use phrases, such as “image of” or “photo of”.

Decorative images

If the purpose of the image is purely for decoration, then use null alt text. This tells screen readers to ignore the image.

• In the code, it looks like alt="". Note that there is no space between the quotation marks.
• Sometimes there is a “mark as decorative” checkbox in content creation platforms.

Linked logos

For linked logo images, such as the ones found in website headers, the alt text should tell users where the linked logo will take them. See a few common examples of linked logos.

QR codes

If you display a QR code, you should also provide a visible URL to the QR code target. Use a link shortener for long URLs.

The alt text for the QR code should tell the user the purpose of the QR code. For example, if the QR code opens a registration page, then the alt text should read “QR code for registration”. That is, alt="QR code for registration".

Social media logos

See Simple Linked Images and accessibility approaches for several ways to make hyperlinked social media icons more accessible.

Social media posts

• Provide alt text for images.
• Caption videos.
• Use camelCase or PascalCase for hashtags.