Accessibility Guidance
The Importance of accessible digital content
As of the 23rd September 2019, all UK publicly owned websites must be made fully accessible for people with accessibility needs. As a part of the regulations, public websites must produce an Accessibility Statement (example from this website), which outlines all known issues with the website, how to correct them and when to fix them.
Although this regulation only applies to publicly owned websites, the UK goverment may have plans to extend this regulation to all websites available to the UK. Even if this plan does not come into fruition, these rules can benefit the experience of all website users.
As an editor of a website, it is your responsibility to produce content that is fully accessibility. The only exemption is for content that is not owned by your website, for instance links to YouTube videos. Below is a short guide on all major issues and things to keep an eye out for, and how to fix them.
If you have any issues or questions related to website accessibility please get in touch.
For more information on the UK's website accessibility regulations.
Key things to make accessible digital content
1. Keep text concise and clear
2. Use formatted headings and subheadings
3. Keep structure simple
4. Make sure left aligned not justified
5. Make sure any hyperlinks describe where the link takes you
6. Avoid using colour and shape to show meaning
7. Use content table navigation
8. Consider alt-text for images
9. Avoid images of text
10. Write short descriptions for complex figures
11. Use arcuate live captions for videos
12. Include transcript for videos
13. Use HTML format for forms
14. Only use tables for data
Images
When adding images to a webpage, one key thing is to add 'Alt-text'. To do this, upload your image or navigate to the image on your webpage on 'Google Sites'. After selecting add in a short description about the image (see right).
Further advice can be seen below, keep your description short and meaningful regarding the content of the image. Do not start with such phrases as 'Image of' or 'Figure of'. If your image doesn't add to information to the content of your page, you do not need to add any alt-text such as generic banners, logos or loyalty-free images of objects.
Examples of alt-text below
Good
1. Thistle in green field.
2. Purple flower growing in field.
Bad
1. Image of flower.
This does not add anything meaningful
2. The wild thistle growing in a field symbolises the national flower of Scotland, which was adopted over 500 years ago. This flower represents the highest honour in the country. The thistle...
Far too much detail, add this to an image description
Good
1. People attending a meeting around a large table
2. Person presenting a talk in a meeting
Bad
1. Joe Bloggs presenting at WOD event in front of the HR team
Names aren't important here and do not use acronyms
2. Meeting, person, human resources, administration, presentation
Do not use keywords
Decorative image
This is an example of a decorative image and does not require any alt-text.
Adding alt-text here would provide too much unnecessary information for people who rely on screen readers.
You must, mark as 'decorative image' please click on the 'Decorative image?' box just below the 'Alternative text' box when uploading an image onto the website. An example of a decorative image is above, to the right of 'Key things to make accessible digital content'.
Example of a short description
'A salt gradient (0.6 M) is run after a sample containing polysaccharides is injected into an anion-exchange column. Within the column, the column matrix is positively charged, which attracts the polysaccharides that have a negative charge due to the presence of carboxyls. As the salt gradient is increased, the chloride ions, which are negatively charged, elute the polysaccharides that are retained within the column. This elution is caused by the chloride ions outcompeting with the polysaccharides bound to the matrix. Polysaccharides that are slightly negative are eluted with little salt, and polysaccharides that are highly negative are eluted with high amounts of salt. The resulting fractions are collected and then transferred into 96 microtitre plates. The microtitre plates are subsequently developed using the ELISA protocol.'
Videos
When uploading videos to your webpage there are several criteria that must be met.
The first criteria is that you must add accurate captions (do not rely on auto-generated captions like with the YouTube) if there is any speech within the video. WIN is currently exploring the use of Microsoft Stream that is a part of Microsoft's 365 package. This software allows for captions and transcripts to be adding and downloaded from a video.
For any live streams that will be available on WIN's website, there are live stream options on Zoom and via Microscoft Teams.
To generate accurate captions and transcripts via MS Stream or even YouTube, you simply upload your video ('keep private' or 'unlisted') and wait for the video to be processed – this can take a while, please bear this in mind. After processing, the software will auto-generate transcripts with time stamps. You can remove the time stamps and then copy and paste the transcript into a Word doc. Then you can edit, as the auto-generated transcript can include some odd wording. Then you can include this doc just below the video as a hyperlink. To edit captions you simple click on the video 'edit function'.
The final criteria is to make available a short description of any visual information such as flow charts, graphs or scientific figures used in the video. This needs to be included within a caption via link directly below the image. This short description would be similar to what you would add to a figure description within a manuscript or published article.
Text
To make text readable to screen readers (such as the Chrome Vox extension), all text must be correctly formatted including the use of titles, headings, sub-headings, captions and al-text. If these are not used, screen readers will read out all text at once.
Another thing to remember is to include all pages within a content list so that it can be easily found.
Tables
If you add a table ensure that it is labelled 'Table' (either in title, heading or caption) and include a written description of its content via link within a caption just below the table.
Avoid using complex tables with multiple headings and large amounts of text, and leaving empty cells. These things can confuse screen readers.
Helpful tools to check the accessibility of your webpage
Checked against WCAG 2.1 guidelines, with a focus on the items in the www.gov.uk WCAG 2.1 Primer Checklist.
Viewed without style sheets
Viewed on a small screen i.e. smart phone to check page vertically and horizontally
Checked using the WebAim’s Web Accessibility Evaluation Tool
Google’s Lighthouse extension plug in application
Other things to watch out for whilst maintaining a webpage
Please check all links and ensure that they still work.
For any item mentioning time i.e. events, please ensure it is up to date including moving current event into past event list or to remove it completely from a page.
Ensure that people listed on webpage are currently working for WIN and have the correct description.
Ensure publication list is up to date.
Ensure that any other lists such as talks and media highlights have been updated.
lease ensure that all staff and student profiles including images have been updated.
Ensure that any statement mentioned is still relevant or up to date.
Review your content regularly.