Optimising non-text elements of your website for accessibility and SEO

(Updated for 2022)

When working on your on-page SEO, it’s essential to optimise the non-text elements on every web page as well as the copy and meta data.

Examples of non-text elements include:

• Images
• Infographics
• Graphs
• Charts
• Backgrounds
• Videos
• Audio clips
• Animations
• Slideshows
• Graphical buttons
• Captchas
• Downloadable files such as PDFs

There are two key reasons that you should optimise the non-text elements of your website:

1. To create context for search engines

From an SEO perspective, search engines have become pretty sophisticated when it comes to understanding the meaning of text on a page. However, they’re less able to identify other forms of content.

Optimising non-text elements helps to show search engines what the visual elements mean and how everything on the page fits together.

2. For accessibility

Another vital reason to optimise the non-text elements of your web pages is accessibility.

Many web users are visually impaired or have other disabilities that make it hard to decipher the different elements on the screen. These people use screen readers to hear the content read out loud. Non-text elements that haven’t been tagged appropriately – or at all – can confuse and damage the user experience.

But what do you need to do to optimise the non-text elements of your website for accessibility and SEO?

In brief, here are my top five recommendations:

1. Use unique and relevant images
2. Use the highest quality format possible, but always resize your images to the size you want to use and compress the image file before uploading to the site (do not upload massive images as this will slow your site down!)
3. Include your focus keyword in the file name of an image before uploading it to the site.
4. Give each image a strong and relevant alt tag that describes the image
5. Consider adding captions to visual elements on the page

Let’s look at that in a little more detail…

Unique and relevant images

While Google and other search engines don’t necessarily care whether an image is unique and relevant or not, images do impact the user experience.

If you’re predominantly using the same boring stock photos that everyone else is using, this can give a poor first impression of your site. Your potential customers may struggle to see what sets your business apart from everyone else.

This cookie-cutter feel can be a red flag about things like your marketing budget (i.e. you’re not earning enough to have photos taken), attention to detail, lack of originality and a wishy-washy brand identity  – all reasons for people to bounce away from your site (and business) without finding out more about what you offer.

Although Google might not attribute SEO value to the relevancy or uniqueness of an image, they do assign value to dwell time, lower bounce rates, and a better user experience.

The best approach is to use unique and relevant images when possible to show people what they can expect when they buy from their business. This might include pictures of you, your team, your premises or your products or services in action.

If your budget is tight, think about where unique images would have the most impact (for example, your Home page). You can still use stock photos but save them for blog articles.

You can find some great advice about choosing the perfect pictures for your website here.

Resize and compress image files

Images are often the ‘heaviest’ elements on a web page and if they’re not properly optimised they can hurt the page load time, especially on mobile phones. This results in a poor user experience and a low PageSpeed Insights score.

Have you ever visited a web page only to have the layout shift around as pictures slowly load? Have you gone to click on a link, only for it to jump to a different position, causing you to click on the wrong thing? These problems are common on news sites that feature a lot of adverts between the paragraphs of text but they happen on other sites too and are usually caused by images taking too long to load.

Google knows this is frustrating, which is why it rolled out its Page Experience Update towards the back end of 2021. This update looks at how long content takes to load, content shifts and the visual stability of a page, seeing these “Core Web Vitals” as necessary for a great user experience.

My recommendations are, therefore, to resize your images to fit the size you need and compress the image file before uploading it to your site.

Two free tools to help you resize and compress your images:

• Simple Image Resizing Tool
• Image file compression Tool

What are the best formats for web images?

Generally, the best formats for web images are:

• JPEG – You can adjust the quality level for a good balance of quality and file size. JPEGs work well for product or blog images but might not be as suitable for infographics or images featuring text as they can lose some quality when compressed. They are supported by most browsers and operating systems.
• PNG – Produces higher quality images, but also has a larger file size so they can slow your web pages down, especially if high resolution. PNG files are particularly good for infographics, banners, screenshots and images that include pictures and texts as they offer better text readability.
• GIF – Only uses 256 colours and is the best choice for animated images.

Other image formats are available but they may not be supported by all operating systems or browsers.

If you want to understand how well the images on your website are loading and if they might be affecting the user experience, I recommend the following tools:

• PageSpeed Insights
• Mobile-friendly test
• Google Search Console Core Web Vitals

Alt attributes

One of the most effective things you can do to improve accessibility is to add ‘alternative (alt) attributes’ to any non-text elements on every page of your website.

Alt attributes refer to text that is used to tell search bots what a non-text element is or what it points to if it links to another web page.

People sometimes refer to alt attributes as ‘alt tags’ but ‘alt tags’ are just one type of alt attribute. ‘Image title tags’ are alt attributes too.

You can read more about Alt tags vs. Image title tags here – this should help to clear up any confusion!

Adding Alt tags to images

If we start by thinking about the images on your website, each one should have an alt tag. This is the text that appears inside the image container when an image can’t be displayed, or when screen readers or search engines are looking at an image.

