Writing Alt Text for Accessibility

By entering your email, you indicate that you have read and understood our Privacy Policy and agree to receive marketing from Squarespace.

• Blindness or low vision
• Bright lighting
• Hearing impairment
• Loud surroundings
• Slow internet

How to write good alt text

Your image descriptions should be high quality and easily understood by your audience. Follow these best practices when writing your own alternative text.

1. Make it well-written. Do your best to write alt text in sentence form and follow grammar and punctuation rules.
2. Keep it brief. We recommend keeping alt text to under 250 characters. Focus on the most important contextual details someone needs to know, rather than simply describing the image itself.
3. Be descriptive. Give the information needed to understand the intent of your image. When linking text, explain what you’re linking to: ”Read our report” vs. “Click here”.
4. Be considerate of alternative technologies. Think about how assistive technology works. For example, assistive devices say “image of” before reading alt text, so screen reader users don’t need you to include it in your copy.
5. Keep practicing. Make it a habit to add alt text to any images you post. The more you practice, the faster and better you’ll get at describing image content.

Finally, avoid using AI to generate alt text for you. At this point, AI generators don’t always accurately identify what information the reader needs to know about an image.

Decorative vs. essential content

You don’t necessarily need to write alt text for every single image on your website. To identify which images need alt text, decide which are decorative images and which are essential.

Decorative content isn’t required to understand the meaning or use of your web page and doesn’t need alt text. For example, a section divider doesn’t need alt text.

Essential content is anything that’s necessary to understand or use the page. Essential images do need alt text.

An easy way to differentiate between the two types of images is to ask yourself: “If I remove this from the page, does the meaning of the page change?”

File names

Use image alt text best practices for file names too. An accessible file name is descriptive of the image it’s attached to, instead of vague or auto-generated. For example, use “PersonEatingGrape.jpg” instead of “IMG4729.jpg”.

This has two added advantages: Image files are easier for you to organize and better set up for SEO . Appearing in image searches is another great way to drive search engine traffic to your website.

Image alt text examples

Note: This guide is available as a resource to help you get started, but shouldn't be construed or relied upon as legal advice. Squarespace can't provide advice about making your site compliant with any specific accessibility laws, regulations, or standards

Here are two examples of effective alt text for images. Note that alt text is context-specific—alt text that’s good in one scenario won’t necessarily apply to the same photo used in another scenario.

Imagine this photo appeared in a listicle about basic camera types. In that context, a good example of alt text for this image might be: “A DSLR camera and lens in an open carrying case.”

In that context, an example of alt text that needs improvement would be: “Image of a camera on a gray background.”

This example uses “image of”, which assistive devices already say before reading alt text. It also doesn’t give important details about the camera or other objects in the image that would be useful for someone reading about camera types.

An example of good alt text for this image could be: “A set of colorful letter-size envelopes”

In a context where this image is used to break up the page visually without adding any necessary information, you could skip writing alt text for it.

How to make complex images accessible

While alt text is helpful and necessary, it can be hard to fit all the needed information in 250 characters or less. This is especially the case for more complex images like charts, graphs, infographics, and long videos that may need much longer descriptions to get the most important information across.

In those cases, you can:

• Describe the content in detail in your body text. Write a longer description for the image that highlights key points and puts them in context. You can use the alt text to add a quick description and add a paragraph right next to or underneath the image with a longer description.
• Use an image caption. Add a visible caption to your image that explains the details and context of the image.

Alt text and web accessibility are essential, not just “nice to haves” for your website . The more accessible your website is, the more visitors can use it, regardless of their circumstances.