Website Accessibility

A guide to

About this E-book

A Guide to Website Accessibility ~ About this E-book

We believe that websites should be accessible to everyone.

Online accessibility, otherwise known as inclusive design, is about making sure that everyone has equal access to information on websites regardless of their physical or developmental abilities or disabilities.

With an aging population and a wide range of new devices to consider we think that this is an issue that is set to become increasingly important. The needs of disabled users are not so different to that of all users in a world of multiple inputs, platforms and devices.

This e-book is not an expert’s guide to accessibility but it covers the major areas that you should be considering when designing a website. It puts forward the business case for accessibility as well as giving you tips on how you can make your website more accessible to your users.

Accessibility should not be something that’s added on to the end but instead should be integrated fully throughout the design process.

2.

Table of Contents

What is Accessibility?

The Importance of Accessibility

Getting Started with Accessibility

Accessibility Tools

User Testing

The Future

Round Up

A Guide to Website Accessibility ~ Table of Contents3.

4

7

20

23

26

28

10

Online accessibility is about ensuring that everyone has equal access to information and services on websites regardless of their physical or developmental abilities or disabilities. A truly accessible website should be easy for all visitors to understand and use. An accessible website should also ensure that all users can contribute in the same way, regardless of any disability that they may have.

There are several different types of impairment that your website users may have, some of the more common ones include:

VisualThere are a wide range of visual impairments, from completely blind users to those with colour blindness.

Motor/MobilityPeople with difficulty or inability to use their hands, including tremors, muscle slowness, loss of fine muscle control, etc. This may make using a mouse or touchscreen devices particularly difficult.

AuditoryPeople who have trouble with their hearing or are completely deaf. This is less of an issue for websites than other forms of media but needs to be considered, particularly if your site relies on using video.

SeizuresSeizures can be caused by visual strobe or flashing effects. This is not often an issue for websites but should still be taken into consideration.

Cognitive/IntellectualLearning and cognitive disabilities which may affect memory, attention, problem-solving and logic skills.

1 What is Accessibility?

A Guide to Website Accessibility ~ What is Accessibility?4.

It’s worth remembering that accessibility is not just about people with permanent disabilities. When building a website you should also consider older users, those with temporary disabilities (e.g short term injuries), technical restraints of your users such as older computers or browsers and device restrictions including mobile browsers. The context people are using your website or app in might also give them temporary accessibility issues, for example people trying to use an app while driving, or trying to read a web page in the sunshine.

Some of the people visiting your website will be using assistive technology to help them. Some examples of assistive technology include:

Screen enlargers/magnifiers – to increase the size of the content on the screen

Screen readers - that read out the text of a website

Braille displays – which help partially sighted users ‘read’ a page using touch

Specialist keyboards – which have larger keys than standard keyboards

Mouse substitutes - these include joysticks, trackballs, switches and touchpads

A Guide to Website Accessibility ~ What is Accessibility?5.

Aa

Accessibility and Usability

There is a lot of debate about the difference between accessibility and usability. It’s generally agreed that accessibility is a subset of usability, though it’s often hard to define the difference between the two. Usability generally refers to the ability of ‘average users’ to navigate and use a website but, as touched on above, accessibility covers all users.

It could be argued that website is not fully usable unless it is accessible, but there is a lot more to usability than just whether all users are able to use the site.

A Guide to Website Accessibility ~ What is Accessibility?6.

Accessibility is often an after-thought in web design. Companies may believe that accessibility issues only effect a tiny percentage of users, and that those users are unlikely to become customers, but they couldn’t be more wrong. As well as the obvious ethical case for accessibility there is an equally strong business case for building accessible websites.

Some facts about website accessibility:

• There are over 11 million people with a disability living in the UK which is around 20% of people of a working age

• Their spending power is in excess of £100bn

• An aging population means the numbers are likely to increase

• 1.8 million people have a vision impairment, of which 180,000 are registered blind

• Roughly one in 12 men has colour-blindness, but only around 0.5% of women do.

• 2.6 million have difficulties using their hands which could impact their use of keyboard and/or mouse

• About two million people have a hearing impairment, of which 50,000 use British Sign Language to communicate

• About two million people are dyslexic

• 2.2 million people have difficulty with memory, concentration or learning, of which about one million have a learning difficulty