If you have a WordPress website, you’ll notice that you can fill in an ‘Alt Text’ field whenever you upload a file to the Media gallery. Here’s an example screenshot:

Another option is to add a piece of HTML code to an image to tell search engines or screen readers what the alt text should be. For example, if I were to feature a picture of me on a web page, the alt tag would ideally be ‘Hazel Jarrett’ as below:

<img src=”hazel jarrett.jpg” alt=”Hazel Jarrett”>

But what makes a good alt tag? Here are some helpful dos and don’ts:

DO

• Keep your alt tags short – If you have a lot to say about an image, perhaps because it’s important for people to have a full description within the context of the article in which it appears, then it’s usually better to add a caption or provide a paragraph of copy featuring the description below the image.
• Aim for alt tags of 125 characters or less – Some screen readers struggle with alt tags that are longer than this.
• Make sure the alt tag accurately communicates what the non–text element is – Be concise but descriptive and make sure that you write for people, not search engines. It’s OK to use your focus keyword but do it in a natural way.

Here’s an example:

OK alt tag: <img src=”dog.jpg” alt=”Dog”>

Good alt tag: <img src=”dog.jpg” alt “Blue short-haired dog”>

Best alt tag: <img src=”dog.jpg” alt=”Adult blue Weimaraner dog laying down”

• Ensure that every image has an alt tag – If you have a text link next to an image link and they both go to the same URL, you might decide to give the image an alt=”” tag to say that the alt text is null. This will stop a screen reader from repeating the link. Equally, decorative background images such as clouds or patterns don’t need a descriptive alt tag because they don’t add to the meaning of the page. They should still be marked as alt=”” for search engines and screen readers to understand that they can ignore these images.

DON’T

• Keyword stuff – Many businesses use alt tags as a place to hide a list of keywords or keyword-rich copy, but imagine how boring and unhelpful it must be for a person using a screen reader to listen to this. Keyword stuffing your alt tags is definitely a black hat practice.
• Use the same copy for your alt tag as that around the image – If you plan to add a caption or image title tag to a non-text element (see below), you should ensure that they are each unique rather than repeating the same phrase in three different places. Again, this is to provide a good experience for people using screen readers to access the content.
• Say ‘Image of…’, ‘Graphic of…’ or ‘Link to….’ in an alt tag – You should always avoid using phrases like these in your alt tags. Going back to my earlier example of adding an alt tag to an image of me, it is enough for the tag to say ‘Hazel Jarrett’ or even ‘Hazel Jarrett, SEO+’ without needing to state, ‘Image of Hazel Jarrett’.

Captions

When trying to decipher the different elements on a web page, search engines break the content into segments. In doing this, they look at the text that’s close to non-text elements to see if it provides a clue as to what the non-text element is about.

Adding captions to your images is another effective way to optimise your web pages for accessibility. Captions provide context and extra snippets of information that may not sit within the flow of an article but are relevant to the topic nonetheless.

It’s helpful to signpost what you’re captioning by saying, Figure 1: <Insert caption>, Photo above: <Insert caption> or Header image: <Insert caption> as examples. This again helps to give search engines and screen readers a context for the text and how it relates to a nearby image.

Although it isn’t a widely discussed or used tag, you can add a <figcaption> tag to your captions to help Google and screen readers understand them. Here’s an example from w3schools.com:

Image title tags

As we mentioned above, an ‘Image Title Tag’ is a different HTML alt attribute to ‘Alt Text’; it’s a title that appears when you hover your mouse pointer over an image. If you check out a past article from Moz about optimising images for search engines, you’ll see that each of the images has an Image Title Tag.

Adding Image Title Tags can offer an extra layer of optimisation for non-text elements. If you do decide to use Image Title Tags in addition to Alt Text, ensure that they each use different wording so that a screen reader doesn’t read out duplicate tags. The same goes for your captions!

Optimising infographics

Infographics experts, Venngage, recently updated their Visual Marketing Statistics Survey of 300 online marketers and found that 40% of respondents rated Infographics as the best visual elements for engagement.

Knowing this, it’s easy to see why infographics are widely used and a valuable commodity to any business. But how do you make ensure that an infographic is as valuable to your SEO efforts?

There are several ways to optimise infographics – whatever approach you take, you should:

• Make sure that you give your infographic a descriptive file name such as ‘Local SEO infographic.jpg’ rather than a generic name.
• Give your infographic a short, descriptive alt tag (as described above for other images).

QuickSprout has a guide to optimising infographics that you might find helpful.

Longdesc

Many businesses decide to create a text alternative of an infographic:

• You can create a long text alternative to your website using the longdesc attribute. This is an HTML tag that provides a link to a separate page where people can view a text description of the infographic.

However, longdesc is poorly supported by some screen readers and the tag may only be visible to a small selection of your website visitors, meaning the infographic is not accessible to everyone.

