Making your website accessible

Open laptop sitting on a table with text on screen "I design and develop experiences that make people's lives simple."

Our information hub article “The Click-Away Pound” highlights how the majority of businesses do not have accessible websites. As the digital gateway to your business, your website could be driving away 20% of your potential customers due to inaccessibility, which will have a direct impact on your bottom line.

How does an accessible website benefit your business? Simply put, an accessible website helps everyone! If you design anything for ease of accessibility, you make it easier for everyone to use – and more likely to attract (and keep) users (which is particularly relevant if you are selling products or services online). An accessible website will result in your website being faster, easier to use as well as being more smartphone / tablet friendly. It is also more likely to appear higher in search engine rankings (ie Google, Bing etc).

Your website and the law

For any non-public sector organisation, you are legally required to make ‘reasonable adjustments’ to ensure your website is accessible under the Equality Act (2010) [awaiting internal page]. However, it is recognised that there is no clear guidance as to what is meant by reasonable adjustments in terms of digital publishing, as there has been no legal test yet.

Therefore, we have provided some tips below to ensure your website is as accessible as practically possible.

From September 2018, all public sector organisations (the Be Ready Employer Hub included!) have had to comply with new accessibility regulations (Public Sector Bodies – Websites and Mobile Applications – No.2 – Accessibility Regulations 2018).  This means we must meet the standards set by the Web Content Accessibility Guidelines (WCAG) which have four broad principles (POUR) that content must be:

  • Perceivable – for example, use of alt-text (alternative-text) for images, captions for multi-media, content that can be seen or heard by assistive technologies without losing any meaning.
  • Operable – for example, any functionality is available from a keyboard, users can easily navigate and find content; sufficient time is provided to read and use content.
  • Understandable – for example, text is readable and understandable, content appears and operates in predictable ways.
  • Robust – for example the website is compatible with current and likely future tools.

The guidance we have provided below is taken from recommendations for public sector hosted websites so that you have recommendations for the highest standards of accessibility.

Designing for Digital Accessibility

Accessibility is about how a system or service is available to as many people as possible, which would include people with:

  • impaired vision
  • motor difficulties
  • cognitive impairments or learning disabilities
  • deafness or impaired hearing

This applies to any form of digital communication, material or service.  How easy would it be for a person with impaired vision to navigate your website currently by using a screen reader? Alternatively, could a Deaf person understand your corporate video?

The following are practical approaches that can help make your website more accessible:

  • The internet today is mainly accessed through mobile technology – phones and tablets – so make sure your website is designed to be compatible with current and likely future user tools.
  • Check how accessible your website is. A useful starting point is the WCAG’s page Easy Checks – A first review of web accessibility.  There are also free-to-use Accessibility Checkers available (such as Microsoft, Google).
  • Create content that can be viewed or used in different ways without losing any meaning – including by assistive technologies. Give users sufficient time to read and use content at their own pace.
  • Avoid content that may cause seizures or physical reactions (ie anything that flashes faster than three times a second). As well as animations, this could include elements such as scrolling (ie if the backgrounds move at a different rate to foregrounds).
  • Keep it simple! Use plain English (The National Literacy Trust estimates 5.1 million adults in England have a reading age of 11 or below). Avoid jargon, shortened forms of text (eg 5.1 million instead of 5.1m) and if you use acronyms, explain them.

Text content

  • Font – use a sans serif font (ie text that does not have any decorative features) such as Arial in a minimum size of 12 points. Websites default to 16 pixels.
  • Formatting – do not apply bold, italics or font size directly to the text to distinguish a heading or title. Instead, format and apply the ‘heading’ style for the document or page as required.
  • Colours – if you must use them, ensure they are contrasted (different) enough for people with sight loss and colour-blind users. The most common Colour Vision Deficiency (CVD) is “red-green” (difficulty distinguishing between shades of red, yellow and green). Around 1 in 12 men and 1 in 200 women in the UK are affected by this condition – reds, oranges, yellows, browns and greens appear duller than they would to someone with normal vision, and they often confuse reds with black. A rarer condition is “blue-yellow” colour vision deficiency where blues, greens and yellows are indistinguishable. More information is available from www.colourblindawareness.org/
  • Contrast – a useful tip to check if there is sufficient contrast between colours is to view or print off the page in greyscale (monochrome) to see how well the text can be seen.
  • Links – use a description for the link text rather than phrases such as ‘read more’ or ‘click here’
  • Attached documents – files with .pdf extensions (Portable Document Format) are frequently used to distribute read-only documents to preserve page layout, but they tend not to work well with mobiles or assistive technologies (such as screen readers). If you do use them, ensure they are saved in PDF/A format.

Images

  • Avoid images containing information (such as text, graphs, flow diagrams) as assistive devices such as screen readers cannot interpret the content. Instead provide the information as text.
  • Add appropriate alternative text (alt-text) to describe the image – check it makes sense out of context. List out data if relevant.
  • Do use images for presenting ‘easy read’ information (designed for people with a learning disability) who like clearly written words with pictures to help them understand.
  • Tables – avoid using if for cosmetic purposes. If they are required to display tabular data, keep the format as a simple grid.
  • Maps – can present accessibility problems, so if a map is needed, add alt-text (see above) to describe it as an image. If the map’s purpose is as a location finder, add directions and/or list of multiple locations as text. If a map has colour-coded areas, make sure it is accessible for colour-blind users (see notes above).
  • Videos – subtitles are a transcription of the dialogue, closed captions (cc) also transcribe sound effects, musical cues and other relevant audio information in a video or film. Auto-generated subtitles can be used for live video. A useful time-saving tip for YouTube is to use the auto-generated subtitle tool, and then edit them to contain the same information as closed captions. Best practice is to also publish a transcript of the video (this also helps with search engine optimisation).
  • Podcasts – should have a full transcript, published as text.
  • Social media – images should have an alt-text description added (guidance available from Twitter, Facebook, LinkedIn and Instagram); video uploads should include closed captions (guidance available from Facebook and LinkedIn).

Do you have an accessibility guide / statement on your website?

Known as Accessibility Statements, these declarations take the form of a short information page which is available via a link from every page of the website. They present clear information about the level of accessibility for the website, for example how someone with impaired vision can navigate through the website with a screen reader.

The Web Accessibility Initiative W3C provides useful guidance on what to include in an accessibility statement – Developing an Accessibility Statement.

You will find the Accessibility Statement for our website in the website’s footer.


For further information please contact the project team either via our on-line form or call us on 01392 241124

Please note: We are not responsible for the contents or reliability of linked websites and do not necessarily endorse the views expressed within them. Listing shall not be taken as endorsement of any kind. We cannot guarantee that these links will work all of the time and we have no control over availability of the linked pages.

We do not object to you linking directly to the information that is hosted on this website and you do not need permission to do so.