WCAG Compliance - Everything You Need To Know
Published on 9th February 2021
Your website has the potential to reach a huge audience from all walks of life, which is why website accessibility needs to be a key consideration.
If your website is going to be available to everyone, it needs to be accessible to everyone too – and with 1 in 5 people in the UK having a disability or long-term illness, you run the risk of alienating a significant potential market if you don’t make sure your website is providing a great experience for all users.
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 therefore be used by people with such disabilities.
Not only will this go some way to making the world a better place for people with disabilities and help you cater for a multitude of customers, but there are also legal obligations your website must adhere to, so it’s important to your business that you meet certain standards of web accessibility.
To make sure your website is complying with the law and delivering a great user experience, you need to follow web content accessibility guidelines – also known as WCAG.
Table of contents:
What is WCAG?
The Web Content Accessibility Guidelines are an international standard for measuring website accessibility. The latest version, WCAG 2.1, has been adopted into UK law.
There are three levels – A, AA, and AAA. These can be understood as follows:
Level A – This covers critical accessibility issues you need to fix on your website, and following these basic requirements will make your website accessible to some users.
Level AA – This covers important accessibility issues you should fix, and doing so will make your website accessible to almost all users.
Level AAA – This is the gold standard of WCAG compliance, covering further accessibility issues that are beneficial to fix. This will make your website accessible for all users, but full AAA compliance is rare as it is difficult to meet the strict requirements.
The level of compliance you need to attain on your website will depend on the sector that you work in.
As of September 2020, all public sector websites in the UK must comply with the WCAG 2.1 AA standards. The aim of the regulations is to ensure that services and information provided by public sector bodies – for example, on a parish council website or a university website – are accessible to everyone, by making sure these websites follow specific accessibility standards.
For private sector organisations, the accessibility of your website is covered by the Equality Act 2010. This requires commercial websites to make ‘reasonable adjustments’ to ensure their sites are accessible to people with disabilities. The guidance is far less explicit as to what needs to be carried out to ensure these websites are fulfilling their legal obligations, but complying with WCAG 2.1 A standards is a must and working towards AA level compliance is considered a sound approach.
How to comply
There are several different areas of your website that will affect how accessible it is – everything from the content and design of your site to the way it works behind the scenes.
Your web designer should have built several of these requirements into your site to make sure it automatically complies with certain guidelines – it’s worth checking with them so you know exactly what’s been handled for you, and what you still need to do.
Here at it’seeze, we make sure all websites we create are accessible from the word go. This means that where possible, your it’seeze site is already complying with many requirements. However, with several measures relating specifically to website content, you need to make sure that when you edit your site, any content meets accessibility requirements.
Below, you’ll find guidelines for WCAG levels A and AA, as well as a downloadable checklist you can work through. This should help you assess your site and make sure you’ve carried out all the necessary changes to comply with international regulations and offer a better website experience for your visitors.
WCAG 2.1 A – the requirements and what these mean for your website:
Non-text content - Images may be inaccessible to those with vision impairments, so text alternatives must be provided for all informative and functional images that are shown.
it’seeze website tip: you can set a text alternative for images (also known as alt text) using the text alternative button on the image-editing toolbar.
Audio-only and video-only content - Audio-only media may be inaccessible to those with hearing impairments, so you should provide a written transcript alongside.
Video-only media may be inaccessible to those with vision impairments, so either an audio description or a text description must be provided.
Captions - Media containing both audio and video may be inaccessible to those with hearing impairments, so add captions to all videos with sound.
it’seeze website tip: both YouTube and Vimeo offer this functionality, so it’s easy to add captions to the videos on your website.
Audio description or media alternative - Media containing both audio and video may be inaccessible to those with vision impairments, so an audio description or a written transcript must be provided.
Information and relationships – The information on your website should be easily understood by everyone, including those who are unable to see the page. It needs to have a logical structure with valid HTML.
it’seeze website tip: we’ve taken care of this one for you – there’s nothing you need to do!
Meaningful sequence – The information on your website needs to be presented in a logical reading order, without the visual layout needing to be seen for it to be understood. Use valid HTML, headings, and lists.
it’seeze website tip: we’ve taken care of this one for you – there’s nothing you need to do!
Sensory characteristics - Visitors with vision impairments may not be aware of the shape, colour, size, or location 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’.
Use of colour - 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.
Audio control – Audio should not play automatically, as this can interfere with screen readers and interrupt the spoken text. Visitors should be able to pause or stop the audio, or change the volume.
it’seeze website tip: we’ve taken care of this one for you – there’s nothing you need to do!
Keyboard - Visitors should be able to use standard keyboard controls to interact with your site - for example, using the arrow keys to move around your site navigation, Escape to close submenus, and Enter to follow links in menus.
it’seeze website tip: we’ve taken care of this one for you – there’s nothing you need to do!
No keyboard trap – Visitors should be able to navigate your website using a keyboard without becoming trapped on a particular section of the page.
it’seeze website tip: we’ve taken care of this one for you – there’s nothing you need to do!
Character key shortcuts – Single character keyboard shortcuts should not be used – or should have the ability to be turned off.
it’seeze website tip: we’ve taken care of this one for you – there’s nothing you need to do!
Timing adjustable – Visitors must be able to turn off or adjust any time limits or timing-dependent content.
it’seeze website tip: we’ve taken care of this one for you – there’s nothing you need to do!
Pause, stop, hide - Visitors should be able to pause, stop, or hide any moving, blinking, or automatically updating content on the page, as this can cause problems for those with visual impairments.
it’seeze website tip: we’ve taken care of this one for you – there’s nothing you need to do!
Three flashes or below - 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.
Bypass blocks – Visitors using screen readers must be able to skip content that is repeated on every page – such as navigation menus - and go straight to the main content on the page. A ‘Skip to content’ link should be provided.
it’seeze website tip: we’ve taken care of this one for you – there’s nothing you need to do!
Page titled - Page titles help visitors find content and orient themselves, so you must provide a descriptive title for each page.
Focus order – Visitors using keyboards to access your website must be able to move through the content in a logical reading order.
it’seeze website tip: we’ve taken care of this one for you – there’s nothing you need to do!
Link purpose in context - Ambiguous links are confusing for visitors, particularly those using assistive software who may have skipped over any 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 sentence containing the link (for example, ‘We have published our Sustainability Report - read it here’, where ‘read it here’ is the link).
Pointer gestures – If your website includes touch functionality, visitors must be able to perform these operations using assistive technology or one finger only.
it’seeze website tip: we’ve taken care of this one for you – there’s nothing you need to do!
Pointer cancellation - If your website includes touch functionality, visitors must be able to undo any accidental actions.
it’seeze website tip: we’ve taken care of this one for you – there’s nothing you need to do!
Label in name – Any website components with labels, such as form fields, must have the same wording attributed to them in the website’s code as is shown in the visible text of the label. This is known as the ‘Accessible Name’ and helps assistive technology identify the component and its purpose.
it’seeze website tip: we’ve taken care of this one for you – there’s nothing you need to do!
Motion actuation – Website functions that are triggered by moving a device or gesturing towards a device must be accompanied by another method of input, such as a button.
it’seeze website tip: we’ve taken care of this one for you – there’s nothing you need to do!
Language of page – The language your website content is written in should be made clear in the HTML so that screen readers use the correct pronunciation when speaking the text aloud.
it’seeze website tip: we’ve taken care of this one for you – there’s nothing you need to do!
On focus – No unexpected actions should be triggered on your website – such as a form automatically submitting - when a particular element receives keyboard focus. A user action such as a mouse click should be required for a response to happen.
it’seeze website tip: we’ve taken care of this one for you – there’s nothing you need to do!
On input – No unexpected actions – such as a new window opening - should be triggered by visitors interacting with elements on the page - for example, entering text into a form or selecting an item from a dropdown menu.
it’seeze website tip: we’ve taken care of this one for you – there’s nothing you need to do!
Error identification – Visitors must be provided with explanations for any input errors as well as instructions for how to fix these errors – e.g. not filling in a form correctly.
it’seeze website tip: we’ve taken care of this one for you – there’s nothing you need to do!
Labels or instructions – Any areas of your website that require input – such as a form – must be clearly labelled or have helpful instructions to help visitors complete them correctly.
it’seeze website tip: we’ve taken care of this one for you – there’s nothing you need to do! Just remember to add informative labels to any new forms you create on your site to make sure these continue to comply.
Parsing – There should be no major code errors on your website – using valid HTML ensures that both screen readers and browsers can quickly and accurately render the content.
it’seeze website tip: we’ve taken care of this one for you – there’s nothing you need to do!
Name, role, value – All components on your website must be compatible with assistive technology – such as screen readers – so that the name, value, and role of each element can be understood.
it’seeze website tip: we’ve taken care of this one for you – there’s nothing you need to do!
WCAG 2.1 AA – the requirements and what these mean for your website:
Captions for live videos - Media containing both audio and video may be inaccessible to those with hearing impairments, so add captions to any live recordings with sound.
Audio description - Media containing both audio and video may be inaccessible to those with vision impairments, so an audio description must be provided.
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.
Orientation – Your website should not be restricted to a single display orientation – such as portrait or landscape. Having a mobile-friendly website will address this as your site will be able to automatically adapt to the orientation of the device that it’s viewed on.
it’seeze website tip: we’ve taken care of this one for you – there’s nothing you need to do!
Identify input purpose - Form field labels aren’t meaningful to assistive software, so the expected format must be made clear in a way software can understand so that users know what kind of information to enter.
it’seeze website tip: 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.
Contrast - 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. The requirement is 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 this tool.
it’seeze website tip: you can add the Userway widget to your site, as this provides visitors with an option to change the contrast.
Resize text – Text on your website should be able to be enlarged by up to 200% without the need for assistive software.
it’seeze website tip: we’ve taken care of this one for you – there’s nothing you need to do!
Images of text - 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.
it’seeze website tip: you can use the background component and text-on-image component to position real text on top of an image.
Reflow – Your website must be responsive – this means it is able to adapt to all devices and screen sizes.
it’seeze website tip: we’ve taken care of this one for you – there’s nothing you need to do!
Non-text contrast - 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 from one another meet the required 3:1 contrast ratio. This means the brightness of neighbouring colours will be different enough to tell them apart.
Text spacing – The text settings on your website must be able to be overridden by visitors wishing to improve the reading experience.
it’seeze website tip: we’ve taken care of this one for you – there’s nothing you need to do!
Content on hover or focus – Any website content that appears when a mouse hovers over it or a keyboard focuses on it must be dismissible, hoverable, and persistent. This means the content can be easily closed, can be moved over without disappearing, and remains visible until closed.
it’seeze website tip: we’ve taken care of this one for you – there’s nothing you need to do!
Multiple ways - Your site should include navigation on every page but some visitors, particularly those with cognitive impairments, may find other ways of locating pages easier to use, so you must provide at least one alternative.
The possible alternatives include links on each page to other related pages, a search feature, or a site map page with a list of all pages on the site.
it’seeze website tip: we will have added links to related pages when we created your website, so you can fulfil this requirement by continuing to do so on any pages you add to your site.
Headings and labels - 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.
Focus visible – Keyboard focus must be visible and clear, to indicate what part of your website is currently selected by the visitor.
it’seeze website tip: we’ve taken care of this one for you – there’s nothing you need to do!
Language of parts – Wherever a language other than the default language appears on your website, you must specify the language through correct HTML.
it’seeze website tip: we’ve taken care of this one for you – there’s nothing you need to do!
Consistent navigation – Your navigation menu must appear in the same location and order on every page of your website.
it’seeze website tip: we’ve taken care of this one for you – there’s nothing you need to do!
Consistent identification - 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.
Error suggestion – When a visitor makes an input error on your website, suggestions for correcting the error should be provided – such as entering a value into a required form field.
it’seeze website tip: we’ve taken care of this one for you – there’s nothing you need to do!
Error prevention - 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.
it’seeze website tip: the confirmation component can be used to add an additional confirmation at the end of the form.
Status messages – When an action is carried out on your website, the status of that action – success, failure, a result – will often be displayed as a visual message – this message must be compatible with assistive technology such as screen readers.
it’seeze website tip: we’ve taken care of this one for you – there’s nothing you need to do!
Working with your web designer and being mindful about the content you add to your website should help you reach full WCAG compliance up to AA standard. For a list of AAA level requirements, please see the complete WCAG guidance here.
To help you keep track of every requirement and make sure this is carried out on your website, we’ve compiled a checklist which you can download below. For all it’seeze clients, we’ve gone through and ticked off what’s already been carried out on your website, so you can see exactly what’s left for you to do.
It’s also worth remembering to periodically check through your site to make sure it’s still accessible – particularly if you are regularly adding new content.
Of course, if you’re looking for a website that can help you reach WCAG compliance more easily, our experienced team are here to help. We offer professional, affordable, and hassle-free web design services for businesses from every industry, with web accessibility a key consideration during the design and development stages. We’ll take care of several major requirements for you, so there’s a lot less to think about when ensuring your website meets the latest accessibility standards.
If you’d like to find out more about what it’seeze has to offer, get in touch with us today.
Tagged as: Accessibility, Web Design
Share this post:
