Boosting website accessibility: a practical guide

Web Accessibility, Man Writing on Transparent Screen

Dave and Vicky from VIDA Training, a business that provides training and consultancy services specialising in Vision Impairment and Disability Awareness, discuss how the public sector can boost website accessibility (and improve general communications too).

To give you some background before you read this article, VIDA Training is run by Dave and Vicky. Dave is registered blind and lives with a deteriorating sight condition. He uses Jaws, a screen reader to access a PC and, in the past, used to facilitate training in web design using HTML coding.

Vicky has worked in the disability field for many years and now, in addition to being a partner and trainer of VIDA Training, provides sighted support to Dave and other people living with a disability. Our combined knowledge and experiences ensure that a well-rounded approach is provided, both from a sighted and non-sighted perspective.

Together, we would like to share some of our top tips for ensuring that websites are accessible. However, everyone has their own opinion and often this varies depending on their experience and ability or is specific to a particular user group, vision impairment for example.

Website accessibility is not something to be taken lightly – The Office for National Statistics stated that, in 2016, 97.3% of disabled adults aged 16 to 24 years were recent internet users, compared with 99.4% who were not disabled.

It is quickly becoming the ‘norm’ for organisations to use their website or associated digital platforms to share information, interact with their users/members and be the primary form of contact and communication for their services.

Let’s take a local authority site for example. The majority of local county and borough councils have a website that has a whole host of services for their local constituents. This may include information and resources about local services, events, waste and recycling centres, household collection services, planning, benefits, council tax, etc. Many of these pages will require some level of interaction, appealing to a planning application or reporting a dumped vehicle for example. Such websites therefore use a wide range of tools and features to enable the user to complete a set task or operation.

Websites, due to the advancements in technology, can now be very complex and incredibly clever, however, often accessibility of some of these fancy features is overlooked or forgotten about, thus making certain tasks/elements impossible for some people to use/access.

We have therefore compiled our top 10 list of things that you can do to ensure that your website is accessible. This is our top 10 and doesn’t include everything that should be considered.

 

Ten top tips

  • Simplicity

Keep your website simple to use. Have a simple menu/navigation structure and ensure that the majority of your pages can be reached within three clicks.

  • Styles and Templates

Keep each page consistent using a template or style sheet. Avoid background colours or overlaying text onto images as this can make reading the text difficult.

  • Fonts

Ensure that your pages are easy to read by using an easy to read font such as Arial or Tahoma. Ideally, only use one font for all your content and use different font sizes and the bold effect to emphasise key areas/text. Avoid underlining and the use of italics as this can make text difficult to read. Text should be a minimum size of 12pt, ideally 14pt.

  • Headings

Building upon the previous points that will ensure consistency, add to the content structure by using ‘Headings’. Heading 1 (<H1>) would be your main heading, Heading 2 (<H2>) the 1st sub-heading and so on. Having a heading structure will enable quick navigation by people accessing the website using access technology.

  • ALT Text

Ensure that you use ALT text on photos and graphics. The ALT (short for alternative) text should describe the image and not what the image portrays. For example, if you have a photo of three people holding a cheque, then the ALT text could read “Photo of Mick (left), Joan (middle) and John (right) smiling and holding up a cheque for £30,000 made payable to Guide Dogs for the Blind Association”.

  • Bullets and Numbers

The use of bulleted and numbered lists will break up a page that might usually be a block of paragraphs and increase the white space on the page. This makes it easier for most people to digest information and would certainly benefit people who have dyslexia or a learning disability.

  • Links

All links on a page should be labelled appropriately. This is particularly important for people using access technology such as screen readers and magnification software as, when using this software, links can be navigated in a list. If you have lots of ‘Click Here’ links then it is unclear what that link does or where it will take you without reading the text around it.

  • Keyboard Accessible

Many people with a disability access a computer using a keyboard input only. It is paramount that all of your content can be navigated and accessed using a keyboard. If you have elements that have to be accessed via a mouse click then it’s not accessible.

  • Videos and Animation

It is becoming increasingly popular to link to videos or animated clips on a webpage. Ensure that your clips can be played using the keyboard (see previous point) and that the content is accessible to all. For example, if you have a video showing someone using sign language, ensure it is narrated so that someone with a vision impairment knows what the person is signing.

Equally, if your video has lots of spoken content that isn’t in text on the screen, then provide a transcript of the text so that someone with a hearing impairment can access it. However, avoid having your clips set to autorun as often this causes the page to refresh frequently or increases the download time causing problems for people using access technology software.

  • Forms and Captchas

Ensure that forms are kept simple (one field entry per line) and that labels are named appropriately. Ensure that any date fields can be input using the keyboard (some require a floating calendar to be clicked on) and where edit fields have a limited number of characters or are compulsory, ensure that this is stated. If using Captchas (the tests on websites to the ensure the entering of information is being done by a human), then ensure that these are accessible and include an ‘audible’ audio option (some audio captchas are very difficult to hear).

And finally for our bonus tip…

  • Test It

Test your website out with people who use different technologies. There are many people who are happy to test out a new website but be careful as often they only look at it from their own perspective. Using an organisation or individual that does this for their business will often provide a more structured and considered report. Where possible, use a user group throughout the website design stages and ensure that accessibility is built-in from the start and not thought about and bodged at the end.

 

Find out more

Further information about website accessibility can be obtained by visiting the World Wide Web Consortium’s (W3C) Web Accessibility Initiative (WAI) page – http://www.w3.org/standards/webdesign/accessibility

 

About the author

VIDA Training is run by business partners Vicky and Dave, who also undertake a variety of basic training packages that can be further tailored to suit the requirements of the organisation/people being trained.

As well as writing articles and providing the training and consultancy services mentioned above, they are also active on social media and write a weekly blog known as VIDA Insights.

Visit www.vidatraining.co.uk for further details, or if you would be interested in Vicky and David providing training or consultancy for you or an organisation email training@vidatraining.co.uk.

 

Related reading