There are many ways to add images to your website, and some ways are better than others. Images on your website have both SEO and accessibility considerations. Can a screen reader read your image and communicate any important information it contains? Does a search engine know what this is an image of, and if it makes your site more relevant?
Here’s a quick breakdown of the most common implementations and what to keep in mind.
For the Non-Developers
This is about to get a little technical, but fear not! As an average WordPress user, your job is fairly simple. When you add an image to your posts or pages via the WordPress editor, be sure to configure an informative `alt` tag on that image. See the screenshot below of where exactly to find that setting in your media library.
And that’s it! Both screen readers and search engines will read that, making your content readable to all. Just be sure you aren’t focusing on the SEO over the accessibility. The content should be an accurate description of the image in question, and not just keywords you hope to rank for.
Background Images
Using CSS, images can be implemented as a background on HTML elements. Generally, I discourage this except for things like textures or exclusively ambient images. The background-image tag is impossible for screen readers to make any sense of, so elements using it are inaccessible to people using assistive technology. Search bots won’t get anything out of it either. This strategy should only be used when the image is relaying no content and is strictly aesthetic.
One thing I often see on sites I’m replacing is background images used for buttons, or in site navigation. Here’s a great example:
Just looking at that, you can’t really tell how they were implemented. Let’s assume these three buttons are made up of three images. Those images contain the background, the text, the green on the left and the icon, all in one image. Someone using a screen-reader will be able to read the URL of the link, but won’t have any human-readable context to know where these go. How can we make this more accessible?
The Best Solution: Replace Them
Ideally, we’ll replace these images with native content. The background in each is simply visual sugar, so we could add a container here, give it a background image, and then give it a couple children with real content.
<div class="button">
<a href="/business/">
<span class="button-icon">
<i aria-hidden="true" class="business-icon"></i>
</span>
<span class="button-text">
Business
</span>
</a>
</div>
And then, of course, associated styles (CSS) somewhere.
Since the text is now native HTML (see line 7), search engine bots can read and know what the link is for, and assistive technology can read it and tell users where they’re about to go.
I’ve also turned the icon into a true icon (see line 4). This could use an icon font, an SVG, or even an img element. The important thing is that we’ve added aria-hidden="true". This tells the screen-reader that this icon is visual only and provides no content. Don’t bother reading it to the user.
True Image Tags
Sometimes due to various constraints or decisions up-the-chain (custom logo font, refusal to buy a web-safe font, a really persistent designer, etc), there’s no choice but to use an image for your button.
Fortunately, we can do this using a true img HTML tag, rather than a CSS background image. img tags can be made pretty accessible compared to background images. They support what’s called `alt` text, which is a description of the image that screen readers and search engine bots read. This will allow a screen reader to tell its user where the link is headed without cluttering up your pretty button for average users.
<a href="/business/"> <img src="/images/button-business.jpg" alt="Link to business page"> </a>
This is now extremely informative to screen readers, and gives Google an idea of just what this image is about.
Images in Your Content
The rules for images in your content are pretty similar to those for images used in a functional way (like the button example above). Make sure that all images have alt tags so that screen readers and search engine bots alike can tell what the image is about.
Black Hat SEO in alt Tags
You may have noticed that I keep mentioning that search engines as well as screen readers will read these `alt` tags. I mention it because it tends to be a nice bonus to providing accessible content.
Unfortunately, there was a time (to some extent, we’re still in this time!) when digital marketing and SEO shops were using image `alt` tags to stuff keywords they wanted their website to rank well for. You might see ten images on the page with `alt` tags that read something like “best CPA in Allentown, PA”, even if those images are of spreadsheets. Even worse, perhaps they read “accounting CPA quickbooks allentown tax returns business taxes”.
This is very confusing for users of assistive technology. Furthermore, keyword stuffing like this is dinged by Google, who is working every day to make sure their algorithm weeds out practices like this. Avoid it at all costs.
In the example of a stock photo of a spreadsheet, it’s probably purely decorative. If that’s the case, and the image offers no content to users, it’s perfectly acceptable to add an empty `alt` tag.
<img src="/images/spreadsheet.jpg" alt="">
Accessibility and ADA Compliance
I’ve talked to big companies that have been threatened with lawsuit based on accessibility on the web. It’s true, you can be pursued under ADA compliance laws for poor accessibility on the web. It’s rare, and probably tough to pursue (don’t consider this legal advice).
That being said, there’s no reason, no matter the size of your business, that you can’t work toward an accessible website. It’s more than just images, and Sterner Stuff is happy to help you get there. If you’re interested in an accessibility audit on your website, reach out to me today! Unless you have a pages on pages of content, a flat $200 will earn you a report on the changes you can make to be more accessible.
"*" indicates required fields
Leave a Reply