Resolve accessibility issues for Inclusive Transport Leaders Scheme

The Inclusive Transport Leaders Scheme (ITLS), launched by the Department for Transport in July 2020, has been designed to improve awareness and implementation of inclusivity of the transport system.

 

The Department for Transport has suggested that transport operators are missing out on customers and at this uncertain time for many, in the wake of a global pandemic, every opportunity to rebuild customer numbers should be explored.

Understanding best practices around information published on the web helps operators to identify where you can easily make changes to earn the first level of accreditation – ‘Inclusive Transport Committed’ – and show you have laid the foundations for an accessible service provision in the long-term.

Let’s take a look at what steps you can take to do that:

1. Publish a web content accessibility statement

One of the first things you can do is to publish a statement describing where you are on the journey and how you think you are currently doing. This step acts a self-appraisal of how well you are meeting your accessibility commitments.

This statement should include whether your websites are ‘fully’, ‘partially’ or ‘not’ compliant with the Web Content Accessibility Guidelines (WCAG) 2.1, and to list areas that do not meet these standards with explanations as to why this is.

The WCAG documents explain how to make web content accessible to people with disabilities. Web “content” generally refers to the information on a web page such as text, images and sounds, but it also refers to the code or markup that defines structure and presentation of the site. Accessibility is all about addressing discriminatory aspects related to equivalent user experience for people with disabilities.

We’ve published accessibility statements with a number of Passenger customers and it has helped to collectively identify skills gaps and training that might be needed by those using our software to upload and manage web and app content on an ongoing basis. Given that this content changes regularly, we’ve also started to consider how to maintain accessibility over time, for example when content editors change and new staff take over the responsibility within an operator’s business.

2. Consider temporary and situational disabilities

Web accessibility benefits people with and without disabilities

When we think about accessibility, it’s easy to only consider permanent disabilities, such as blindness, deafness, or a loss/lack of limbs. However, by making efforts to ensure your website is accessible, everyone can benefit even if they don’t have a permanent disability.

Having the ability to interact and consume a website via multiple forms of input, such as on a touch device, using only a keyboard, or voice recognition software (Nottingham City Transport do this with Passenger’s Alexa skill), can be of benefit to users who are temporarily disabled or with situational reasons too.

A common example of this is being able to navigate around a website whilst holding a phone to your ear. In this scenario, only one hand is available. If a website has ensured that the site can be operated with only the keyboard, this makes the experience for the user much better whilst they’re on the phone.

3. Check colour contrasts

Colour contrast between text and background can cause issues with legibility. When working on any branded media work for the web, the colour contrast can be easily checked to see whether it meets AA and AAA standards using sites such as color.review. There are several of these around the internet but this is the best one we’ve found so far.

Using it you can identify areas of your website that do not meet the acceptable contrast ratio. Using the colour picker above, it’s easy to select an alternate shade of the colour that does meet the WCAG minimum contrast ratio, but it’s not always that simple. One of the biggest challenges to navigate is when your company brand colours don’t make legibility easy when they’re used in copy, for example. This is also true for branded bus routes, of which there are many in the UK.

Below (left) is a screenshot of the Cardiff Bus website with the areas that did not meet the contrast ratio circled in red; taken when we worked on this with their team.

On the right, is the resulting page after the automated colour corrections had been applied. Here we see several changes, most notably that the orange background has been altered so that the white text has a high enough contrast.

Although this page now meets the colour contrast guidelines for accessibility, the orange colour, which is an important part of Cardiff Bus’ branding, has been altered to become more of a brown.

To retain the important brand colour, a better solution was to alter the colour of the text, with a dark brown text providing a much higher contrast ratio than the white text did against the orange, meeting both AA and even AAA standards.

Contrast isn’t the only important issue to think about with colour. Colour should not be the only way you are conveying information.

For example, the ‘active’ state on our website timetable control panel is not only represented by colour but is now also identifiable without colour by using a border around the active item.

4.Test with a screenreader

Double-check you have valid HTML

Make sure you check your site has valid HTML markup too. This is a simple thing to ensure is correct and although most browsers are very forgiving about mistakes (such as missing closing tags) screenreaders are not usually as sophisticated and HTML errors can lead to misread pages.

Given that most websites use a content management system of some kind again it’s important to double-check that editable parts of the page don’t make it too easy to introduce these kinds of hidden errors.

Journey planner

Operator websites can be complex ecosystems because of all the dynamic information generated when users request information.

One area that should be a focus for improvement is your journey planner, if you have one. This is effectively a dynamic timetable and is one of the most used parts of Passenger-managed websites.

By ensuring the inputs for this feature can be used easily with only keyboard control, and that all the information given can be understood when read by a screen reader, a journey can be planned by almost anybody.

Timetables

PDFs aren’t inherently accessible, so can make it really hard for screenreader users to access the timetable information they contain. This is one of the key reasons why we create dynamic timetables in HTML and then provide PDF versions as an alternative for the users that like to see the information in that format.

If you do the same it’s straightforward to ensure that when a user navigates around the table using a screenreader, the context of the timetable cell selected is understood by the reader and is read out to the user. In our case the context is the stop name and the line name. Without this, the table can be difficult to use for those reliant on the table being read to them.

5. Ensure website content is created with accessibility in mind

If you’re using a content management system to make regular changes to your website, check that the content you upload is accessible too. If it’s not, it will quickly render the rest of the web page inaccessible too.

Headings

Headings are really important in helping to structure the content of a page. How hard would a book be to read if you didn’t know what the title was, or what the chapter names were?

When editing a page it’s fairly standard to use the content editor to assign different levels of heading, with 2 being the highest/largest. The Heading 1 size is reserved for the title of the page. Headings with an equal or higher rank start a new section and headings with a lower rank start new subsections that are part of the higher-ranked section.

Use headings to structure your content based on the ranking of the heading, not based on the size or visual appeal so that a user using a screen reader may choose to navigate a long page simply by jumping between headers and then reading the content within each section.

Headings are also picked up by search engines such as Google, and screenreaders to help understand the structure of the page. This can have the added bonus of being good for new customers finding you online in search engines.

Images

Images help convey your marketing information or give extra context to a page. Wherever possible you should not put text directly on an image, as this is not readable by screenreader users, Google, or users who have images turned off.

It’s often the case that well-sighted users can’t even see the 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 dark blue text on a black background, for example, you’re being non inclusive.

To help with this, we have a whole series of content guides in our Help Desk, so it’s easy to do a good job of providing accessible images. We can also share this information with new content editors so they know what level is required to maintain the ITLS accreditation.

In summary

Working towards being fully compliant

Retrofitting accessibility improvements into your website can be a time-consuming process, but a worthy one. We hope these 5 steps will help to get you on your way to becoming an Inclusive Transport Leader and ultimately make it easier for more passengers to travel with you.

If you’d like any assistance making your digital services, including your website or apps, more accessible or would like to talk about our experiences with the ITLS accreditation scheme, then please don’t hesitate to get in touch.