An introduction to website accessibility

Featured image for post

When you are creating a website, it is easy to get caught up in designing sharp-looking features with a whole plethora of widgets and gadgets to keep your audience entertained. Yes, it does look amazing, and yes, it does everything you want it to do, but the one question remains - can everyone use it?

This means considering the people who make up your target audience, the different levels of physical and mental abilities that they may have and their level of experience with the web.  Any combination of these factors could prevent your audience from enjoying your website because of the way it has been designed and/or coded.

In short, you should be thinking of how to improve the accessibility of your website.

"The power of the Web is in its universality.
Access by everyone regardless of disability is an essential aspect."
Tim Berners-Lee, W3C Director and inventor of the World Wide Web

What this means for shropshire.gov.uk

Our website has a huge target audience - the population of Shropshire.

This is not just saying "those in Shropshire with an internet connection", this encompasses people from different age groups, different social backgrounds, different educational backgrounds, different physical abilities, different mental abilities etc.

Our audience could be viewing the website from their own computers at home, maybe with the aid of assistive technologies to help them navigate our site, or they may be using a public computer in a library or internet cafe with just a standard web browser. Regardless, they should be able to find their way around and understand the information they need.

At this point, you may be saying to yourself "but isn't that usability?", and, yes, to a degree it is, but usability & accessibility often go hand-in-hand.

Not everyone is the same

To give an example, the experience of using our site for a 80-year-old with failing eyesight is vastly different from that of a 20-year-old with dyslexia.

The 80-year-old may be using a screen reader or magnifier on their computer to help them browse the website.  Our code is properly marked up to allow the screen reader to identify the structure of the page, and the design we have implemented provides a clear visual division of the main content from other page elements (such as the header and navigation menu), with high-contrast text & background colours to make it easier to identify and read when using a screen magnifier.

The 20-year-old with dyslexia may struggle discerning individual words within long sentences or large paragraphs, and so the amount of text on each line is shaped by the design of our website. Likewise, the type, colour & size of font is kept to a standard by the underlying HTML & CSS, and the page content is structured by our content editors, who break the text down into easy-to-read paragraphs and use proper headings (the HTML tags <h1>, <h2>, <h3> etc.) where needed.

In both cases, the thought put into the structure and design of our website, along with our standard content management practices aid the visitor without us having to implement any additional features or alternate content pages.

What do we base our accessibility criteria on?

All public sector websites have a set of guidelines for website usability and accessibility, provided by the central government Central Office of Information (COI). These require us to design our websites to meet a certain level of accessibility standards which are defined by the World Wide Web Consortium's (W3C) very own Web Accessibility Initiative (WAI).

The main set of standards we have to comply with is the Website Content Accessibility Guidelines (WCAG). The COI has made it a requirement that all public sector websites provide content at least at Double-A level, as defined in version 1.0 of the standard (WCAG1.0).

To reach Double-A there are a number of checkpoints that affect the design and code of our website, most of which we planned for & put into place during the initial development through a mixture of automated and manual testing.

The importance of manual testing

It is important to understand that you can't judge accessibility through automated testing alone, as your code may be point-perfect, but the resulting content can be a nightmare to use, either by having a confusing design layout, or from poorly written & unstructured content.

The manual testing of the original shropshire.gov.uk website was aided by the involvement of a local centre that provides training and advice for disabled people. We had a couple of site prototypes that were put through their paces by their ICT Training Manager, who is visually impaired, and a student, who is blind.

They were able to highlight problems in our design - especially with the use of colour to convey meaning - and share some of the experiences they and other disabled students have with using websites. It was surprising to hear that a number of sites that had passed automated testing weren't usable at all, and others that had failed did actually have some good features to make up for it!

The discussion we had ended up making us rethink a lot of our layout to account for screen magnification and screen reader software, and showed us how to improve navigation within a single page by using bookmarks.

To sum up...

There are a number of people in the profession that will sacrifice accessibility for the sake of being the first to implement a new technology, or think it will limit how creative they can be. Accessibility doesn't mean shunning new advancements, and a smart, stylish site can be accessible too - just read this post and change the way you think!

Accessibility is something every website designer/developer should be thinking about when planning, building or maintaining a website. Quite often, the steps you take to improve accessibility for what may seem to be a minority of your visitors will have a positive effect on your site which can be appreciated by all.

In our case, structuring text and using headers helped us to provide more easily read and understood content, and paying attention to layout and the use of colour helped produce a cleaner, more intuitive design overall.

In short - accessibility is for everyone.

Coming up in a later post: The tools we use to test for accessibility.