2 The Importance of Accessibility

A Guide to Website Accessibility ~ The Importance of Accessibility?7.

• 83% of disabled people will not return to a business that does not meet their access needs

Source: AbilityNet

In short, if your website is difficult for people to use they will have no hesitation of leaving your site and taking their business to your competitors. Time spent ensuring your website is accessible is time well spent as you are very likely to see a high return on investment.

Aside from potential increased revenue there are other advantages to improved website accessibility. These include reduced page sizes (meaning faster load times), improved SEO and in some cases future-proofing your designs. Having a full accessible site is also great for your overall brand reputation.

There are legal risks of not ensuring that your website is accessible that should also be considered such as the disability discrimination act. While some of these are rarely enforced they can lead to very large fines and even imprisonment.

Changes in technology have meant big changes for accessible design. The increase of mobile and tablet usage has improved the accessibility options for millions of people and led to a big increase in potential customers for your site. This has, however, presented designers with more challenges and meant that ensuring websites are accessible across all devices is not a simple process.

Accessibility is not a quick test that should be run to check that a site is ok after it’s been completed; accessibility should be kept in mind at every stage of the design process.

A Guide to Website Accessibility ~ The Importance of Accessibility?8.

Accessibility Case Studies

It is often difficult to assess the true value of accessibility improvements. However, in the two cases below it is clear to see that making changes to improve your website’s accessibility can result in big increases in conversions. Tesco

Back in 2000 Tesco tested their proposed redesign with 20 users of varied visual impairment. They then followed this up by beta testing the new interface with 70 blind and partially sighted users. This lead to them stripping out superfluous images, adding clear descriptions for all link text and simplifying the site’s column based navigation.

These changes resulted in a site sales revenue increase to £13M annually. This is based on a principle that a user should be able to make a purchase of 30 items within 15 minutes. As a result of the changes the accessible site displayed well on mobile browsing devices and on poor quality connections.

Legal and General

Legal and General designed and built a new site that conformed to accessibility standards. It successfully passed usability testing and evaluation by users with disabilities before going live in summer 2005.

The results showed big improvements in a range of different areas. This included saving of £200k per annum on-site maintenance, an increase of 95% in site visitors getting a quote and an increase of 90% in sales of online life insurance sales. The 100% return on investment was predicted for significantly less than 12 months.

Other benefits included a 30% increase in natural site traffic and a 75% reduction in page loading time. It also led to a site that was easier to maintain with site maintenance reduced from an average of five days per job to just 0.5 days per job.

A Guide to Website Accessibility ~ The Importance of Accessibility?9.

Few websites are totally impossible for those with impairments to use but most pose some difficulties for some people. Remember, every change you make to improve the accessibility of your site will help make life easier for your users, so even small changes are worth making. The following section looks at some of the key areas that you may want to consider when designing an accessible website.

Areas to consider

Images

Using alt text is a good start but these are often used incorrectly. It’s wrong to think that simply having alt text is enough. The text really needs to accurately describe what the image is and what it represents. If the image includes a link it’s important that the destination of this is made clear. Alt text for ‘decorative’ images should be left blank to save screen readers reading out more information than necessary.

Keyboard usage

A lot of disabled users will use the keyboard rather than their mouse. This means your website needs to be navigable with the keyboard too. Keyboard users will not have a curser to show them where they are on a page so the keyboard focus should be obvious. In the example below you can clearly see that the focus is on the email address field.

3 Getting Started with Accessibility

A Guide to Website Accessibility ~ Getting Started with Accessibility10.

Keyboard users will then press the tab key to navigate to the next field. This tab ordering should be clear so that pressing tab after entering an email address will take the user to the next logical field, in this case the phone number. Forms can pose a big accessibility problem for people if they are not correctly designed. You should always use labels for input fields while showing clear and useful error messages. CAPTCHA is a real accessibility problem, so avoid using them where possible.

Your website might also benefit from the use of access keys as a way to help users to navigate. Access keys allow users to immediately jump to a specific part of a web page via the keyboard. The keys used will depend on the browser and operating system but the main navigation of a site will often be represented by holding shift or alt and pressing a number or letter that corresponds to each section.

A Guide to Website Accessibility ~ Getting Started with Accessibility11.

