WEBSITE DESIGN GUIDE - ENSURING YOUR WEBSITE IS ACCESSIBLE TO ALL VISITORS

Consider the frustrations and difficulties that your disabled visitors face when they browse the internet, and make design changes and improvement to give them as positive an experience as possible.

CONTENTS

 

1. INTRODUCTION

 

Return to contents

The topic of accessibility is incredibly broad and complex, and we could spend a long time covering it. It is an area of much importance to a significant number of your visitors and, although not a particularly new concept, it is finally getting the wide-spread consideration it deserves. As with many of the topics we’ve covered so far, guidelines and best practices are always evolving, but having a firm understanding of a few fundamentals can get you a long way. 

Unfortunately, many accessibility guidelines require a technical know-how in order to implement them. You might therefore decide, having read this guide, that you need to invest more time and, potentially, money in this area. This could be because you think accessibility is particularly important to your site (due to the demographic of your visitor base), or because you think your site is seriously failing in its duty to provide an accessible experience. If that is the case then you'll find a lot of support and guidance online and expert help is always available. 

For now, we're going to focus on some of the most frequently asked questions about accessibility. We’ll cover what it means, why you need to pay attention to it, and what to do next.

 

2. WHAT DOES 'ACCESSIBILITY' MEAN?

Return to contents

‘Accessibility’ is the concept that everyone should be able to use the internet, regardless of who they are or the tools and devices they use to get online.

When most designers talk about ‘accessibility’ they are predominantly considering people who have a disability that makes it hard for them to use websites, but strictly speaking accessibility also covers mobile design and browser compatibility. This guide will focus on helping those with disabilities to enjoy your site, and the next guide will look at mobile and browser compatibility advice.

 

3. WHY SHOULD I BE THINKING ABOUT 'ACCESSIBILITY'?

Return to contents

Census data from the United States suggests that 19% of its population has some form of officially recognised disability. Of course, not all of that population will have a disability that affects their ability to use the internet, but if even half of them did then that means 1 in 10 people in the US are impacted. That's a huge number, and is likely consistent with what we’d expect to see in other countries.

Not being able to service this group immediately reduces your potential visitor base, so ensuring your site is accessible is a sensible thing to do from a business perspective. Even if it weren't, there are other reasons why you should be doing something about it:

  • You have a moral obligation. Free use of the internet, and access to information and services, should be something everyone enjoys but something that many of us take for granted. Sadly, some groups will never have the same online experience as others, but you should take steps to improve it as much as you reasonably can for all of your visitors.

  • You might have a legal obligation. This varies from country to country, so it's best to do some research to understand what is expected of your site.

  • There are SEO benefits. If your site offers a poor experience that makes certain visitors quickly leave your site then your search ranking will be impacted. If that group aren’t leaving you positive ratings and not sharing links to your site, that also has an impact.

  • It will benefit your mobile optimisation efforts. Many of the tenants of good accessible design are also applicable to good mobile design. Working on one will likely be of benefit to the other.

 

4. HOW DOES DISABILITY AFFECT PEOPLE'S ABILITY TO USE THE INTERNET?

Return to contents

Of course this depends on the disability but to cover just a few common ones:

  • Visual impairment. People with blindness or partial blindness can't read or view your content themselves. People with colourblindness will not see your site, its colours and its images, in the same way as intended, which might impact on how easy it is to navigate or consume your content.

  • Hearing difficulties. For many sites this won't be an issue, but if you use video or audio then this group will struggle to engage without further support.

  • Motor skill impairment. Some people struggle to use a mouse and keyboard. This makes navigating websites, or filling in forms, a lot more challenging for them.

  • Impaired cognitive ability. Some groups struggle reading or processing information. This group will, by extension, struggle with sites that are heavily dependent on the written content or that have to communicate complex ideas or product benefits. Other people might also struggle to stay focussed throughout complex tasks (such as filling in address information or credit card details).

 

This list is by no means exhaustive but gives an idea of the challenges that some groups face. These groups can improve their experience using certain tools (such as screen readers, speech recognition software or alternative keyboards), but rely on the website they are visiting to be set up in a way that enables these tools to work, reducing the barriers they have to overcome.

 

5. WHAT ARE THE OFFICIAL ACCESSIBILITY GUIDELINES?

Return to contents

At time of writing, there are no universally accepted accessibility guidelines. The body that is largely accepted as the central authority in this area is W3C (World Wide Web Consortium) who champion an ongoing web accessibility initiative (WAI). 

It is well worth a visit to their website, as it has lots of valuable support materials and resources to help you better understand accessibility and put key guidelines into practice.

 

6. WHEN SHOULD I START THINKING ABOUT ACCESSIBILITY?

Return to contents

