How to make your website accessible

The Web Content Accessibility Guidelines (WCAG 2.1) outline what you need to do to improve the accessibility of your Town, Parish or Community Council website. This involves considering how the users with the following impairments can access your information:

  • Vision – including people who are blind, partially sighted or colour blind
  • Mobility – including users who find it difficult to use a mouse or keyboard
  • Thinking and understanding – including people with dyslexia, autism or learning difficulties
  • Hearing – people who are either deaf or hard of hearing. We won’t go into this in detail as it doesn’t apply to most Town, Parish or Community Council websites, only websites that use sound or video.

Making your website accessible to users with impaired vision

This means that your website should be accessible for users who cannot see well and may need to use a screen reader that will ‘speak’ the content to them to access your site or may need to enlarge the text using a screen magnifier or increasing the text size

What you need to do:

  • Provide ‘alt text’ for all non text content, for example images
  • Ensure your web pages are structured logically so that they can be read by a screen reader. The best way to do this is to use the Heading 1, Heading 2, Heading 3 options structure the sections in your web page, rather than manually setting font sizes and making them bold etc
  • Use tables sparingly. If you are using tables make sure that the headers and content are defined as such and that they work when magnified to 200% and on smaller screens
  • Do not use underlining other than for text links
  • If you publish PDF files as so many Town, Parish or Community Councils do, make sure they are accessible – See making pdf files accessible for how to do this

What your web designer needs to do:

  • Make sure that any forms, such as the contact form, have the correct markup to be read by a screen reader
  • Do not just use colour to distinguish something. For example use the convention of underlining to define links and do not use underlining elsewhere
  • Use default text colours that show up well against the background colour
  • Ensure that every feature can still be used when viewed at 200% text size and that content flows into a single column when it’s increased by 400%
  • Make sure you site is correctly programmed for screen readers
  • Use valid HTML to enable assistive technologies to interpret content
  • Ensure that all parts of the interface can be read by assistive technologies

Making your website accessible for users with impaired mobility

This is especially to address the needs of users with mobility impairments to ensure they can access your web content using keyboard or voice commands, rather than a mouse, to navigate through your site

What you need to do:

  • Make links descriptive rather than using ‘click here’ as the link. For example use ‘click for Parish Council minutes‘ rather than ‘for Parish Council minutes click here‘ where the underlined text represents the actual link.
  • Use meaningful page titles, headings and labels so that users can easily find the information they want if they are using a screen reader

What your web designer needs to do:

  • Make sure everything works for users who are just using keyboards
  • Ensure that using keyboards mean that users can move through the content in a logical order
  • Provide a ‘skip to content’ link in the coding of the site so that screen readers do not read out all the programming commands
  • Use ‘active focus’ so that users can see what their assistive technology is currently focused on
  • Enable visitors to disable or change shortcut keys

Making your website accessible for users with cognitive impairments

This is to address the needs of users with thinking or understanding difficulties. You need to ensure that the language and structure of your site is easy to understand

What you need to do:

  • Write in plain English, using short sentences
  • Use straightforward language and simple words and explain any complicated words or phrases
  • Always provide an explanation of any acronyms used

What your web designer needs to do:

  • Ensure that form fields are correctly labeled and that they’re correctly coded with accessibility in mind