The Importance Of Alt Text For Web Accessibility

Alt text is an important part of web accessibility.

It provides people who are visually impaired (or who use screen readers) with a way to know what images are showing without actually being able to view the images. How does it do that? By providing a textual alternative. For example, a textual alternative to a video or an audio would be a transcript. In the case of images, alt text is the textual alternative.

What this means is that instead of seeing a picture, their screen reader will explain to them what the image is showing. But the screen reader can't accomplish this without your help! And all you'll have to do to help is provide alt text.

1. Alt Text: What Is It And Why Should You Care?

Alt text is text that you add to your website images (and social media images). Usually, someone without a screen reader won't be able to view the alt text. There are exceptions, however! Such as Twitter, which allows anyone to view alt text just by clicking the Alt Text button on the bottom left of the images/GIFs. Example below:

And there are two very good reasons why you should care about alt text.

1. It provides a way for people who are visually impaired or you use screen readers to access the content. As a business, it’s important for us to make everyone feel welcome - and they won’t feel that way if part of our content is inaccessible to them, which is why we are working toward making sure our images include alt text.

2. It is also helpful for search engine optimization. Google and other search engines will be able to understand the content of your images, and will use that understanding to help you rank for search queries that relate to your business.

2. How To Add Alt Text To Images

How you add alt text to images depends on what platform you are using. However, once you’ve learned how to add alt text to a couple of platforms, we’re sure you will feel more prepared to add it to others. To start off your learning journey, here is a general step-by-step process:

General Step-By-Step

1. Add the image.

2. Click “edit image.”

3. Under an alt text section, begin typing a description of the image.

4. Click “save.”

These are the steps you will have to take on most platforms. But we also want to be more specific (and provide images to help everyone along), so here is how you can add alt text to a Squarespace website:

Step-By-Step: Adding Alt Text To A Squarespace Image

1. Add an image to your website page.

2. Click the image.

3. Click the pencil icon that appears in the top left of the image.

4. Scroll down until you see “image alt text.”

5. Now all you have to do is type a description of the image!

3. How To Create An Effective Alt Text For Your Website

When creating alt text for your website, keep the following tips in mind:

• Keep it short and to the point. Alt text should be no longer than a few words.

• Use keywords wisely. Include keywords that accurately describe the image and that people are likely to use when searching for images.

• Describe the image accurately. Be sure to describe what is actually in the image, rather than what you think someone might see.

• Avoid using generic terms such as "image" or "picture." These terms are not descriptive and do not help people with disabilities or search engines understand the content of your images.

4. Examples Of Good And Bad Alt Text

If you aren’t familiar with writing alt text, then you’re probably wondering how to write it - and how to write it good. Here is an example that will help guide you!

Good Alt Text:

• "A close-up of a blue iris flower"

Bad Alt Text:

• "A picture of a flower"

Basically, you should be as descriptive as possible. Remember that people who need alt text can’t see the image, and that they would want it all described to them as clearly as possible. Think about how you would like something described to you if you were talking about an object or a scene over the phone.

Conclusion

We hope this blog helped you to understand the importance of alt text (and more)! We are happy to answer any other questions that you might have. And we’re also happy to help you with the development of your website. Click the button below to see what we can do for you!