The usefulness of access keys has been questioned though for various reasons, with the general consensus being that they are a ‘good idea poorly implemented’. Firstly, most browsers implement access keys poorly, meaning that there is no consistency of how they are used. There is also no consistency as to how site developers implement them as some sites use numbers while some use letters. Access keys will also not be known by the user on arrival at the website, they will normally need to go to the accessibility page to find out what the access keys for the site are.

Access keys are best used for sites that have regular visitors who may have time to learn the correct key shortcuts off by heart. While access keys are not useful for most of your visitors there are few downsides to implementing them on your site so you should not rule out using them completely.

Labeled access keys on the No Pork Pies site

In short to maximise your website’s accessibility you should ensure that all the functionality can be used with a keyboard as well as a mouse.

Links

The main recommendation with links from both an accessibility and a usability point of view is to ensure that the destination of the link is clear to your users. This means don’t use ‘click here’ as the anchor text for your links; instead you need to use descriptive text which will be useful both for users who are scanning your page and also those who use screen readers.

It’s also important to let users know if a link is going to open up in a new window, and if the link is going to anything other than a standard webpage; e.g. a PDF.

Text

The text on websites is often overlooked but is one of the most important aspects of any site. The font size should be large enough to be easily read by default and should allow itself to be resized without breaking the layout of the page.

The line spacing is also important as some people with cognitive disabilities have trouble reading lines of text when it is single spaced. Wc3 recommend a line spacing of between 1.5 and 2 to make your text more readable.

Text on the page should also have a good colour contrast with any background images, this is important for both partially sighted users and those who suffer from colour blindness.

The text should be correctly laid out on the page. This means that headings are used correctly, both to make the page easier to read on screen and also to help those using screen readers to get a better understanding of what’s important.

A Guide to Website Accessibility ~ Getting Started with Accessibility12.

Colours

Approximately 7-10% of all men have some form of colour-blindness. This compares to just 0.5% of women but overall in Britain there are approximately 2.7 million colour blind people which is about 4.5% of the total population.

Colour Blindness can make it difficult to differentiate between some colours, particularly red and green but it doesn’t mean that people with this condition cannot see certain colours. They’re not invisible and it’s actually very rare for people to see things in just black and white.

A Guide to Website Accessibility ~ Getting Started with Accessibility13.

The text on the right is much easier to read due to better line spacing, clearer layout and use of headings

Previews from a colour-blind testing tool, more on this in the next chapter

As you can see, while the site may not look as nice to users who are colour-blind, it appears to still be fairly easy to read and navigate.

While the page ‘appears’ to be easy to read there is often more to consider about a design than just a simple screenshot. There are elements in most websites where colour is used as a visual clue to help aid the overall user experience. For example if you show visited links in a different colour to unvisited links you need to make sure that both colours are visible to colour-blind users. The same goes for hover states on buttons and navigational aids showing where a user is in your site.

While choosing the right colours can really help colour-blind users it is generally best practice to avoid using colours alone as visual clues. Using shapes to differentiate between icons will cause fewer issues for colour-blind users.

One example of this is the old Apple iPhone availability page (shown to the right). For most users this is a very clear page but if the user has problems differentiating between red and green, a common colour-blindness issue, then they would see identical circles. If Apple had used different shapes as well as colours then this page would have been accessible to more users.

Colour can still be used but it should be contrasting to give colour-blind users the best chance of being able to differentiate between them. Using colours that just look different to you may not be enough.

A Guide to Website Accessibility ~ Getting Started with Accessibility14.

A Guide to Website Accessibility ~ Getting Started with Accessibility15.

It’s not really that difficult to ensure your site is usable by colour-blind visitors, it does take a bit of planning though. Where possible use icons, different shapes or words to make sure your navigation and site features are clear for people who may not be able to differentiate between different colours. If you must use different colours in some aspects of the site then ensure they are contrasting to minimise the difficulties your colour-blind users will encounter.

Accessibility page

Your website should have an accessibility page to help your users to find their way around. This should be a clear link from every page on your website and include information that gives practical assistance to your users and shows them that you have thought about their needs.

You accessibility page should include a compliance statement reassure your users that common features should be available to all. You should also offer help with accessibility features. Users will normally be able to increase text size, add voice output or increase colour contrast. This often differs depending on operating system though so include a full list of how to make these changes on common browsers to make it simple for your users.

