New government legislation on Web accessibility (WCAG 2.1) means public sector organisations now have a legal duty to make sure websites and apps meet accessibility requirements.
From September 23rd 2020, you need to be mindful of any content you add. As the practice is responsible for the content on your website, you’ll need to make sure the content you add is compliant. Content can mean anything from uploaded documents or images, links to other websites, adding videos or adding text.
When we deliver your website on our Digital Practice Platform, it is delivered to you compliant. What's important is that you are mindful when you add content.
The Accessibility Standard is all about making as much content as possible, accessible for all.
We've put together a few things to look out for when adding content to ensure you keep your website compliant.
Alt Tags for Images
Search engines cannot interpret images. Alt text is an attribute applied to images that provide a text alternative for search engines. Images with properly formatted alt text contribute to how that page is indexed and where it ranks. Alt tags are vital for users viewing a webpage on screen readers. That way, users can still access the relevant information even if they cannot see the image.
Alt tags are mandatory on your website as part of the new legislation.
When you add an image to your My Surgery Website or The Digital Practice platform, you'll need to put in a description.
Images
In My Surgery Website Legacy, add a description into the "Name" field:
In The Digital Practice, add a description into the "Alternative Tags" field:
You will not be able to upload your image until you enter an Alt description.
Colour Contrast
Some users with visual impairments will not be able to interact with your website if the colour contrast is set incorrectly.
Check the colour contrast on your website pages, including any PDFs or other document types. This could range from banners, newsletters, documents, PDFs and images.
You’ll need to check that the contrast ratio between text and the background colour of your website is at least 4.5:1
You can use the Accessible Colours website to check the foreground and background colours.
For example, this website has a row about online consultations. You can see the text is hard to read on the red background and the foreground and background have a very low contrast ratio.
Adjusting the colours by changing the background colour to a darker red, and changing the text colour to white, means that this piece of content meets the 4.5:1 contrast ratio and is much more accessible:
Tip:
Checking the colours first in a Contrast Checker tool first allow you to see if the colours are accessible or not first:
Give your links unique and descriptive names
First, check the documents that you've uploaded, and uploads in the future have descriptive titles that explain exactly what the document is.
An example of a good title is “New Patient Application form”, as it makes clear what the document is and what a user would use it for.
Something like “ScannedDocumentRegForm” is not, because it’s vague and does not explain what the link is.
To help with this, rename your file on your computer before you upload the document. When uploading the document ensure the "Name" field has a clear descriptive title as seen below:
Use of Headings to Structure Content
It’s important that any headings you’re using are styled properly. This is because some users with visual impairments use tools called ‘screen readers’ that read out page content to them.
Screen reader users often jump through the list of headings in a document so they can skip to the content they’re looking for.
If you’re styling headings just using bold, or by using bigger font, then screen readers will not recognise them as headings. This will stop users from skipping straight to the content they need.
To check your headings are styled properly, select the text with your mouse in the editor.
In the example below, our mouse is selected at the end of the "My Surgery Website Demo" heading. In the bottom left of the editor, you'll see that H1 (Heading 1) is the heading that has been used.
If you've used a heading you'll see H1, H2, H3, H4, H5 or H6. If you've used a Paragraph you'll see P in the bottom-left.
Highlighting the text and select TEXT STYLE and your desired heading allows you to change the heading size as seen below:
Further Accessibility Checks
For a full range of checks. Visit the Gov.UK - Accessibility Requirements website which outlines how you can do an accessibility check on your website.