How to Describe Images for Accessibility and Findability

The University’s template for external websites gives great flexibility in the use of images. From visual grid layouts to mastheads and galleries.

Many users of our websites don’t see these images. They may have chosen not to download images, or might be using a screen reader to turn visual information into audio. This means it’s important to provide contextual information about our images.

Alternative text, or alt-text, is used to describe images to screen readers used by visually impaired people. It is also a useful aid for search engine optimisation, as search bots can crawl this field to get information about the image.

Good practice for alt-text

In T4 when you add an image to the media library, whatever you put in the description field is output as alt-text.

To make your alt-text effective, keep it short and descriptive. For all our web content, we recommend you write naturally and clearly – alt-text is no exception.

Long alt attributes will disrupt the flow of the content on your page. If you have a lot to say about the image, eg for a chart or graph, add a caption or describe it in the text on the page. Don’t cram this into the alt-text.

It’s good to think about including key words in your alt-text to aid findability, but they must be relevant to the image. Don’t fill your alt text with a string of random keywords just to help search optimisation. This will be confusing for users of screen readers. As we recommend for all content – write for people, not search engines.

We recommend that you avoid using text in an image as it can’t be seen by screen readers or search bots. Therefore it’s not accessible or findable. But, if you do have text in an image, make sure you also include that text in the alt attribute.

Exceptions

Alt text is not needed for:

  • purely decorative images, eg the masthead images on the NICA website
  • where there is also link text, eg top task boxes on homepages

However, there still needs to be an alt tag in the code of the page. If the alt tag is missing, a screen reader will try to add context by reading the image name, and this is often unhelpful.

An empty alt tag indicates to the screen reader that the image is meaningless. This means it’s simply ignored by the screen reader. The good news is that in T4 if the description field is left empty then the alt text field is left empty and still appears in the code.

Find out more

This video, created by Mike West, gives a great overview of what I’ve covered in this blog post. It includes examples of exactly what a screen reader picks up from images with and without alt-text.

Share this post:
Share

A Quick Guide to…Hyperlinks

Hyperlinks help with reading and navigating online content. They provide users with a next step/further information, support scan-reading and enhance search engine optimisation.

In the latest of our Quick Guide series, here’s a reminder of our best practice for hyperlinks:

Link text

Your link text should be short phrases – don’t link entire sentences.

Link text needs be descriptive of the content you’re linking to so the user has an idea of where they will be taken if they select the link. Phrases such as ‘click here’ or ‘download’ are unhelpful and not accessible – think about someone relying on a screen reader to navigate your content.

Generic phrases hinder search engine optimisation (SEO). Search engines, like users, take notice of link text. It’s therefore important that link text contains keywords and phrases that you want to rank highly for. No one wants to appear at the top of search results for ‘click here’!

Open in the same browser

Hyperlinks should always open in the same browser tab/window. We leave it up to the user to decide whether they want to open a new tab/window.

Links must work

It sounds obvious but hyperlinks must be checked regularly to make sure they work. My colleagues laugh at me as I often quote Kara Pernice (Nielsen Norman Group) that a broken link is like a broken promise. However, I personally feel disappointed and frustrated when I select a link on a website that turns out to be broken, or if takes me to an unexpected place.

Broken links can damage your credibility to users and won’t help search engine optimisation, as search engines respond to well linked sites.

Related posts

Share this post:
Share

A Quick Guide to… Bold

Bold text makes web pages easier to read and more SEO friendly.

You should use bold to highlight key phrases in your copy. There should be enough to help users scan the page, but not so much that it loses impact.

This quick guide will help to clarify why, when and how to use bold text.

Why to use bold

Nearly 80% of users will scan a web page before they read it; they’ll jump around the page, looking for things that catch their eye.

This means that content must communicate key messages at a glance, by drawing attention to important bits of information. One way to do this is to create visual pointers using bold text. The impression created by these visual pointers tells both humans and computers (like Google) what to expect from the rest of the content.

03geordi

To boldly go… Both humans and computers respond well to bold text.

When to use bold

You should bold text that:

  • communicates important information
  • emphasises key points
  • makes sense out of context
  • complements your titles and headings

You should avoid bolding:

  • entire sentences or paragraphs
  • too many individual words

Bold text can be used on pages and in news items.

How to use bold

Finish creating content for a page before you start adding bold to it. Then, pick out the most important pieces of information and make them bold.

An easy way to check if you’ve used bold effectively is to collect your bold phrases into one list. If you gave this list to a user, would they get the right impression about that page?

Share this post:
Share

Breaking Bad When It Comes to Links

Broken links are the bane of user experience.

There’s nothing worse than finding a 404 error page. And people who tart 404s up with quaint local dialect or jokes to apologise should just stop.

If you remove a page or change a url and leave the old link lingering elsewhere, you’re breaking trust.

