How To Write The Perfect Alt Text

What is alt text?

Alt text is the descriptive text that is supplied alongside an image in a website. It is the text that is used if an image doesn’t load or for other reasons may not be visible to our users. As they aren’t often seen, they are easily overlooked, however, for sight-impaired users they can be an absolutely essential part of your web page. Blind or partially sighted users, for example, will probably rely on a nifty bit of software built into all mobile phones and most browsers called a “screen reader” which will read a web page’s content out loud, including the alt text. So you can see that it’s absolutely vital that they are well written so that everybody has the opportunity to understand our content equally.

Additionally, accessibility is the law. There is a requirement for websites to meet minimum accessibility standards. As a University, our aim is to not only meet but exceed those targets, not just because the law requires it but because it’s the right thing to do.

Writing the perfect alt text

Take a look at the following image taken from the University’s website which we’ll use as our example:

A smiling female University of Derby student sitting on a settee in halls holding a mug of coffee

First and foremost, alt text needs to describe the image. It should help users who read it to understand the content of the image. There can be a tendency to write alt text in a way that supports the content of the page but doesn’t describe the image. For example:

“Find out more about our halls”

This kind of thing is no good at all. That won’t help anybody understand the content of the image. It tells us that we’re looking at the accommodation section – but we already know that. It tells us nothing about the image. A much better alt text would be:

“Woman drinking coffee.”

We’ve immediately given the alt text purpose. It’s describing the image. It’s still not great though. We should try to give the image some context. Images on our website should tell a story; they should have a reason to be there. How about:

“University of Derby student drinking coffee”?

Better. We’ve given the image some context. This is no longer a picture of a random stranger drinking coffee, this is one of our students drinking coffee, which makes more sense in the context of the website. Of course, there’s still an issue with this. This alt text could also describe any of the following photos:

A group of alternate photos about coffee to show that alt text can be ambiguous

The recommended maximum number of characters for alt text is 125, as a lot of screen readers will stop reading out the alt text if it’s longer than that. Let’s see if we can use some more of those characters to give our alt text some clarity:

“A smiling female University of Derby student sitting on a settee in halls holding a mug of coffee”

Now that’s an alt text, and we’ve only used 97 characters!

We’ve described the image in a way that makes it distinct. We’ve given it context within the page and we’ve described the content of the image in detail. If you’re struggling to write an alt text, it might be useful to find another image that’s thematically the same and try to write alt text that fits your image but not the other. A bit like spot the difference. Use a character counter to check the length of your text – you’ll be surprised how much you can fit in just 125 characters!

When to not use alt text

There are a couple of situations where you may not need to add an alt text to an image:

If the image is purely decorative or structural. For example, if you have a fancy underline that’s been done as an image or perhaps a background gradient image. Those images don’t convey any meaning, so they won’t need an alt text.

If the image is already fully explained by the supporting page content. You might have a bar graph that is supported by a table. You wouldn’t need an alt tag for the bar graph as its content is fully supported by the table.

If you’re a web developer, it’s important to remember that the alt text property itself should always be included to meet accessibility requirements but, in these cases, it can be empty.

As a general rule of thumb: if in doubt – use alt text.

In summary:

There are some basic rules that you should follow to make sure your alt text is truly outstanding:

  • It needs to describe the image
  • It needs to give the image context within the site
  • It needs to be fewer than 125 characters
  • Do not use phrases like “image of” or “picture of”, let the screen reader handle that

How to improve the search visibility on your content

We all want our content to appear on the first page of a Google search. That is all down to how your content is ranked. And you can do something about that. There are similarities in how your content ranks in search results between search engines and our on-site search. Here are some tips you can take to improve the search visibility of your content…

Do your research

An example my old boss used was to imagine you’re writing a page about a pen. Should you be writing about a black pen, a ball point pen, a biro? Before you start writing, it’s important to do your research to find out the kind of language and phrases people are using when they search.

There are lots of tools you can use for finding out keyword ideas. A couple I would recommend are Ubersuggest and Google’s Keyword Planner. They are both free tools, the later requires you to be logged into Adwords, which you can do through your Google account. These tools will give you ideas of the kinds of terms and phrases you need be using throughout your content.

Below is an example of the keywords ideas from Ubersuggest for the term apprenticeships.

Ubersuggest keyword idea of apprenticeship
Example keyword ideas generated using Ubersuggest for the keyword apprenticeships

URL

The words used in the URL of your content are important. By default, in T4 the URL is formed from the name of the section, however, moderators can override this by using the output uri field. It is best practice to set this yourself, keeping your URL concise, including relevant key words/phrases and ignoring stop words such as and, the, a, etc.

For example, if the name of your section is Accounting and Finance courses at the University of Derby then accounting-finance-courses would be a good output uri.

Meta description

The meta description is a snippet of usually up to 160 characters which summarises the content of your page. The snippet is shown in search results and is important in getting users to click through to your content. Use your research to help you write your description.

Example of how the meta description shows in Google and site search results
Example of how the meta description shows in search results, first Google, followed by site search

In T4, by default the abstract within the Section Config content type is used for the meta description. Moderators can override this using the description field on the metadata tab of your section.

Page headings

The use of headings to structure your content well will improve user experience by making your pages more readable. Better quality content can lead to lower bounce rates and users spending more time on pages. These are positive indicators when it comes to ranking search results. To find out more, Justin’s recent post on the importance of headings is well worth a read.