Ideally, you should think about accessibility from the very start of your site’s development. Doing so will help you avoid wasting time correcting accessibility issues further down the road. However, if you already have a site up and running then, of course, it’s never too late to start.

 

7. HOW CAN I ASSESS HOW ACCESSIBLE MY SITE IS?

Return to contents

There are loads of great tools to check your website’s accessibility performance - with many of them free. Simply search for ‘accessibility checker’ online and you will quickly find lots of options.

Beyond this, you can do some manual tests on your site, putting yourself in the shoes of certain visitor groups who might be struggling. For example you can:

  • Look at your site in higher zoom levels as this is how many with visual impairment will be using your site. Does it still look cohesive and navigable when zoomed in? Does any text overlap or look out of place?

  • Download a screen reader and see how it handles your website. These work by converting text to speech - literally reading out the content on your website. Do they read it out in a logical order? Having listened to your website being read out, do you think it would give a visitor a good sense of what your site is about?

  • Try getting around your site without using a mouse. Some visitors with motor skill impairment, or other physical disabilities, askew the mouse in favour of keyboard navigation. They typically use the tab key to jump around the site and hit enter to select links. Try it for yourself. Of course, this won’t be as easy as you’re used to, but you might quickly appreciate where improvements need to be made.

 

8. WHAT CHANGES CAN I MAKE TO MY WEBSITE'S ACCESSIBILITY?

Return to contents

This list is by no means exhaustive but will give you some idea of the kinds of steps you can take. I’ve intentionally kept it detail light (as some of it requires a technical solution to implement), but you will be able to quickly find more information through a simple web search:

  • Ensure alt text is in place for all of your images. This is a property you can set for your image files that offers a text description of what they contain. Screen readers then use this alt text to communicate what the image is to the visitor.

  • Ensure you have a logical ‘tab order’ on your site. As mentioned earlier, some visitors navigate your site using the tab button. When they press tab, their screen will jump to allow the next user control on the page to be selected. The user control that will be jumped to is defined by the tab order, and should ideally be the nearest control to the one currently selected, or the one next down in the list. You’ll want to pay particular interest to how this applies to your main navigation bar and that the tab order flows from left to right across it (or top to bottom down it).

  • Label all of the fields in your forms. There is a temptation to rely on placeholder text (temporary text within the text field) to communicate what the field is, but this can be hard for visitors to see, and once it has disappeared it can be easily forgotten. Ensure you provide a text description (eg ‘First name’) above or to the left of all of your fields.

  • Give your site a clear header hierarchy. This means only having one main header (in technical terms signified by the HTML <h1>), then sub-headers (<h2>) and lower level headers (<h3> onwards). This is important for assistive tools to understand the layout of your page and ensure it is processed in the correct order.

  • Limit your use of tables to tabulated data (rather than as a layout tool). Screen readers struggle to process tables, so if you can display information in a different way then that’s worth considering.

  • Ensure you subtitle any video content and provide transcripts for audio content.

  • Keep your content simple and easy to understand for all audiences. Avoid using too many words and maintain a clear, spacious layout. Beyond improving your site’s accessibility, this is generally good content and site design.

  • Be careful with your choice of colours. Use colours that offer a strong contrast to each other and always ensure that text is clearly visible against anything it is laid on.

So how do I start?

Essentially; just get stuck in! Check your website for accessibility issues, fix the ones you can and then re-check. Seek feedback from your visitors if possible. Keep learning about accessibility and keep making small incremental improvements. Consider accessibility each time you add new content.

If you’re really struggling in this area then seek support. Look to your website builder, to support forums or to third-party help sites. If needs be, professional designers will be able to help which could be worth considering if you think that the accessibility of your website will be closely linked to its success.

 

9. CHECKLIST

Return to contents

  1. Consider how important website accessibility is likely to be to your site’s visitor base.

  2. Check for any legal requirements for accessibility in the country your site operates in.

  3. Test your site’s accessibility performance through the use of online checking tools and manual tests.

  4. Check your website builder’s support site for accessibility help.

  5. Get into a test-fix-test loop - focussing on small, regular, incremental improvements.

  6. Seek feedback from your visitors on your accessibility performance.

  7. Ensure alt text is in place for all of your images.

  8. Ensure you have a sensible tab order on your site. 

  9. Label all of the fields in your forms rather than just relying on placeholder text.

  10. Give your site a clear header hierarchy with only one main header and a number of clearly ordered sub-headers.

  11. Limit your use of tables to tabulated data.

  12. Ensure you subtitle any video content and provide transcripts for audio content.

  13. Keep your content simple and easy to understand for all audiences. 

  14. Avoid using too many words and maintain a clear, spacious layout. 

  15. Pick a colour palette that provides a strong contrast between colours.

  16. Pick a text colour that clearly contrasts with the background it is placed against.

Found this content valuable?

Want to get in touch?

Contact us by email or Twitter.