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

UPDATED: APRIL 2019

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 how all the different elements of a page fit together.

2. For accessibility

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

There are many web users who are visually impaired or have other disabilities that may 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 text elements of your website for accessibility and SEO?

Alt attributes

One of the most effective things you can do to 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.

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 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 – Apparently, 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 text that’s in close proximity to non-text elements to see if the text provides a clue as to what the non-text element is about.

This means that adding captions to your images in another effective way to optimise your web pages. Captions are great for providing 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).

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 may present text on a website in the form of an image file. Inspirational memes and website headers often feature a hero image with overlaid text, but may 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 Facebook 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.

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.

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 see how it views the page.

You can also see how Googlebots view 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 present content such as an image that’s being used to add information to an article? Or does it have a functional purpose such as a clickable button that goes through to a checkout?

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

Conclusion

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 diversity, and can help to increase engagement. Accessibility for ALL website visitors and search engines needs to be a priority for every website.

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
• Want to know how Google views your website? Try:
  • Google Search Console’s URL Inspection tool
  • Browseo