Image accessibility attributes are your secret weapon to improving your website’s search engine optimization (SEO). Before you get too excited...there’s more to accessibility attributes than just Alt Tags. You were going to shout “Alt Tags” before I said that, right? You’re very smart. When it comes to image accessibility, Alt Titles and File Names also play a critical role for both accessibility and user experience.
So, what do image attributes have to do with SEO? Search engine bots function much like screen readers. They “crawl” the HTML code behind your website and communicate data back to the user. With all of the internet’s advancements, we now have an endless supply of visuals that can be used to enhance websites. Photos. Flow Charts. Memes. If your website includes visual content without accessibility attributes, your SEO suffers. Why is that?
- Search engines cannot “see” visuals on the web. That means, without proper tagging, your image will not surface in image searches.
- Inaccessible websites often deliver a poor user experience (UX) for site visitors, decreasing click through rates (CTR) and web traffic and, ultimately, your SEO.
- If you’re not writing your own accessibility attributes, you’re missing out on an opportunity to include keywords to draw search engines and customers to your site.
It is imperative to include basic image attributes to ensure the success of your site’s SEO and accessibility. To re-cap, those basics are: Alt Tags, Alt Titles and File Names.
Cool. Got it. Can you break those down for me?
Of course!
Alt Tags -- AKA Alternative Text (Alt Text). OR: Image Descriptions.
- If the image does not provide additional information, it is decorative and does not require an Alt Tag. In this case, you would just leave the Alt Tag empty like this: alt="".
- In all other cases, stick to 125 characters or less. Screen readers stop reading the description out loud to the user after that.
- If you have to use more than 125 characters to describe the image, consider breaking up the image or transforming it into a graphic that is designed to be read aloud by a screen reader. If it’s not possible to include a graphic, use a long description. We’ll cover that a bit later.
- Provide as much context and detail as needed to fully describe the image. This is a perfect opportunity to dust off your SEO storytelling skills and use targeted keywords!
- Nowadays, more people are conducting searches via images. This is a fantastic way to improve SEO and entice users to click on your website! You’ll show up in more searches when your Alt Text is specific and concise.
- Close your eyes. Are you able to picture the image as you described it?
- But -- Avoid keyword stuffing. It is more important to accurately and efficiently describe the image.
Alt Titles -- AKA Alternative Titles. OR: What you see when you hover your mouse over an image or when you have a bad internet connection.
- Think of it like the greatest hits from your personal Alt Text library. What’s the best way to describe this image in 1-5 words?
- Pause and reflect: What words would someone searching in Google Images use to find your image?
- Although Alt Titles are not used directly for site rankings, they are great for improving UX -- which improves your SEO.
- Again, avoid keyword stuffing.
File Name -- AKA File Name. OR: The words that come before .jpg or .png.
- The file name should be the most concise version of your alt attributes.
- The file name should also be specific to each image. For example, avoid naming 10 images with the file name “pretty-sunset.jpg”.
- Use hyphens to separate words; avoid spaces and underscores.
- Avoid special characters. Do not use any of the following: /*?”<>|[]&$:
- Say it with me one more time: AVOID KEYWORD STUFFING.
Just don’t keyword stuff, okay?
Alright, now you’re a pro. Let’s see these accessibility features in action.
Images
Accurate Description + SEO Storytelling = Web Traffic
- Identify the primary subject or focus of your image.
- Next, identify the meaning or function of the image on the page.
- Pinpoint any relevant keywords -- Bonus points if they’re specific to your brand.
- Ask yourself: What would someone type into Google if they were trying to find your image or website?
- Use the following guidelines as a roadmap for every visual on your website: Focus. Keywords. Specificity.
Alt Text: Toy Vintage Fiat Hatchback with 2 Lego figurines: a male at the driver's seat and a female by the trunk with 2 suitcases.
Alt Title: Toy Fiat with Lego Traveling Couple
File Name: toy-fiat-lego-couple.jpg
**See how specific, yet concise that is? There’s a good chance our image will pop up when someone searches “Toy Fiat” or “Lego Figurines”.**
Advertisements
Set your brand apart from the rest and increase your sales!
- One of the cardinal sins of advertisements? Not labeling the image as an “advertisement”! It is as simple as including “Advertisement” or “Ad” in your alt features.
- Identify the Call to Action (CTA) for your ad. How will you entice customers to view your ad? What action do you want them to take next?
- Capture the context and keywords for your advertisement.
- Most ads include text. You must include text in your accessibility features. Screen readers and search engines cannot decipher your visual ad.
- Lead with your CTA. It may not be as simple as writing the text in the order it appears on your ad. Provide context so screen readers and search engines know exactly what you’re selling.
Alt Text: Ad. Memorial Day Sale. First meal free! Healthy delivery service, $5 a day. Image: 2 salads with shrimp, watermelon and feta.
Alt Title: Ad for Meal Service First Free
File Name: ad-meal-service-first-free.jpg
**Notice that the CTA was at the bottom of the ad, but we moved it to the beginning of our Alt Text. From there, we provided context and captured meaning in less than 125 characters. Disclaimer: This ad is for educational purposes only. I know! It’s a pretty sweet deal, right? Alas, it’s fake.**
Memes and GIFs
The Art of Infusing your Alt Text with Humor
- Memes and GIFs present a unique challenge. They often have text, are sometimes animated and the punchline is visual.
- Just like with ads, preface your image accessibility attributes with “Meme” or “GIF” accordingly.
- Start by pinpointing what makes it comical -- The image itself? The punchline? The cultural reference?
- Irony is your best friend here, so are adjectives.
- Once you’ve identified the comedic element, try to play up the anticipation of the punchline.
- In the 2019 study “Making Memes Accessible,” scholars found the following prompts to be critical in writing Alt Text for memes:
- Who is the subject;
- Subject’s actions;
- Subject’s emotions or facial expressions;
- The source material (i.e. film, book or cultural phenomenon); and
- Any distinctive background features.
- Now, for GIFs. PROCEED WITH CAUTION. GIFs are inherently inaccessible due to their quick animated nature. As an alternative, Penn State recommends using images that break down the moving image frame by frame (like a comic strip!). You could also use a video as a replacement for the GIF itself. Just make sure you label your alt attributes as “Sequence of Images” or “Video” accordingly.
Alt Text: Meme. A distraught pug wears a denim jacket. Top text: Shows up for Casual Friday. Bottom text: Realizes It’s only Thursday.
Alt Title: Casual Friday Pug on Thursday MemeFile Name: casual-pug-gaffe.jpg
**The funny part is that this pug is wearing a denim jacket and looks absolutely devastated. And then we have the punchline. See how we focused on the pug first?**
Recipes
Because beautiful pictures of food should be for everyone.
- Online recipes typically include a printable recipe card that is, in fact, an image. For the purposes of this lesson, let’s assume that your recipe is one of those images.
- I know what you’re thinking. It’s impossible to stay under 125 characters for a recipe!! You’re right. What do you do? Include alt text and a long description.
- For the alt text, you will probably only have time to cover the recipe title and any other pertinent info that provides context.
- For the long description, bring it home by providing further relevant details, as well as the remaining text in the recipe. The first sentence of the long description should provide an introduction without repeating the Alt Text. We suggest providing further context and detail for the user.
- Pro tip: Include a separate image of the finished product before providing instructions for your recipe. This will provide context for the user to reference before listening to the description of the recipe.
- When writing your alt text, stray away from visual cues like “cook until golden brown.” See if you can include alternative sensorial cues (especially tactile or olfactory). A great alternative to the aforementioned would be: “Insert a toothpick in the center. Cake is done when it comes off clean.” OR “Cake will have a toasted marshmallow scent when finished.”
- Write out any fractions, degrees and any other symbols associated with baking so the screen reader will read them aloud properly.
- Use bullet points and paragraphs for clarity, and periods and commas for screen reader pauses.
Alt Text: Recipe for Chocolate Peppermint Cookies by Cooking Classy plus a photo of the finished product.
Long Description:
A side-by-side image of the finished product and full recipe for Chocolate Peppermint Cookies. The finished product is a plate of chocolate cookies dipped halfway in white chocolate with peppermint shards accented by a mini peppermint stick.
Ingredients for the recipe are as follows:
- 1 and two-thirds cups of all-purpose flour.
- 1 cup of unsweetened cocoa powder.
- 1 teaspoon of baking soda.
- One-half teaspoon of salt.
- 1 cup of softened unsalted butter.
- 1 and one-quarter cups of granulated sugar.
- A three-quarter cup of packed light brown sugar.
- 2 large eggs.
- 2 teaspoons of vanilla extract.
- 1 teaspoon of peppermint extract.
- 16 ounces of chopped white chocolate.
- A quarter cup of crushed peppermint bits.
An instructional label reads: prep time of 35 minutes, cook time of 32 minutes, total time of 1 hour and 30 minutes.
Directions are as follows:
- Preheat oven to 350 degrees Fahrenheit.
- Line baking sheets with parchment paper.
- Whisk together flour, cocoa powder, baking soda, and salt.
- Mix for 20 seconds. Set aside.
- Mix together butter, sugar, and brown sugar until creamy.
- Mix in eggs one at a time. Then, blend in vanilla and peppermint extracts.
- Mix for 30 seconds. With mixer on low, slowly add in the flour mixture and mix until smooth with no lumps.
- If dough is sticky, chill as needed.
- Scoop dough by rounded tablespoon and shape into balls. Space on cookie sheets 2 inches apart and flatten slightly.
- Bake about 8 minutes, cookies should be slightly soft in the center and firm on the edges.
- Cool on baking sheet for several minutes, then transfer to wire rack to cool for 5 minutes.
- Transfer to an airtight container to fully cool.
- Melt white chocolate in microwave on 50 percent power in 30 second increments until melted and smooth.
- Dip half of each cookie in white chocolate and sprinkle with peppermint bits.
- Chill for 10 minutes. Enjoy.
Alt Title: Recipe for Chocolate Peppermint Cookies
File Name: chocolate-peppermint-cookies-recipe.jpg
**Whew!! Notice how we altered the visual cues? This makes the recipe more accessible. In addition, we spelled out all of the symbols for clarity and brevity.**
Infographics
Don’t panic. There is an order to describing these.
- Start by making your Infographic as simple as possible. Not only does it make it more visually appealing, it also makes it more accessible.
- Just like with recipes, you’ll need Alt Text and a Long Description.
- The Alt Text covers the broad details, such as the title of the infographic, type of graphic (pie chart, flow chart) and source. The primary purpose of the infographic should be included.
- The Long Description includes a complete description of the infographic, starting with the broad details (Title and Subtitle) and works towards more specific details (Charts and Data Points). The information is usually presented from the top down and left to right, however this is not always the case. Focus on how the information naturally flows through the graphic. Identify the most common reading order and use that as a guide for the order of your description. For instance, you wouldn’t want to describe the data in a chart before describing the key. Here’s our cheat sheet: Title, Subtitle, Key, Type of Chart/Graph, and Data.
- Remember to write out percentages, fractions and other symbols.
- Use paragraphs and bullet points to break up the description and punctuation for screen reader pauses.
Alt Text: Infographic entitled Snuggliest Dog Breeds shows a breakdown from the 2020 Snuggly Dog Convention.
Long Description:
The infographic provides survey results for the top 5 snuggliest dog breeds. Subtitle reads the 2020 Snuggly Dog Convention: A Totally Biased Opinion from One Person.
Below this, a Color Key labeled Dog Breeds by Type. The 5 categories listed in the color key are as follows: West Highland White Terrier, Corgi, Labrador Retriever, French Bulldog, and Pug.
Next to this, a pie chart that corresponds with the color key. The data points for the pie chart are as follows:
- 45%, West Highland White Terrier.
- 30%, Corgi.
- 15%, Labrador Retriever.
- 7%, French Bulldog.
- 3%, Pug.
In the footer is the Scribely logo and an orange California poppy flower icon.
Alt Title: Pie Chart for Snuggliest Dog Breeds
File Name: infographic-snuggly.docs.jpg
**The infographic itself is pretty straightforward and the statistics are front and center. Anyone who has a different opinion about snuggly dogs is wrong. Just kidding.**
In Conclusion
As you can see, including image accessibility attributes like Alt Tags, Alt Titles and File Names improves your website’s accessibility and SEO. Focus on accurately describing your images through your accessibility features so screen readers and search engines can better understand your visual content. Your website will show up in more results and provide a better user experience for all site visitors, thereby driving up your SEO.
When you follow Scribely’s tips, you will see that alt attributes do not have to be dry and robotic. The more you allow your personal or brand voice to shine through, the better the UX and the more you will stand out. The most important thing to remember is to succinctly and effectively convey the content of your visuals. Bonus points if you incorporate your brand’s keywords. Help others and your business and let your creativity shine!
Interested in learning more about how the experts at Scribely can help you meet your accessibility goals? Contact us today for more information!
