Having a website that is accessible for people with disabilities not only allows you to serve more customers but is also a requirement by law in some countries such as the USA (Americans with Disabilities Act). With the provisional agreement of the proposed European Accessibility Act, many more countries will be required by law to make their websites accessible.
Recommended requirements
Our team of developers continuously assess the core codebase of our websites and implement improvements to strive to reach a high accessibility standard known as level AA of the Web Content Accessibility Guidelines (WCAG) 2.1 (2.1 being the most up to date version as of time of writing). These guidelines have been widely adopted internationally as a result of their comprehensiveness and we highly recommend that any changes you make to your website also adhere to them. Meeting the WCAG 2.1 standard does not guarantee compliance with any particular accessibility laws which vary by country, but instead is seen as a guide of best practices.
Your responsibilities
We highly recommend you have your site audited by an accessibility expert periodically.
Please ensure that anyone who has access to make edits and customisations to the website understand the guidelines and are trained to make alterations in accordance to the most up to date version of the WCAG documentation.
Artlogic provides automated suggestions for alternative text for images in the CMS. You are responsible for reviewing and overriding these suggestions to ensure the alternative text for all images on your website complies with the relevant accessibility standards.
Disclaimer
This article is for guidance only and it is your duty to fully research your responsibilities under the law and to ensure your website is compliant to the required standard. The examples given below are only sample issues that you may need to resolve and therefore you should refer to the latest WCAG documents to get a better understanding of the issues.
The guidance within this article is only valid for version 2.1 of the WCAG documentation.
Accessibility audits
Due to the complex nature of site accessibility, it is highly recommended that you get your site audited by an expert. These audits should be carried out periodically to check that any changes or alterations made to the website hasn't negatively effected its accessibility. It is important to note that as soon as any alterations are made to the site after passing an accessibility audit could immediately make the site no longer WCAG 2.1 compliant.
Example guidelines
Below are some of the key customisable areas of the site which can be made in the CMS (Content Management System) that can affect your website's accessibility.
Images
You must always enter alternative text and/or image captions for images, including images inserted within text/content areas. Whether or not an alternative text has been automatically suggested and entered by the CMS, you may wish to review it and if necessary (and a mechanism exists), override it to ensure it complies with WCAG 2.1.
If your website incorporates Instagram images, you must ensure that you have added alternative text to these images which can be done within your Instagram account.
It is also important to remember that any text within an image must follow the WCAG 2.1 standards.
- Please see this resource for more details and guidelines for alternative text.
- See this help note for instructions on adding alt-text to your Artlogic website
- See section 1.1 of the WCAG 2.1 documentation.
Videos
Any videos added to the website must be WCAG 2.1 compliant. This includes any video you may have directly uploaded or embedded onto the website, such as YouTube or Vimeo videos.
- See section 1.2 of the WCAG 2.1 documentation.
Examples:
- Synchronised captions need to be provided for non-live video.
- A descriptive text transcript or audio description must be provided for non-live video-only (e.g. video that has no audio track), unless the video is decorative.
Colour
Careful consideration needs to be taken when selecting any colours through either a site setting, or any content added by yourselves.
- When choosing text colours and background colours you must ensure the contrast ratio is WCAG 2.1 compliant.
- Ensure that the colour and distinguishable features of any links added within text fields are WCAG 2.1 compliant.
- See section 1.4 of the WCAG 2.1 documentation.
- You can use WebAIM’s Colour Contrast Checker to help check you are compliant.
Examples:
- Text and images of text have a contrast ratio of at least 4.5:1.
- Colour alone is not used to distinguish links from surrounding text unless the contrast ratio between the link and the surrounding text is at least 3:1 and an additional distinction (e.g. it becomes underlined) is provided when the link is hovered over and receives focus.
Links
- Always add labels to links and make sure that the action of the link is descriptive.
- Ensure link colours and their distinguishable features are WCAG 2.1 compliant as mentioned above.
Audio
Any Audio added to the website, either as a standalone audio file or video audio must follow WCAG 2.1 documentation.
- See section 1.2 & section 1.4 of the WCAG 2.1 documentation.
Examples:
- A descriptive text transcript that includes relevant auditory content is providing for non-live audio-only (audio podcasts, MP3 files, etc.).
- A mechanism is provided to stop, pause, mute, or adjust volume for audio that automatically plays on a page for more than 3 seconds.
Embed codes
You are responsible for ensuring that any embed codes added to the website are in compliance with WCAG 2.1 documentation. From our experience a large number of features and content added using external embed codes are in fact not compliant. Please contact the supplier of any embed codes to clarify whether they are compliant or not. This includes features like mailing list forms, videos, Issuu etc.
Text
Text added to the site can vary in many ways including colour, size, font style, font weight, spacing etc., which can all affect the accessibility of the site. Please be aware that guidelines also apply to images which include text.
It is important to not overlay text over images or videos if you can’t guarantee that the text will always be easily visible and the contrast ratios will be compliant. This means that the use of some features such as Hero headers, slideshows and videos need to be used with overlaid text or in some cases not used at all. It is your responsibility to make sure you do not use these features, or to use them in a manner which is WCAG 2.1 complaint.
- See section 1.4 of the WCAG 2.1 documentation.
Examples:
- Headings must be structured correctly and in the correct order. For instance, you would not give paragraph headings a style H2 if they were part of a page which had a section heading of H3. In the CMS you can choose the heading style for selected text, so do not use this style if it is not a heading.
- Text must be easy to read and correctly spaced.
- Text must have the correct contrast ratios with the background. This differs depending on the font size.
Uploaded documents
Any documents or files you upload to your website which are available to the general public must also be WCAG 2.1 compliant. For example, a PDF which is uploaded must still have appropriate contrast ratios for text and any images must also have alternative text. Adobe has a good help page which guides you through how to create and verify PDF accessibility.
Page settings
- Make sure each page has a heading. The page heading gets used as the H1 tag which is required on each page of a website.
- Add descriptive navigation labels for each page.
- Make sure any custom sort orders that you create for works/items are in a logical order which would be easy and intuitive to navigate.
- Make sure to add an accessibility policy
Custom HTML & CSS
If you are adding custom HTML or CSS to the site, it is your own responsibility to ensure that any customisations are in compliance with WCAG 2.1 documentation.
Tools to help test customisations
Below are some example tools you can use to help test any customisations you have made to your website. However, this is not an exhaustive list and we recommend that you carry out your own research to find the most suitable tools to ensure your website is accessible.
Audit tools
- Axe accessibility checker (Chrome extension)
- Lighthouse (Chrome's built in audit tool)
Screen readers
Related Articles