Internal linking

The more links there are to a page within a website, the more important it is deemed to be. Therefore, link to your content appropriately.

For example, if you’re writing content about plastic pollution and there’s a news article that covers the same subject, add a link. If you don’t own the content where you want the link to be added reach out to the relevant person. If you’re unsure who that is, email digitalsupport@derby.ac.uk.

This works both ways too. Within your content, you should be adding links where appropriate, for example, if you refer to an academic member of staff in your content, link to their staff profile.

External linking

On a similar note, external websites that link to your content influence search results. Once your content is live, look for opportunities for other websites to link to your content. Don’t be afraid to ask. Email colleagues, contacts, web admins and blog owners who you think will be interested in your content. Again it works both ways so link out from content appropriately too.

Be wary though, bad link building practice eg buying links is penalised by Google so ensure any links built are authentic and organic.

Sharing your content on your social media networks will help too. But don’t just post it, engage with people talking about subjects related to your content and share with relevant users.

What next?

Have a go at applying the tips above to your content. If you have any questions or if you’d like to talk in more detail about improving the search visibility of your content, you can book a slot at one of our drop-in sessions. You can do both by emailing digitalsupport@derby.ac.uk.

Tickets and tribulations: what happens when you email digital support 

Our Ticketing System

When the website launched in July 2018 we also launched some less obvious systems at the same time. One of these systems was Jira Service Desk, which is fundamentally a ticketing system although it does a lot of other cool functions. We decided to go for Jira for a couple of reasons:

  • IT currently uses it to great effect
  • It was not gratuitously expensive
  • Atlassian, the company who own Jira, have a good reputation for quality software

After looking at the existing system, which was effectively just ordering emails in an outlook inbox, we decided it would be a great opportunity to upgrade our customer support operation. We thought the best time to do this would be when a big change was already happening (a brand new website) and that directing users to a new mail box would be easier to introduce at the same time.

What does Jira Service Desk ACTUALLY do?

Jira is marvellous! I’m not just saying that as the digital systems guy. From a customer service point of view, it’s actually pretty incredible.

I’ve always thought that customer service should be a priority for any team that deals with a large amount of tasks or assignments internally: having the ability to see any information of emails past or present, what conversations happened, the resolution etc.

For the purposes of this blog post, I’m only going to talk about what we use the system for at the moment but, as we explore and introduce new aspects of the service desk, I will hope to write more about them.

What happens when you email us?

Whenever someone emails Digitalsupport@derby.ac.uk, it comes through to our Jira Service Desk which everyone on the digital marketing team has an account for. The ticket then sits in our unassigned issues queue until whichever team member is looking after Jira that day assigns it to an appropriate team member.

Please bear in mind that all jobs that require work, ie not just a question, should come through Jira and not been emailed to any one person in the digital team. This so we can accurately manage workloads and that jobs don’t get done before others just because a direct email has been used.

As soon as a ticket is assigned to a user, the clock starts counting down and, depending on the priority of the job (the P column) they have certain service level agreements (SLAs) to progress or complete the job. The priority is set by the person who is distributing tickets which follow the process we introduced:

Highest – Only reserved for the jobs that mean our digital systems are not working or breaching the law. Examples of this would be the website is currently down/incorrect information that could lead to a CMA (Competition and Markets Authority) breach. All other work is put on hold while this is addressed.

High – Reserved for jobs that are urgent and would require to be completed within a working day.  This is communicated verbally with whoever receives this ticket. Examples of this would be incorrect information on the website/social media complaints.

Medium – The majority of jobs that come through sit at medium, which is the standard assigned level. We aim to resolve or progress these jobs within two working days where possible. Examples of this would be general content approvals for key pages or creating a form for an important event coming up.

Low – Low is assigned to non-priority jobs that don’t really have any urgency. We usually look to resolve or progress these within five working days. Examples of these jobs would be staff profile updates/approvals of content on non-key pages on the website.

Lowest – Lowest is for jobs that have no real importance or timescales. We would look to resolve these issues when the team has surplus time available. Examples of this would be a campaign running in a year and preparing photographs well in advance.

To contextualise these priorities, out of the 3,035 tickets we have received since July, I have only ever assigned two at the highest level, that is how rare they are.

Does you putting urgent on a ticket change how it gets assigned in priority?
Nope, after assigning over 3,000 tickets, we look at the content and make an educated choice based on the information and current workload. Everyone’s tasks are urgent to them. We have to look at the university as a whole.

Are there any trick/tips to getting your tickets seen faster?

Yes! For those that have made it this far into this blog post, I will show you a cool trick that has been introduced recently. We have created a portal that allows you to pick what type of job you are submitting.

This allows you to pick exactly what type of job you are submitting and it will be assigned into the relevant queue, which means you don’t have to wait for it to be assigned by whoever is on charge on that day. When you fill in the portal form, it also asks you the questions we know we need  information for, which means we don’t have to go back to you for more information. It’s quicker for everyone!

I know what you’re thinking: ‘Wow that’s great! Is there anything I can do to help you?’

What a generous offer. The main issue we have with tickets on Jira is when they are emailed in and everyone and their uncle are cc’d in. Then, when everyone hits the dreaded reply-all button to give a small contribution to the subject, it raises a new ticket (because it’s a new email) and every time someone does it keeps creating new emails.