Finally, you should include a clear path for users to give feedback. This not only allows your users to ask you questions that may help their experience but also provides you with useful feedback that can be used to improve your site.

A Guide to Website Accessibility ~ Getting Started with Accessibility16.

Q&A with Robin Christopherson

Robin is Head of Digital Inclusion and part of the

globally-acclaimed accessibility and tech team of

AbilityNet. He has spoken at numerous events in recent

years on the subject of accessibility. Robin is himself

blind and is an expert on good and bad practice in

website and mobile accessibility.

Being visually impaired do you need to use any special equipment to use the internet?

I have no useful vision at all so I use speech output. On a desktop I use software called JAWS and on a phone and iPad I use VoiceOver, which is built into apple devices.

I often don’t take a laptop for meetings as my phone can do word processing, speadsheets and emails. It also runs a range of apps to help me get from A-B as well as organising my appointments for me.

Are these apps made specifically for visually impaired people?

Mostly not. Talking Goggles, for example, is a standard app for the iPhone that uses the camera to identify anything that it’s pointed at. It can be used by people in the supermarket to look up nutritional information of a product or where they can buy it cheaper. The upshot for blind people though is that it can be used to identify the CD that you’re holding in your hand. It can also be useful for orientation as it can read street signs, and identify buildings that you point your phone at.

Another app called Fleksy is an alternative keyboard which is much more forgiving about where you type. This was built for people with ‘fat fingers’ but this is also really helpful for blind users.

A Guide to Website Accessibility ~ Getting Started with Accessibility17.

Before the advent of the smartphone you would need to use specialist software that cost hundreds of pounds (or hardware that cost thousands of pounds) but now most of the software I use is available for free, or very cheaply, from the app store.

What are your thoughts on wearable devices? Have you tried Google Glass for example?

I’ve tried Google Glass on, obviously I couldn’t see the heads up display but I could use the voice controlled features and keenly await the time when screen reading software comes to Glass. There are around 58 alternatives to Glass currently in development as well as a huge range of different smart watches.

Wearables offer a lot of functionality that add convenience for some, but that are disproportionately more beneficial to disabled people. Google Glass for example could identify street signs, buildings and products without the need for me to take my phone out of my pocket - it would always be looking where I’m looking. There is also very sophisticated software that enables people with Aspergers or Autism to identify emotions based on facial expression and for deaf people where it could provide subtitles using voice recognition and the heads up display (HUD).

There is also a major health benefit to wearables for some people as they could potentially be used to measure blood sugar levels amongst other things. Where other people might be using a wearable to get fit, people with medical problems may use it to get information to help track their health condition.

What are the main issues you encounter when using websites? Do you browse the internet or do you only go online to complete specific tasks?

The main issues with a lot of websites is that they don’t cater for keyboard users and excessive use of JavaScript or AJAX. When it comes to using the internet it’s not something that I would do for leisure!

A Guide to Website Accessibility ~ Getting Started with Accessibility18.

This may sound odd as many people do use it for fun but for a blind user a website often has a lot of junk and constantly changing blocks of text that makes using the internet feel more like taking a battering!

Mobile websites are better though and even before I had a mobile device that could talk to me I would often visit the mobile version of websites on my desktop. Mobile versions of sites are generally cleaner, simpler and shorter. A couple of years ago mobile sites couldn’t support AJAX and Flash so it made them more accessible all round.

Are there any sites that have been made purely for visually impaired people?

There are a lot of sites that are made by blind people for blind people as they have a lot of information to share. At AbilityNet we feel that the term accessibility can be dangerous as people see it as an ‘extra thing’ they need to think about. They think of it as something requiring extra time and budget and, when push comes to shove, it can get left out. When you think about ‘inclusive design’, then this suggests that you’re improving the experience for everybody.

Is inclusive design a term you prefer to accessibility then?

Yes, ‘digital inclusion’, ‘inclusive design’, ‘everybody technology’, whatever you want to call it we want to move away from having separate websites for different groups. For example, Gmail offers a simple version that doesn’t use AJAX. Whilst this is better than doing nothing at all we would prefer there to be one site that cuts content right back and is simple enough to be viewed on mobile devices. People aren’t rigorous enough on cutting back on content for desktops anyway; you should really try to halve the content that you have there.