• One option to overcome this is to create a text alternative of the infographic that sits below the image itself. If you do this, it’s helpful to add a heading such as ‘Text alternative of infographic’. Many website visitors prefer this approach because it means they don’t have to navigate through multiple pages to understand an infographic.
• Otherwise, you could link to a different page where the text description of the infographic can be found. If you choose to do the latter, you should use meaningful anchor text such as ‘Text alternative for local SEO infographic’ – this will help search engines and screen readers understand the context of the destination page.

Describedby

If you do decide to direct people to a separate page featuring a transcript/description of the infographic, you should think about whether you want to optimise the original page or the transcript page for your chosen keyword/phrase.

Optimise both and they could be in competition with one another in results pages!

• You could also use what’s known as the aria-describedby attribute to describe your infographic. This is an alternative to the longdesc attribute that is better supported by screen readers. You can read more about how to implement the aria-describedby attribute here.
  
• A different but effective method is to create the infographic in HTML/CSS. This means that search engines and screen readers will see the text on your infographic as ‘real text’ rather than as an image.
  
  If you do use HTML/CSS to create an infographic, it’s important to consider the reading order and headings, and you should test the infographic across browsers and different assistive technologies. One benefit of HTML/CSS infographics is that they can be magnified without becoming pixelated.

Text as images

It’s not just infographics that present text on a website in the form of an image file. Memes and website headers often feature a hero image with overlaid text but can be impossible for search engines and screen readers to decipher.

If you must use text as an image for any reason (a meme is the most common example that springs to mind), it’s advisable to use the text that’s on the image as the alt tag.

In the image below, for example, it would be helpful to make the alt tag: The power of the web is in its universality. Quote by Tim Berners-Lee.

Alternatively, you could add the quote in text above or below the image (this is an effective strategy when posting memes on social media too).

Functional buttons

Many of your web pages may feature functional buttons with calls to action.

This could be Buy now, Add to basket, Read more, or Sign up to newsletter. Search engines and screen readers will see these buttons as images.

If you do have a functional image like this – one that only contains text – it is advisable to use the text that’s on the button/image as the alt text as long as that text makes the purpose of clicking on the button clear.

People who use screen readers often use a keyboard shortcut to list all the links on a page in one place as this makes navigating around a site much easier.

With this in mind, be wary of vague link labels like Click here as, taken without context, it doesn’t tell users anything about why they should click.

Videos

As we saw in our introduction, there are many other file types that present as non-text elements on a web page.

Google recommends using a video sitemap to give search engines and screen readers information about videos on your website.

Another suggestion is that you offer transcripts of your videos so that the content is accessible to search engines and screen readers.

We found a great article over on Wordstream about video SEO that you may find helpful.

Schema Markup

We’ve talked in a past blog about the advantages of using Schema Markup; this is a ‘micro-formatting’ code that helps search engines understand the structure and non-text elements of a web page and even gives context to text elements such as reviews or recipes.

Schema includes code that you can apply to videos, audio files, images and other non-text elements on any web page to tell search engines what they are seeing.

Visit schema.org to find out more.

Checking how your website is seen

If you’re not sure whether the non-text elements on your website have been optimised, it’s worth using a free screen reader program (see the Resources section below) to check how it views the page.

You can also see how Google views your website by using a choice of free or low-cost services (see below).

The key is to ask yourself, does a non-text element add information to an article or is it just there for decoration? If it’s there for decoration, it may not need optimising.

Does it have a functional purpose such as a clickable button that goes through to a checkout? Or does an image add an extra layer of meaning to the written content?

Once you identify the purpose of a non-text element, you can decide on the best approach to optimise it.

Conclusion

Accessibility for ALL website visitors and search engines needs to be a priority for every website.

Non-text elements are a vital part of any web page and should be part of your on-page SEO strategy – they add interest and can help to increase engagement.

As with most aspects of SEO, if you create with your potential customers in mind, you will have a site that Google values too. And the better the user experience, the better it will be for your rankings.

Resources

• Want to learn more about website accessibility? There is some fantastic information about alt text and more at WebAIM.
• Looking for free online screen reading programmes to review the accessibility and structure of your web pages? Try:
  • ChromeVox for Chrome (you can also find it by going to Settings>Extensions>Get more extensions in Chrome and typing in ‘ChromeVox’)
  • NVDA Screen Reader
  • Thunder
  • WebAnywhere
  • Siteimprove Accessibility Checker
  • Other popular free screenreaders are listed here by Usability Geek
• Want to know how Google views your website? Try:
  • Browseo
• If you have a WordPress website, you might want to use an accessibility plugin to check your site. HubSpot has put together this list of the best nine accessibility plugins.

Need some help?

Let’s chat… book a free 20-minute call with me here and tell me about your business and your goals and we’ll take a look at the best way to help you achieve them. Alternatively, see our packages and training below and click for more information.