You must fill out a description ('alt text')

When uploading a photo to the Passenger CMS, you are required to fill out a description field. For the website, this becomes the 'alt text', which is what screenreaders read.

This description should be accurate and convey the image. After writing your description, read it out to a coworker and then show them the image and see if it resembles what they had in mind. Do not be afraid of making this description too long, but also don't write an essay.

Here are some tips on best practises for writing alt text.

Do not put text on an image

Screenreaders can’t see text on an image

1 in 30 people in the UK live with some form of sight loss. Screenreaders help these people browse the web on computers and smartphones by reading out loud the text it can process.

As people with sight loss usually can’t drive, you can bet they will want to use your buses. Buses are accessible to people of all abilities, your website should be too. People come to your website for information, and going out of your way to help all users access the information they need should be your top priority.

The web allows you to describe an image, but for an image these add no tangible benefit to a screenreader user. For featured images, we do not show the image to screenreaders or allow it to hinder the user’s use of the website, as the images are not essential to understanding the content.

Most of the time, sighted users can’t even see text on an image

Putting text on an image means the text needs to be of a high enough contrast to be visible. If you put blue text on a black background for example, you’re making your users work harder than they need to - and chances are, they won’t appreciate it.

Your image needs to be responsive

The world of the web is an ever-changing canvas across mobiles, tablets and computers. Our websites are designed to stretch and adapt to the infinite screen sizes users use - from a budget smartphone to browsing the web on their TV via their Xbox. In every scenario the website should be the most legible it can be.

In order to achieve this, a featured image may be shrunk down or cropped to fit on a small screen. If your image is a photograph or illustration, it’ll look good no matter the outcome. If it’s covered in words, that text will likely be cropped off or too small for a human to read.

Images might be disabled or not load properly

We’ve all lost internet access while out and about or while riding a bus through a tunnel. In those instances, the image simply won’t load or might load achingly slowly, frustrating your users.

Many users choose to disable images entirely, speeding up their experience and/or saving valuable bandwidth on their phone contract.

What should you do instead?

An image should illustrate the point the feature is trying to make. A photo should demonstrate the feature, or give a metaphor of the emotional impact the feature will have for the user.

For example, in a feature about contactless payments, the image…

  • Could show a photograph of a closeup of someone making a contactless payment on an ETM
  • Could show an illustration of someone making a contactless payment
  • Should not show the fare prices or other information 

In a feature about a smartphone app, the image…

  • Could show a nice illustration of a phone, with a screenshot
  • Could show a closeup of someone using the app on a bus
  • Should not show a bullet point list of why the user should use the app

In a feature about upcoming disruptions, the image…

  • Could show a photograph of a road closed sign
  • Should not show dates and details of road closures
  • The content that would have been in the image should go into the article as plain text, in a table, or whatever is appropriate.