We are committed to helping our customers ensure their websites are accessible to all users, promoting digital inclusivity. In order to help customers comply with WCAG 2.2 AA standards, we have been making changes to the Juniper Websites' Content Management System and our design and development processes to ensure that all our sites have all the tools you need to make your site accessible to your audience.
The work doesn't stop there though. To make sure you meet the government's accessibility requirements for public sector sites, you'll need to have an Accessibility Statement and, everything that is added to the site needs to be done so with accessibility in mind. Here are some useful tips to help you make sure everything you add is accessibility friendly.
- Meeting the Government Accessibility Requirements
- What are the benefits of making a site Accessible?
- Making Text Accessible
- Bullets & Numbered Lists
- Making Images Accessible
- Making Video Accessible
- Making Links Accessible
- Making Tables Accessible
- Ensuring Colours are Accessible
- Creating an Accessibility Statement
Meeting the Government Accessibility Requirements
Accessibility regulations cover public sector websites used by the public. However, primary and secondary schools or nurseries are partially exempt - except for the content people need in order to use their services, for example a form that lets you outline school meal preferences.
The accessibility requirements say that you must make your website ‘perceivable, operable, understandable and robust’ and, even with an exemption you need to include and update an accessibility statement on your website.
Despite the exemption, many schools are choosing to make their sites accessible to ensure they can be accessed by anyone in their community, regardless of any impairment they may have.
The requirements states that:
Your website or mobile app will meet the legal requirements if you:
- meet the WCAG 2.2 AA standard - although there may be valid legal reasons for not meeting accessibility standards
- publish an accessibility statement that explains how accessible your website or mobile app is
What are the benefits of making a site Accessible?
Accessibility is about making sure your website can be used by as many people as possible, including those with impaired vision, motor difficulties, cognitive impairments or learning disabilities, deafness or impaired hearing.
If your site is accessible, assistive technologies like screen readers or braille displays can be used to access the content. However, making the changes needed to make your site accessible can also make your content clearer to read for everyone.
Making Text Accessible
Heading Styles
Heading styles are really important for accessibility. When you can see the page clearly, with your 20/20 vision, it is easy to think that just making titles stand out by making them bold, italic or underlined is a great way to make things clear. But, think about what happens if you can't see that page - your eyes can no longer help you see where the next section of content starts, and you won't be able to ignore the rest of the paragraph, and skip to the next.
However, if you use Heading Styles to title your sections instead, a screen reader can identify each section you have created on the page, and the user can choose to skip through the section using their screen reader - No more wading through the content to find the part you are interested in!
Bullets & Numbered Lists
Similarly to Heading Styles, using bullet points and numbering properly actually contributes to making a document or web page accessible.
Each bullet point indicates one item within a list. Even when a sighted person views a list, the content becomes clearer to understand, but when a screen reader user listens to a document, each bullet point is read out distinctly, preventing words from merging together and bringing clarity to the content. Lists also aid with navigation. The user can understand how many items are in a list, and be able to jump from list to list in the content.
To ensure that your lists function properly, avoid making paragraphs that look like lists using symbols or numbers, for example a dash. Format the text as a real bullet or numbered list using the list option on the editor toolbar in the CMS.
Making Images Accessible
Pictures are, obviously, very much a visual tool, but if they add value to a visitor on your page you should make sure that value is shared with everyone.
Slideshow Images
Don't worry, the images at the top of your site are deemed as decorative as they don't provide any useful context about the content. We've made sure that they are labelled appropriately so they won't interfere with screen readers.
Content Images
Images that you add to the content area of your pages are usually there to add value to the text. When a screen reader views the page, it knows what to say where there is text, but in order for it to explain what the image is of, you need to add Alternative Text to the image.
Avoid using images that contain large amounts of text, as these are hard to read for sighted visitors, and can be impossible for someone who is visually impaired. It's not helpful to add things link flyers of wording, or tables of data, as images. Ideally the wording from the image should be added to the page content, and you may want to consider whether it could be added as a document attachment, if it originated as a pdf, for example.
Custom Features with Images
If you have any custom features that require an image to be set, for example Homepage Image Quicklinks, you will need to set the alternative text within the Custom Data settings for that feature.
News & Blog Thumbnails
When you create a news article or blog post, it's good practice to set a thumbnail image, to engage your visitor and help them pick out the different articles. Make sure you set Alternative Text for thumbnail images too, in order to make sure your news items are accessible, wherever they appear on your site.
Making Video Accessible
If you add a video to your site, you need to think about how that can be consumed with accessibility in mind. There are two important tools that you need to get to grips with when creating videos - captioning, and transcription.
Captions convey the spoken words and other useful audio information in a video - for example, the sound of a door banging or music playing. They are synchronised to the video and can often be turned on or off as needed.
A transcript of a video is also the text version of all the words in the video. This could be added as content on the page, and/or a document that can be used alongside the video and, some video platforms allow you to create 'interactive' transcripts which sit alongside the video and highlight the text as the video progresses.
Captions or transcripts are vital to allow someone with visual impairment to understand the content, but can also be useful for people who process the written word more easily that audio. WebAIM, provide some useful articles about captioning and transcription that you may find helpful.
If you want to make your video content accessible, we suggest using a dedicated video platform to store your videos (like YouTube or Vimeo). These contain all the tools you need to make your video accessible. Once you have your accessible video ready, you can embed it into your site using the video tool.
Making Links Accessible
So that someone using a screen reader can understand what a link does, the link text needs to describe it's purpose. When adding and editing links make sure you consider:
- Phrases like 'click here' or 'read more' are not sufficient to describe the purpose of the link.
- Button links also need to follow the same rules.
- The URL alone is not a good example of link text, as this will be read out in full by the screen reader and are not purposeful.
- When using images as links, you should set the Alternative Text of the image so that this can be picked up by the screen reader as the link text.
Making Tables Accessible
So that tables can be read effectively by a screen reader they need to contain headings to ensure that the data can be understood in the right context. As a sighted visitor, it's easy to see how the data is grouped, but for someone using a screen reader, they need to know which column they are in to make sense of what the are hearing.
When editing tables in the CMS you can choose whether the Top and Left columns are treated as Headings. Doing this will ensure that any visitor to your page can understand the data you are presenting to them.
Ensuring Colours are Accessible
Whilst you might be keen to use the exact colours you chose for your organisations branding, it's also vital that the colours on your website contrast enough that the site remains accessible for all. The WebAIM Colour Contrast Checker is a tool that you can use to see how your colour choices affect accessibility. Making the wrong colour choice for your website at the start will have an impact on accessibility across your entire site.
You may have noticed that there is no option to change the colour of text when editing page content, and that's deliberate. By restricting the colour options available, and providing you with a pre-set colour theme across your site, we reduce the chance of poorly contrasting content being added.
Creating an Accessibility Statement
To ensure you meet the accessibility requirements published by the government you'll need an accessibility statement that explains how accessible your website or mobile app is. Partially exempt organisations do still need an accessibility statement and the government have provided an example accessibility statement which you can customise for your school or MAT website.