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

47 Shares

When you’re working on the search engine optimisation (SEO) of your website, it’s important to remember that you need to optimise the non-text elements on every page as well as the copy and meta data.

Non-text elements can refer to images, graphs, charts, backgrounds, videos, audio clips, animations, slideshows, infographics, graphical buttons, captchas, downloadable files such as PDFs, and others.

There are two key reasons that you should optimise the non-text elements of your website. From an SEO perspective, search engines have become pretty sophisticated when it comes to understanding the meaning of text on a page but they’re less good at identifying other forms of content. Optimising non-text elements helps to show search engines how all the different elements of a page fit in with an overarching topic.

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 significantly confuse and damage the user experience.

So, where should you start with optimising 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 describe to 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’. In fact, ‘alt tags’ are just one type of alt attribute. You may also want to apply ‘Image title tags’ as another alt attribute type.

Alt tags and 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 there is an ‘Alt Text’ field that you can fill in whenever you upload a file to the Media gallery.

Alternatively, you can 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 page, the alt tag would ideally be ‘Hazel Jarrett’ as below:

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

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.
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 or background images don’t need a descriptive alt tag but should still been 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.

Knowing this, another effective way to optimise your web pages is to add captions to your images. 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.

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, try to ensure that they each use different wording so that a screen reader doesn’t read out duplicate tags.

Optimising infographics

Infographics experts, Venngage, recently surveyed 300 online marketers for their 2017 Visual Marketing Statistics report – 41.5% of respondents said infographics produce the highest level of customer engagement.

Knowing this, it’s easy to see why infographics are widely used across the web and are a valuable commodity to any business. But how do you make ensure that an infographic – as a non-text element on a web page – is a valuable commodity 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).

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.

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, such as ‘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 Search Console recommends using the Google Video Extension to the Sitemap protocol 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 Search Engine Watch about 12 video SEO tips 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.

Conclusion

If you’re not sure whether the non-text elements on your website have been optimised, it’s worth using a free screen reader programme (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 complement the theme of the copy, or have a functional purpose, such as a clickable button that clicks through to a checkout?

Once you identify the purpose of a non-text element, you can decide on the best approach to optimise it in a way that will make the user experience when using a screen reader comparable to not needing a screen reader to access the content.

Ultimately, non-text elements are a vital part of any web page – 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 can lead with your potential customers in mind, you will create a site that Google values too. And the better the user experience, the better it will be for your rankings in the long run.

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’)
- Fangs for Firefox
- NVDA Screen Reader
Want to know how Google views your website? Try: