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

Remove ‘Click Here’ for Better Link Text

How many of you have linked to a webpage or document using the phrase ‘click here’? We’ve got about 830 instances across the University site. We know where they are.

Why is it so bad to use ‘click here’ as a link?

You might argue that it’s a strong call to action. You know exactly what’s expected of you when you see one. See our related blog post: 5 Ways to Improve your Calls to Action.

I think the negatives of using click here outweigh the positives. These are our top reasons for not using click here as link text.

We aren’t all using a mouse

Click here isn’t true anymore. Your user could be tapping, touching, swiping, tabbing or speaking to activate the link.

Also, most people using a mouse know that you have to click to do something: don’t be Captain Obvious.

Accessibility

Users of screen readers will often get a summary list of hyperlinks to select from. This is to help them decide where to jump to within a site.

Imagine how unhelpful it is to hear ‘click here, click here, click here, click here’ as your options.

Unless the user decides to read the whole page – they won’t get the context.

Search engine optimisation

We always get asked about getting to the top of the search results. The hyperlinks you use can help you achieve this.

Let me ask you then, how many times have you searched for pages that say ‘click here’? Google serves up around 2.4 billion search results for it.

You will never be number one for this term. You would never want to be number one for this term. So don’t use it for links within your site.

Instead, make sure you use strong, descriptive terms to link your content. How do you want people to find you? What words will they use?


Bad example: Click here to find out more about our English Language degrees.

Good example: Find out about studying our English Language degrees.


Get rid of click here using Siteimprove

Many of you use Siteimprove to keep on top of broken links and misspellings. But did you know that it also has a policy feature that allows you to target unwanted content?

We have a click here policy set up to show where it’s used in your website. We know that there are 830 instances of click here across the University’s website.

Let’s aim for zero! * 

* Siteimprove have been known to reward sites that achieve zero broken links/misspellings/policy scores with doughnuts.

Read our blog post on the Siteimprove policy feature.

Why not get access to Siteimprove (University Login required) so you can start fixing your content now?

Share this post:
Share

5 ways to improve your Calls to Action

A Call To Action (CTA) is a way to get your reader to complete a task or reach a business goal on your website.

It might be as simple as a hyperlink or it could be an embedded form that you want them to fill in.

The words you use and the placement of the content will all influence whether you get the results you want.

Here are our top 5 tips to make sure a CTA works for you.

1.     Think about where you place your link text

We recommend adding links to further content at the end of a page, paragraph or sentence.

That way your reader has understood what you had to say and can make a decision whether to follow your link or not.

If you embed the link at the start of a section they don’t know whether to click first and come back or read first then go back to follow the link. Either way, you’re making them work harder.


Bad example: We have a Conference Team who provides help with managing and planning conferences.

Good example: We provide help with managing and planning conferences: contact the Conference Team.


2.     Make your call to action stand out

You could also use a different style or design for CTAs. We use buttons to help highlight them on the University website:

Example red call to action button from the responsive design

If you are using something that’s designed like this, be consistent with its placement. Our link buttons could become intrusive if we used them everywhere.

3.     Make sure your call to action is relevant to the page

Don’t include lots of links ‘just in case’ someone might find them useful. Think about what you want your reader to do next.

If you have a clear next step in mind and you add lots of extra links – you are reducing the effectiveness of your CTAs.

For example, on a page about booking to attend an event, imagine if you included all these links:

  • Book your place (essential)
  • Watch a video (a distraction at best – they might forget to sign up)
  • Find out more about the event (this link should be further up the page)
  • Contact us (why? The aim is to get them to book at this point)

4.     Be active and descriptive

Make sure the language you use encourages people to complete the action.  Use words they’ll be familiar with and include a verb if possible.

Examples:

  • Call us now: 000000000 (a call to action might not be a hyperlink)
  • Fill in our application form
  • Watch our student services video

You should also make sure that the text you hyperlink is descriptive. This helps with Search Engine Optimisation. Google will rank your content according to the words you hyperlink. I’m guessing you don’t want to be top for the word ‘more’:


Bad example: Learn more about research opportunities at Newcastle.

Good example: Learn more about research opportunities at Newcastle.


Click Here for… and Click Here for… are particular pet hates of mine. Don’t do it! We’ve a blog post coming up on why click here is the worst call to action you could use.

5. Measure success

Decide how you will measure the success of your CTAs. Did your carefully crafted words work? Did your readers pick up the phone, book their place or fill in your form?

The University uses Google Analytics to track use of the University website. We assess where people went after reading our content. How many people left straight away without following our links?  How many people completed an action?

You can also try out different combinations of words to see which ones are most effective. Why not try a link called “Fill in our application form” for part of the week and then swap it to be: “Apply now” later? Which one has the highest completion rate?

Get in touch

Do you write your Calls To Action like this? What sort of success have you had? Let us know in the comments – we’d love to hear your thoughts.

Read more

You might like to read about how micro content (often used on our CTAs) can improve your website.

Share this post:
Share

Top 5 Tips: Search Engine Optimisation

In our recent Planning and Writing Web Content training there were a few questions about how to improve your website’s position in search results. So we thought it timely to share our top 5 tips for search engine optimisation (SEO).

There’s no mystery to it – writing content that will be highly ranked by search engines is the same as writing effective web content for your users.

1. Use the language of your readers

It’s important to think about the terms your readers might use to search for your site, and then to use these words in your content.

You should also identify keywords and phrases that you want to rank highly for. Keep these narrow; it’s unrealistic to compete with general terms like ‘student experience’.

2. Keep your content up to date

When a page was last updated matters to search engines as well as your users. It’s essential to check for, edit and delete out-dated content.

3. Highlight important content

Highlight key words to make sure that the search engine can work out which content is most important. You can do this by:

  • including keywords in the page title and subheadings
  • making keywords bold
  • using keywords in hyperlink text

Don’t rely on graphics or text in images to convey your message. Search engines can’t get to this copy and your content won’t get indexed.

4. Use descriptive web addresses (URLs)

URLs appear in search results. It’s therefore important that your URLs are descriptive of the content on your page. Users can then tell if the page will be relevant to them.

5. Links

Search engines respond to well-linked sites. You should link to relevant content on Newcastle University’s website and externally. Also look for opportunities for colleagues at the University and external partners to link back to your site. This verifies your content’s relevance and importance to search engines.

Related posts

Share this post:
Share

Fix Broken Links and Misspellings with Siteimprove

Broken links and misspellings in content harm the credibility of your website. They have an impact on – search rankings, user experience, and visitor traffic.

So, it’s important that you check and update your content on a regular basis.

We’re using Siteimprove quality assurance software to help web editors do this. It’s reporting on our external Academic Unit and Support Services websites – 60,500 pages !

How it works

Siteimprove crawls your website each week, highlights issues and sends you a report that:

  • checks every page and PDF on your site for broken links
  • checks for spelling errors and potential misspellings on every page
  • highlights elements on the page for you so you see errors in context

There’s also an inventory of all media files, documents, email addresses, and phone numbers. This makes it easy to audit your website and keep things up-do-date.

Siteimprove won’t fix broken links and misspellings errors on your website but it does make it easy to find them.

Improve the quality of your web content – get rid of those broken links and misspellings  and start using your Siteimprove report!

Access to Siteimprove

You can request access to Siteimprove (University Login required).

Share this post:
Share