We want TfL's digital services to be accessible and usable for everyone. All our online content and services must meet the requirements of the Equality Act 2010 and the AA level of the WCAG 2.1 guidelines.
Accessibility must be considered during design and development to make sure content and functionality are useful in the real world for users with access needs, over and above the WCAG 2.1 guidelines.
We comply with the new Accessibility requirements for public sector websites and apps.
- All public sector websites published after 23 September 2018 must comply with the new government accessibility regulations by 23 September 2019
- Existing websites must comply with the regulations by 23 September 2020
- Web based or native apps must comply with the regulations by 23 September 2021
These standards apply to all desktop, tablet and mobile website, web app and native app experiences.
WCAG 2.1 AA level must be met as a minimum standard. This overview does not replace the WCAG 2.1 guidelines. You should refer to WCAG 2.1 guidelines if anything is unclear and to confirm all current requirements.
Four key principles of WCAG 2.1
All information and user interface components must be presentable to users in a way they can perceive or understand.
- Provide alt text for all images
- Provide descriptive text transcripts for video and audio files
- Provide captioning for video
- Ensure documents have a logical, meaningful structure
- Use semantic markup - start with structured content first as this provides core functionality and meaning to the page by default
- Use strong contrast for text and links on backgrounds
- Make sure text size can be increased to double its size, without the page breaking
- Only use images in place of text if there is no reasonable alternative
Interface components and navigation elements must be operable.
- Content must be keyboard accessible (access keys are useful, but be aware of usage to avoid browser conflicts)
- Users must be able to control automatically updated content (e.g. pause, stop or hide)
- Avoid flashing content - moving, blinking and scrolling content must not last more than five seconds or flash more than three times per second
- Use skip links to bypass repeated navigation elements (e.g. skip to content)
- Frames must be titled
- Pages must have descriptive titles
- A logical tab order for links and form elements must be provided
- Links must be meaningful and easy to understand (e.g. use descriptive links, not 'click here')
- Use meaningful labels for form and heading elements (e.g. use descriptive headings, not 'more information')
- Ensure the order of navigation links and form elements etc. is logical, and it is visually apparent where the current keyboard focus is
All content must be easy to understood, both in terms of the language and the way the user interface operates.
Use plain English and keep content brief by including essential information only
- Follow the Digital content standard for guidelines on length
- Avoid jargon and unusual words. If they are necessary, link to a definition
- Identify the language of the page and parts of the page using HTML lang attribute (e.g. <html lang="en"> or <blockquote lang="fr">)
- Make sure all pages appear and operate in a predictable way
- When a user interacts with an object or when a page element receives focus (such as tabbing onto a link), do not use pop-up windows or make changes that could confuse users
- Use consistent navigation elements
- Use consistent labelling for frequently used elements to help users predict labelling across the site (e.g. 'Search', 'Contact')
- Provide label tags for all form elements
- Provide all necessary information about a form element within its label (e.g. if control is required or it requires a specific format, value or length)
- Present form errors in an accessible, intuitive manner (e.g. highlight errors where they have been made and describe the error or what the user needs to do)
All content must be robust enough to be interpreted reliably by a wide variety of user agents, including assistive technologies.
- Valid HTML5 and CSS must be used
- Use HTML elements appropriately as per their specification
Why we do this
We have a duty to ensure our websites and digital products are accessible to all visitors.
Designing with accessibility in mind improves the user experience and reduces costs by:
- Ensuring content and features are accessible to more people, including users with physical or cognitive disabilities
- Reducing the complexity of sites or providing usable alternatives to help users find information and complete tasks quickly and easily
- Increasing findability with search engine optimisation
- Increasing potential use in more situations, such as on a range of devices, including those with low bandwidth or older technology
- Minimising the need to produce or maintain alternative format materials
- Decreasing the potential for high legal expenses associated with defending against legal action