Ashley Sheridan​.co.uk

Web Accessibility in Detail

The power of the Web is in its universality. Access by everyone regardless of disability is an essential aspect. Tim Berners-Lee

When Tim Berners-Lee opened the WWW to the general public in 1991 (previously it was internal to the CERN network) he had a vision that it would be of use by all, and that tenet is as true today as it was nearly 3 decades ago.

Back in the 90's, we had little in the way of assistive technology to help web browsing for those less able; we didn't even have a lot to offer in the way of standard browsers (Netscape and IE were the choices). Look around today, and there isn't a mainstream operating system or browser that doesn't have some kind of accessibility features. If anything though, there is as much difficulty now as there was in 1991. What we've gained in assistive technology, we've lost by creating incredibly complex web applications; applications that are veritable works of art, but that seem to almost deliberately make it difficult to be parsed by assistive programs.

Accessibility options dialogue in Fedora Linux

What Does it Mean to Make a Website Accessible?

If you ask most web developers, making a website accessible means to make it work for blind people: add alt text to images, make sure the colours contrast, and call it a day. Laura Kalbag makes a good analogy about building accessibility not just being about wheelchair access in her article Why Bother with Accessibility?. While I think it's not a bad thing to add any kind of accessibility feature, it's not enough. At best it could be considered a naive effort, at worst it's a lazy one.

So what are the types of disability are there that can impact upon a persons web browsing?

Visual

A Pug seen through differing forms of colour blindness, original source: https://www.boredpanda.com/different-types-color-blindness-photos/

Auditory

Motor

Stephen Hawking is unable to use conventional computer peripherals, and instead navigates with his eyes

Cognitive

Age

Age is a pseudo-disability, which can include one or more of the aforementioned issues. but particularly they can also suffer from:

With life expenctencies increasing year on year, the potential audience for your website will likely be getting older as well. This will mean more users with age-related issues visiting your site, so accessibility is essential.

Specific Problems Users Have on Websites and How to Overcome Them

These disabilities can lead on to a huge array of problems with website usage. Depending on what disability/disabilities a user has, they may have encountered one or more of these problems. Note that this isn't a complete list, and that there may be other issues which are not fully covered here. Almost all of these problems can be prevented, or greatly lessened if you develop with a little consideration towards peoples disabilities. It's also incredibly important to remember that users may not suffer from just one problem. As is particularly evident with age-related disabilities, a person may have multiple problems that can affect their browsing capabilities and behaviour.

Users should be able to easily determine where they are, across all levels.

This relates to issues with memory, and attention span. Being able to easily identify where you are at all times is important for these users.

Amazon follows standard practices with breadcrumbs, navigation, and other key layout elements, making the user experience more comfortable and simple.

A user may not be able to use a mouse or other pointing device, so navigation throughout the site should be available via other methods. Generally if a site is fully navigable via keyboard, it's a good indication that it's accessible. It's worth noting though that this alone does not guarantee accessibility.

Colours should not be used to convey meaning

There are many kinds of colour blindness, which can make it extremely hard or impossible to distinguish elements on a page. Try converting the entire colour scheme to grey; do all parts of the site still make sense, or are there parts which no longer make sense without the colour information. Consider using different shapes instead to communicate, and allow enough colour contrast for things to stand out well.

By using only colours to identify the on/off status of these switches, it is not clear for those with colour blindness to know which is off and which is on.

Content that is of a particularly visual nature should have additional textual content that can be rendered by assistive technologies

Some users may not be able to see at all, and will be relying on other means of "seeing" your website. Anything that is visual-only should allow for this and have additional markup to aid visually impaired users.

Audio content should have accompanying visual aids, e.g. audio captions

This is less of a problem for the majority of websites, but still an issue if you're using audio for anything, which includes the audio tracks on videos. Try to provide captions for audio tracks, or a link to alternative pages describing the content.

A YouTube video of President Obama with captions for those with hearing problems

Content should be as simple as possible without sacrificing purpose

Some users suffer from short term memory issues, and some may have learning difficulties, which can make it hard to process complicated pages with too much content (both visual and audible content). ADHD and epilepsy sufferers can mean that people cannot easily use websites that are full of animations.

User journeys should be intuitive

Users may be older or suffer from learning disabilities, which may mean they find it harder to learn new concepts, or understand what they should do.

What Can You Do?

You might be saying to yourself right now that this seems like an awful lot to remember, and you'd be right. That doesn't mean you should just give up in the face of a daunting task. In the same way that you learned to write good, clean code over time, bit by bit, you can learn how to make your websites accessible too. Pick a page of your site, and run through some basic tests:

These should give you a basis for improving other, more complicated aspects of your site. By approaching the effort in manageable chunks, you can more easily fit it into your typical development time with little overhead.

Also, if you can, try to get real people with real issues testing your work, get some feedback from the people you're trying to help. This can also help highlight more specific areas that you can focus your time on, which can be very helpful if you're trying to improve on a legacy codebase.

As developers, we have a duty to ensure our work is good and meets standards that we set. Accessibility efforts should become part of your quality standards. If you work as part of a team, get all members on-board and aware of what kinds of things need to be done, and question each other on code peer reviews. If you work alone, then reach out to other developers in the community, and read from some of the many great resources out there, like Marco Zehe's Accessibility Blog and the WAI-ARIA basics guide.

Embrace Tim Berners-Lee's ideal of an accessible web. He believed that everyone should be able to access it, and you should too.