People are often temporarily disabled; if you’re driving or trying to view your screen in bright sunshine then you’re temporarily visually impaired.

A Guide to Website Accessibility ~ Getting Started with Accessibility19.

Are there any websites that are better than others?

The BBC have always been very conscientious about accessibility so they’re a good place to go to see best practice. Amazon are typically ahead of the curve as well.

Airline sites, online newspapers and a lot of e-commerce sites are poor. They often contain a lot of flash adverts and content that isn’t screen reader friendly.

Do you have any tips for website owners to make their sites more accessible?

We recommend following the technical guidelines, but this will only get you so far. You really should be testing with disabled users. If you’re unable to source disabled users then AbilityNet can help with that. We’ve seen lots of websites that are strict AA compliant but that are still very difficult for disabled users. You can check all the boxes when adhering to the guidelines but there can still be a lot of issues, mainly UX related ones.

Disabled user testing is like extreme user testing. By testing with disabled users you’ll find the issues that relate to their disability but they will also uncover the same issues that your other users would find. You find the vast majority of the issues that you’d find with normal user testing, and you’ll get the additional findings as well

The following are all free tools that can help improve the accessibility of your site. They cover a range of different accessibility issues.

Contrast Checker

It’s vital that the contrast between text and background images on your site is sufficient to make text legible for everyone. While some designs have a very clear contrast if you’re experimenting with colours that don’t have a high contrast then you should run them through this tool.

4 Accessibility Tools

A Guide to Website Accessibility ~ Accessibility Tools20.

The tool lets you select your colours then checks them against web standards to see if they pass contrast tests. In the example above we can see that these colours only pass three of the four tests so if this combination is used for normal sized text it may cause a problem for some users.

Link: http://webaim.org/resources/contrastchecker/

A Guide to Website Accessibility ~ Accessibility Tools21.

Wave Toolbar

This browser extension instantly shows you accessibility issues with any site that you navigate to. This is handy if you manage a lot of sites or are testing out changes to a site as it will show any accessibility issues without you having to leave the site to check it. The toolbar has other useful features like the ability to quickly show a text only version of the page. The toolbar is easy to use and is a great way to keep accessibility in mind throughout the design process.

Link: http://wave.webaim.org/toolbar/

AChecker

A tool that gives a very thorough accessibility check and overview. This checks against a wide range of guidelines and gives a report at the end that clearly shows where any issues are and gives advice on how to fix them.

Link: http://achecker.ca/checker/

Colour Blindness Simulator

As the name suggests this tool simulates how a colour-blind person may see your designs. This is easy to use but relies on you uploading images of your webpages, which may be time consuming if you want to look at multiple pages.

Link: http://www.etre.com/tools/colourblindsimulator/

A Guide to Website Accessibility ~ Accessibility Tools22.

Colour-blind Web Page Filter

This tool also shows how colour-blind users view your site. It has the advantage over some of the other tools of letting you view your webpages directly without needing to upload them as images.

Link: http://colorfilter.wickline.org/

The Readability Test Tool

Even if your site passes the main accessibility guidelines your copy might be making the site inaccessible to some. The Readability Test Tool takes the text on your web page and gives a score for the most used readability indicators.

Link: http://read-able.com/

As well as using the tools from the previous section you may want to run some tests of your own to get a good idea how accessible your site really is. One recommendation is to install screen reading software on your computer and try to navigate your own website without looking at your screen. This will give you a good idea of how difficult it is to actually use screen readers to navigate websites, and should also provide you with some real motivation to improve the overall accessibility of your site!

You might want to try downloading software like Thunderstorm and then trying to perform some everyday tasks such as reading the news on one of your favourite news sites or sending an email using Gmail. If you want to read about how difficult I found it to use a screen reader then you might want to read a blog post that I wrote about it last year.

Running some user testing sessions with disabled users is also a great way to get their perspective on how accessible your website it. It may be worth talking to local charities or AbilityNet to see how they can help you recruit users with disabilities.

5 User Testing

A Guide to Website Accessibility ~ User Testing23.

A Guide to Website Accessibility ~ User Testing24.

The testers you use should cover a range of disabilities if possible. With 4.5% of people being colour blind and up to 10% of people being dyslexic these are two groups that you should consider for testing and when creating personas.

