Why and how you should include alt text on your website for a visually-impaired audience

May 28, 2019

Welcome to the ADA Compliance series in which our expert shares advice with hoteliers striving to comply with the Americans with Disabilities Act. This is part 3 of the blog series.

Part 1: How to ensure your hotel website is ADA compliant

Part 3: What to do if your hotel receives an ADA web compliance lawsuit

Visual content plays a huge part on all hotel websites. Great images allow a hotel to showcase their property, bring their destination to life, and provide important information to potential guests. However, for visually impaired web users, visual content needs to be represented in a different way.

That’s where alt text comes in.

In this first of our 3-post series on ADA compliance, we explain what alt text is, why it’s important to be ADA compliant, and how to use it correctly on your hotel website.

What is alt text?

Alt text (also known as “alt attributes” and “alt descriptions”) is used to describe the images on your website. It’s most commonly used for content such as photos, graphics, animations, and videos.

An alt attribute begins with the character sequence alt= and then contains the alt text within quotation marks. For instance: alt=”businessmen drinking cocktails”>

However, most website platforms let you add alt text without having to enter any special characters. So you could simply write: businessmen drinking cocktails.

Below, you can see the how the alt text box looks on Travel Tripper Web:

Why does alt text matter?

Adding alt text is often used as a search engine optimization tactic. The search engines can’t “see” images on your website. By adding alt text, you describe the image so it can be found and understood by search engine crawlers, thus ensuring an image is properly indexed.

Another major reason to include alt text on your website is accessibility. When visually-impaired or blind users visit your website, their screen readers will read the alt text out loud so they understand any on-page images.

It’s important to remember that visual content is sometimes used instead of text to provide information or context. If you don’t use alt text correctly (or don’t use it at all), visually-impaired users may miss a vital part of your message. Aside from a diminished online experience, this lack of care and attention can create a negative feeling towards your brand.

With that in mind, here are some of the best alt text practices to bear in mind.

1. Keep it simple

First and foremost, keep your alt text simple. It should give a brief and accurate description of what is seen in the photo. As a rule, aim to limit alt text to 125 characters or less — some screen readers will stop reading alt text after this point.

2. Be specific when necessary

While bearing the above points in mind, there are times when it’s best to make your alt text more specific. For instance, perhaps you have an image that tells a story or creates a mood that wouldn’t be done justice by a basic description. Take the following example:

The most basic alt text here would be: “couple on beach”

Better alt text would be: “couple running on beach at sunset”

Finally, if this beach was right outside the hotel, the name of the hotel could also be included: “couple running on beach at Boutique Hotel at sunset”

In this last example, the added information provides a richer mental image and relevant information that helps to sell the hotel and inspire the target audience.

3. Decorative images

Sometimes, images are used just for decorative reasons. An example might be a decorative border to enhance the visual design of a web page. In an instance like this, you should use a “null” (empty) alt text.

An empty alt attribute is written like this: alt=””.

When a screen reader encounters an image with an empty alt attribute, it will simply skip over it. If you don’t include an empty alt attribute, the screen reader will read the file name out loud. Needless to say, this can be pretty distracting and hinders the user experience.

The Web Content Accessibility Guidelines (WCAG) have an in-depth article that explains how to apply empty alt attribute to decorative images.

4. Alt text should not start with “picture of” or “image of”

When using image alt text, don’t include: “picture of” or “image of”. Screen readers automatically announce an image as an image by looking at the article’s HTML source code. So an alternative text, such as “Image of a swimming pool” would be read by a screen reader as “Image, image of a swimming pool”.

5. Write for the user, not just for SEO

When you’re selecting your alt text, make sure that you focus on your users — not the search engines. Here’s what Google has to say on the matter:

“When choosing alt text, focus on creating useful, information-rich content that uses keywords appropriately and aligns with the context of the page. Avoid filling alt attributes with keywords (keyword stuffing) as it results in a negative user experience and may cause your site to be seen as spam.”

In summary, alt text should not purely be seen as a chance to boost your SEO. And as Google explains, doing so can potentially harm your search engine rank.

Of course, there are times when you should include a target keyword. For instance, it’s clearly appropriate to mention the name of your hotel in images of your hotel lobby. Ultimately, the best advice is to use keywords sparingly and include them when they’re relevant to the image you’re describing.

Alt text best practices

Every image on your website should have alt text that describes its content. Not only is this important for SEO purposes, it’s essential to ensure that your blind and visually impaired audience receives the best possible user experience. To learn more about ADA compliance, check out our recent post which provides more tips to ensure your hotel website is ADA compliant. Stay tuned for the next post in our latest ADA compliance series!

Travel Tripper can work with you to ensure your hotel website conforms to standards of ADA compliance. Request a consultation today to get more information and support!