You’re damaging the confidence people have that your website is up-to-date. You’re frustrating them with the promise of information you’ve snatched away.

Search engines won’t like you either. You are breaking their trust in sending people to your website.

Identifying broken links

You might say it’s unavoidable to have broken links. It’s not, it just requires care. If you’re killing a page, document or changing a url remember where you’ve placed links and change or remove them. This could be on your website, social media or even in print.

If you can’t remember where website links were, use these services to find them:

Make search engines work for you

What happens if search engines have indexed the page/document you removed?

They make it difficult enough to get up the search rankings without causing this kind of headache.

If you can’t redirect people elsewhere, it’s time to make Google and co work for you.

Do a search for the page/document you’ve just deleted and if you find it in their listings – report it.

Google (if you have an account) will remove dead links from search listings on request. Make them work for you.

Further reading

A Link is a Promise, Kara Pernice, NNg

Share this post:
Share

Improving Page Titles and Headlines

Linda recently posted about how meaningful titles and descriptions engage site visitors. Her post covered the importance of micro content in enticing people to read your content – particularly since content is displayed differently depending on the device used.

In this post I’m going to focus on how you can improve page titles and headlines to help people find your page and encourage them to read it.

Page titles should be clear and descriptive

Page titles help convey your primary message; its important they are clear and descriptive. This is so that your reader can quickly see what your page is about.

As argued by Jakob Nielsen, online headlines are different to printed headlines because they are used in different ways.

In print a headline is tightly associated with photos, decks, subheads, and the full body of the article, all of which can be interpreted in a single glance.

Jakob Nielsen, NNg

The contextual information that accompanies a printed headline means that it can afford to be cleverer and less descriptive. However, as pointed out by Nielsen, online headlines can appear out of context. For example they could appear in search results, news feeds, social media or navigation.

Headline text has to stand on its own and make sense when the rest of the content is not available

Jakob Nielsen, NNg

Since your page title could be displayed in a number of different places, and on a number of different screen sizes which may reduce the amount of information displayed, it’s essential they make sense out of context.

It’s also best if headlines don’t contain jargon or wordplay. For example, take a look at this example headline:

‘Cutting-edge Research’

This is vague and could be about any topic and relate to any organisation. It’s meaningless on its own as it provides no indication of what the content will be about.

Now take a look at this title:

‘Newcastle Student Unearths Rare Roman Jewellery’

This title is much more descriptive and gives a clear idea of what the article will be about. The reader can then quickly decide whether the content will be useful or of interest to them.

You only have precious seconds to grab your reader’s attention and if you waste those seconds forcing them to fathom out what your title means, they’ll lose patience and leave without reading your content.

Begin with key words

To help with search engine optimisation (SEO) your page titles should contain keywords.

For example, it’s unlikely that a vague title like ‘Students’ Union’ will appear high in search results. It will be competing with other universities who will be using the same general phrase. If we tweak the title to ‘Newcastle University Students’ Union’ this will help with SEO because the title is more specific. People will be more likely to find your page if your title contains words used by your readers.

It’s better if keywords appear at the beginning of your titles if possible, as this will help with scan reading.

Moving keywords to the front of titles increases the likelihood that they get noticed

Hoa Loranger, NNg

Eye tracking research conducted by the Nielsen Norman group shows that people read differently online in an F shaped pattern, and tend to see the first two words in a sentence.

Keep page titles short

Keeping page titles concise will also help with scan reading. Our recommendation for page titles is 50 characters (including spaces). This might not sound like many words to play with, but remember that your page title could be viewed on a small screen. If it’s too long it will run over several lines; making it much harder to read and understand.

Headline Analyzer tool

In Corporate Web Development we use a free online tool called Headline Analyzer to help write headlines for blog posts.

As shown from the screenshot below you simply type your headline into the headline field and click the ‘Analyse Now’ button. You’ll then be given a score for your headline and tips on how to improve it.

Screenshot of Headline Analyzer tool

Admittedly this tool is more useful for writing headlines for blogs than webpages. However, what I find helpful is the chance to see how my page title will look in search results. This helps me decide whether it will make sense out of context:

Screenshot of a headline displayed in search results using the Headline Analyzer tool

Have a go and see what you think!

Summary

What you call your page is crucial in helping people find it. If you use keywords that your readers will be using and if a title is descriptive of your content this will help with SEO. Furthermore, the more descriptive a page title is, the more likely people will select and read your content. This is because they will be able to quickly see whether the content is relevant to them and will help answer their questions.

References

Jakob Nielsen, Microcontent: How to Write Headlines, Page Titles, and Subject Lines, Nielsen Norman Group (NNg), 6 September 1998

Hoa Loranger, Headings Are Pick-Up Lines: 5 Tips for Writing Headlines That Convert, Nielsen Norman Group (NNg), 9 August 2015

Related posts

Share this post:
Share