Just asking disabled users to complete tasks on your website and seeing some of the issues they face can be very eye-opening.

As mentioned at the start of this ebook, accessibility is not just about registered disabled users, it’s also something to consider for temporarily disabled users, older users and those with technical restrictions.

If you’re running usability testing try to include older users where appropriate to get an idea of whether they have any accessibility issues with your site. You may also want to run tests with a slow internet connection, and across a range of old browsers and different devices to really ensure that your site work as intended for all your users.

Case study – Audible App

A good example of designing for temporary accessibility issues is the Audible smartphone app. The people at Audible realised that people often used their app to listen to audio books while driving. Mobile phone use while driving is prevalent despite it being against the law. Studies have also shown that using a mobile while driving may reduce brain activity associated with driving by 37%.

While Audible tried to discourage people using the app while driving they also knew that they had no way of actually stopping people from doing this. They realised that if they couldn’t change people’s behaviour then they needed to find a design solution instead.

A Guide to Website Accessibility ~ User Testing25.

The screenshots below show the old and new designs of the app.

The new design offers a much simpler interface where users can very easily operate the two most important features; playing and pausing the audio player. This has obvious benefits for people who are driving but is also a much simpler and more usable interface for everybody who uses the app.

When listening to audio books people rarely skip parts or jump back to re-listen to previous chapters. As the main controls used are just playing and pausing giving these priority and hiding or minimising the other controls benefits all users.

The next generation of digital technology looks set to include more well-designed mainstream products and services can bring huge benefits to everyone in society. With recent advances in technology such as smartphones and Siri, ‘futuristic’ devices are now a reality, and are a massive help to people with disabilities.

One interesting example of this is the potential of Google Glass for blind people. At the moment development is at a very early stage and the costs involved with Google Glass are prohibitive but in the near future, the device will become more widely available, with blind people being a surprise target audience. Glass can effectively become a pair of eyes for blind people; looking where they are looking and, at the same time, analysing their surroundings.

It’s not just blind people that could benefit from Google Glass. Software has been developed that can identify emotions of the people that you look at. This could be really helpful for people with Asperger’s or autism who can find it extremely difficult to interpret people’s emotions. People with hearing impairments could benefit too with the use of live subtitles.

6 The Future

A Guide to Website Accessibility ~ The Future26.

A Guide to Website Accessibility ~ The Future27.

For many disabled people, having a driving licence has not been possible, but blind people can now apply for licences in Nevada for automated cars. As with its Glass technology, Google is also at the forefront of the development of automated vehicles with its driverless car project making several journeys on public roads.

There are other areas that could be of real benefit to disabled people. Whether it’s 3D printed artificial limbs or a fridge that sends an alert to a carer if it’s not been opened during the day, there are a range of new devices that are slowly becoming available to people.

The way people interact with technology is fast changing too. People have taken to touch screen devices quickly and gesture control, as used by the Xbox Kinect, looks set to become more popular for both able bodied and disabled people. The next stage could be people controlling things with their brains, with a lot of recent breakthroughs happening in this field.

This ebook has been an introduction to accessibility and following some of these tips should help make your website or app more accessible. As Robin Christopherson from Abilitynet said though:

“We’ve seen lots of websites that are strict AA compliant but that

are still very difficult for disabled users. You can check all the

boxes when adhering to the guidelines but there can still be a lot

of issues, mainly UX related ones.”

The key here is to not see accessibility as a box ticking exercise but instead to consider the needs of ALL your users from the initial wireframing of a website or app right through to the user testing phase. Remember accessible websites and apps are generally easier to use for everybody and not just disabled users.

7 Round Up

A Guide to Website Accessibility ~ The Future28.

A Guide to Website Accessibility ~ About29.

About the Author

Luke HayLuke Hay is the UX & Research Director at No Pork Pies. His main focus is on user behaviour, accessibility and how people interact with sites and apps.

About No Pork Pies

We are a digital agency with a focus on intergrating user experience with conversion optimisation.

Our research-led, user-centred process allows us to build an in-depth understanding of your website users and work with you to help you achieve your objectives.

The services we offer include:

• Market Research• User Research• User Testing• Accessibility Audits• Conversion Optimisation• Website Personalisation

Visit www.noporkpies.com for more information about our services or contact us at info@noporkpies.com