What is web accessibility?
Disabilities, such as hearing or vision impairments or problems with movement, can make websites harder to use. Web accessibility is the practice of ensuring websites can be used by people with disabilities.
Why is accessibility important?
People with disabilities have the right to full participation in society, including in the use of the internet. These rights are enshrined in the UN Convention On The Rights Of Persons With Disabilities, which has been ratified by 165 countries around the world.
In the UK, the Equality Act 2010 places a duty on organisations to make reasonable adjustments to accommodate people with disabilities. The Public Sector Bodies (Websites and Mobile Applications) Accessibility Regulations 2018 are more specific, requiring public sector bodies (such as local councils) to comply with level AA of the Web Content Accessibility Guidelines, version 2.1.
In addition to the legal requirements, there’s a strong business case for web accessibility. In the UK, one in five people have a disability or long-term illness, representing a huge potential market. Making your website accessible also benefits visitors who don’t have disabilities. For example, a visitor who has lost their glasses, or is viewing your site on a mobile phone in bright sunlight, will benefit from text that has a high contrast against its background.
The Web Content Accessibility Guidelines (WCAG)
The Web Content Accessibility Guidelines (WCAG) were developed by the World Wide Web Consortium, the international organisation responsible for web standards. WCAG defines a series of requirements, grouped into three levels: A (lowest), AA, and AAA (highest). As level AAA has very strict requirements, disability laws such as those mentioned above generally require level AA compliance, which means all level A and AA requirements must be met.
Where possible, we handle things for you, and your site automatically complies with many requirements. However, some requirements depend on the content on your site, so when you add content you should make sure it meets with these requirements.
WCAG requirements that depend on you
The following WCAG requirements apply to content you add.
1.1.1 Non-text content [Level A]
Images may be inaccessible to those with vision impairments, so text alternatives must be provided. You can set a text alternative for images (also known as the alt text) using the text alternative button on the image-editing toolbar.
A common mistake is to describe the visual characteristics of the image in the text alternative. Instead, for an image that conveys information, the text alternative should convey equivalent information. For example, a graph showing sales over the past year might have a text alternative stating “Sales rose 12% over the past year, from 3167 units to 3547 units”. For a purely decorative image (for example, an image of a landscape or a business setting used to convey a general mood), the text alternative should be left blank.
1.2.1 Audio-only and Video-only (Prerecorded) [Level A]
Audio-only media may be inaccessible to those with hearing impairments, and video-only media may be inaccessible to those with vision impairments, so alternatives must be provided. For audio-only media, this can be achieved with a text transcript. For video-only media, this can be achieved with either an audio description or a text description.
1.2.2 Captions (Prerecorded) [Level A]
1.2.4 Captions (Live) [Level AA]
Media containing both audio and video may be inaccessible to those with hearing impairments, so captions must be provided (for pre-recorded media to satisfy 1.2.2 and level A, and for live media to satisfy 1.2.4 and level AA). YouTube and Vimeo offer this functionality:
1.2.3 Audio Description or Media Alternative (Prerecorded) [Level A]
1.2.5 Audio Description (Prerecorded) [Level AA]
Media containing both audio and video may be inaccessible to those with vision impairments, so an audio description must be provided (a text equivalent would satisfy 1.2.3 and level A, but not 1.2.5 and level AA). Note that neither YouTube or Vimeo have the ability to add an optional audio description to a video, so a separate version with audio description would be required.
1.3.3 Sensory Characteristics [Level A]
Visitors with vision impairments may not be aware of the shape, colour, size, or location of elements of your content, so you must avoid referencing these properties as the only way to identify parts of the site. For example, rather than saying “Click the green button”, you might say “Click the Continue button”.
1.3.5 Identify Input Purpose [Level AA]
Form field labels aren’t meaningful to assistive software, so the expected format must be made clear in a way software can understand. By setting the appropriate format in the field component, not only is the expected format made clear, but browsers and assistive software can also offer to auto-fill appropriate values.
1.4.1 Use of Colour [Level A]
Visitors with vision impairments may not be aware of the colour of elements of your content, so you must not rely on colour alone to convey information. For example, if you have a list of upcoming events and use green for those with spaces available and red for those that are sold out, you might add the text “(sold out)” after the sold-out events.
1.4.3 Contrast (Minimum) [Level AA]
Text that has low contrast against its background can be hard to read, especially for visitors with vision impairments, so it must be possible to view the text with sufficient contrast. WCAG requires a contrast ratio of 4.5:1 for text below 24 pixels tall and 3:1 for larger text. You can check colour contrast using the tool at https://coolors.co/contrast-checker. Alternatively, a widget with an option to change the contrast can be provided; you can achieve this by adding the Userway widget to your site.
1.4.5 Images of Text [Level AA]
Text contained within an image may be hard to read and can’t be adjusted by the visitor, so must not be used (except as part of a logo or where a particular presentation is essential, such as a photo of a product that has text printed on it). You can use the background component and text-on-image component to position real text on top of an image.
1.4.11 Non-text Contrast [Level AA]
Icons and diagrams that have low contrast between their parts can be hard to understand, especially for visitors with vision impairments, so you must ensure that parts that need to be distinguished meet WCAG’s required 3:1 contrast ratio.
2.3.1 Three Flashes or Below Threshold [Level A]
Rapid flashes can trigger seizures in people with photosensitive disorders such as photosensitive epilepsy, so you must ensure that any videos you include on your site do not flash more than three times in any one second period.
2.4.2 Page Titled [Level A]
Page titles help visitors find content and orient themselves, so you must provide a descriptive title for each page. You can set the page title in the page details window.
2.4.4 Link Purpose (In Context) [Level A]
Ambiguous links are confusing for visitors, particularly those using assistive software who may have skipped over preceding content, so the purpose of a link must be clear from its immediate context. Ideally the link text itself should make sense out of context (for example, “Read our Sustainability Report”), but this requirement can also be satisfied by providing the necessary context in the paragraph, list item, or table cell containing the link (for example, “We have published our Sustainability Report - read it here”, where “read it here” is the link).
2.4.5 Multiple Ways [Level AA]
Your site includes navigation on every page but some visitors, particularly those with cognitive impairments, may find other ways of locating pages easier to to use, so you must provide at least one alternative. The possible alternatives supported by WCAG are:
- links on each page to other related pages
- a search feature
- a site map page with a list of all pages on the site, clearly showing their organisation
We will have added links to related pages when we created your site, so you can satisfy this requirement by continuing to do this on pages you add to the site. If your site grows to a large number of pages, a search feature could benefit all visitors, so you may want to ask us to add a search field to your site header.
2.4.6 Headings and Labels [Level AA]
Headings help visitors understand the structure of the content, so must accurately represent the topic covered by the content that follows them. Form field labels help visitors understand the purpose of form fields, so must clearly describe what information the visitor is expected to enter.
3.2.4 Consistent Identification [Level AA]
Inconsistency can make a site harder to understand, so consistent terms must be used for similar functionality. For example, download links labelled “Download Sustainability Report” and “Read Annual Report” are inconsistent as one starts “Download” and the other “Read”, so visitors may not expect the “Read” link to download the report. Changing both links to start “Download” or “Read” means that visitors who have used one link will know what to expect from the other.
3.3.4 Error Prevention (Legal, Financial, Data) [Level AA]
Mistakes when filling in forms that result in legal commitments or financial transactions can have serious consequences, so there must be either an additional confirmation or the ability to reverse the action carried out. The confirmation component can be used to add an additional confirmation at the end of the form. The message shown after the form has been successfully submitted can explain how to contact you to amend or cancel a submitted request.
WCAG requirements that we handle for you
The following WCAG requirements are automatically satisfied by your site.
1.3.1 Info and Relationships [Level A]
The code behind your site uses ‘semantic elements’ to indicate the header, navigation, main, and footer areas of each page, to identify headings and tables, and to associate labels with form fields.
1.3.2 Meaningful Sequence [Level A]
The code behind your site is in the same order in which you would read the content, with columns in order from left to right and column content in order from top to bottom.
1.3.4 Orientation [Level AA]
Your site is responsive and automatically adapts to the device width and orientation.
1.4.2 Audio Control [Level A]
Browsers no longer allow sound to play automatically when a page is loaded.
1.4.4 Resize text [Level AA]
Your site is responsive, so visitors can zoom in with their browser and your site will automatically adapt to its new size.
1.4.10 Reflow [Level AA]
Your site is responsive and automatically adapts to smaller devices without requiring horizontal scrolling.
1.4.12 Text Spacing [Level AA]
Because your site is responsive and designed to handle text breaking at different points for different devices, it also handles text breaking at different points due to the visitor overriding text spacing properties.
1.4.13 Content on Hover or Focus [Level AA]
Pressing Escape will close submenus in your site navigation that were opened by hovering with the mouse or focusing with the keyboard.
2.1.1 Keyboard [Level A]
Visitors can use the standard keyboard controls to interact with your site (for example, using Tab to move between interactive elements). They can also use the arrow keys to move around your site navigation, Escape to close submenus, and Enter to follow links in menus.
2.1.2 No Keyboard Trap [Level A]
Visitors can use the standard keyboard controls to move focus away from any element on your site.
2.1.4 Character Key Shortcuts [Level A]
Your site does not feature any single-character keyboard shortcuts.
2.2.1 Timing Adjustable [Level A]
If your site contains an image carousel, visitors can use the pause button to pause it. There is no other timing-dependent content on your site.
2.2.2 Pause, Stop, Hide [Level A]
If your site contains an image carousel or videos, visitors can use the pause buttons to pause them.
2.4.1 Bypass Blocks [Level A]
The code behind your site uses ‘semantic elements’ to indicate the header, navigation, main, and footer areas of each page, allowing assistive software to skip over blocks of content that are repeated on multiple pages.
2.4.3 Focus Order [Level A]
The code behind your site is in the same order in which you would read the content, with columns in order from left to right and column content in order from top to bottom, and the focus order matches this.
2.4.7 Focus Visible [Level AA]
For most elements of your site the browser’s standard focus indicator (usually a dotted or solid outline around the focused item) is shown. Your site navigation uses a custom focus indicator (usually a change in background colour) that is more in keeping with the navigation styling.
2.5.1 Pointer Gestures [Level A]
Your site does not use multi-point or path-based gestures.
2.5.2 Pointer Cancellation [Level A]
Your site does not carry out any action when the pointer is pressed down, but only when it is released.
2.5.3 Label in Name [Level A]
The code behind your site uses label elements for field labels, so the ‘accessible name’ automatically matches the displayed label.
2.5.4 Motion Actuation [Level A]
Your site does not respond to device or user motion.
3.1.1 Language of Page [Level A]
3.1.2 Language of Parts [Level AA]
Your site includes a language attribute to indicate the language of the content.
3.2.1 On Focus [Level A]
Your site does not change context in response to an element receiving focus.
3.2.2 On Input [Level A]
Your site does not change context in response to changes of the settings of user interface components, such as when the visitor interacts with a form field.
3.2.3 Consistent Navigation [Level AA]
Your site navigation appears in the same order everywhere that it is shown.
3.3.1 Error Identification [Level A]
After a form is submitted, your site will automatically identify any form fields with errors and display error messages above them.
3.3.2 Labels or Instructions [Level A]
All form fields on your site are labelled.
3.3.3 Error Suggestion [Level AA]
The error messages mentioned above (under 3.3.1 Error Identification) include suggestions for correcting the error, such as entering a value in a required field.
4.1.1 Parsing [Level A]
The code behind your site is valid HTML conforming to the HTML specification.
4.1.2 Name, Role, Value [Level A]
The code behind your site navigation sets appropriate roles and labels for menu bars, submenus, and menu items. The forms on your site use standard form fields that automatically comply with this requirement.
4.1.3 Status Messages [Level AA]
After a form on your site is submitted, the page is reloaded to display the success or error message. This requirement applies only to status updates that are shown without reloading the page, so is not applicable.
