Find The Best Website Builder!

Home » Blog » The Complete Guide to Making Your Website Accessible to Disabled Users

The Complete Guide to Making Your Website Accessible to Disabled Users

 May 28, 2013  Published by Guest Author  4 Comments  Review, Tips & Tricks

As the web evolves, the software we use to access information becomes more sophisticated. With the evolution of web browsers, smartphones and tablets come powerful tools that make the web available to anyone.

But software can only get us halfway towards the goal of a fully open, accessible web. In order to ensure disabled users enjoy a complete experience, free from barriers, website designers must place accessibility at the core of their website design.

In this guide, we’ll take a look at the benefits of making website accessible, both for the disabled user and the business owner. At the end, we’ll review four popular DIY website builders and check whether you can achieve a good level of accessibility without any technical knowledge.

Why Does Accessibility Matter?

In 2011, the UK Office of National Statistics estimated that 4.25 million disabled people in the UK have never used the internet: that’s more than one-third of all of the disabled adults in the country. To put this into context, the figure across the population as a whole is closer to one-tenth.

Clearly, disabled people don’t find it easy to access the internet or find the information they need. Perhaps some disabled people have never tried, or have given up because they found it frustrating.

Reasons to Adapt Your Site

Accessible websites clearly enable a broader section of society to access the internet and find information. If you’re interested in ensuring that knowledge is shared equally among people of all backgrounds, you could argue that accessibility is a moral obligation – something we should all just do.

However, this argument wouldn’t necessarily convince a small business to make their web content accessible. Some entrepreneurs may feel that accessibility doesn’t apply to them because their products are not relevant to the disabled. They might argue that their budget is too limited to take accessibility into account.

Skipping accessible design is actually a poor commercial decision: not only is an accessible site more open to the disabled, it’s actually more likely to be compelling and easy to navigate for the able bodied visitor, too. Accessibility aids all kinds of people you may not have considered: people who don’t speak your language well, or elderly people, for example. In addition, ensuring your website is properly structured with the correct tags really helps with SEO (search engine optimisation); in fact, machine readability is equally important to search engines as it is to the disabled.

Legal Issues

Some organisations are compelled to create accessible content by law. Like all legal matters, accessibility is extremely complex, so this article isn’t intended to replace legal advice. But there are some key pieces of legislation to be aware of if you’re in the US and UK, so we’ll look at them briefly.

• In the US, laws compel some businesses and educational establishments to ensure equal accessibility for all. The American Foundation for the Blind website describes the relevant sections of the Rehabilitation Act. Sections 504 and 508 are important.
• In the UK, the Disability Discrimination Act covers web accessibility for blind and disabled users, and it compels some business owners to ensure their websites can be used by everyone. This excellent article on WebCredible describes the Act in simple, practical language.

Our summary is not a complete and exhaustive list of accessibility law; always seek guidance if you’re unsure. The law doesn’t apply to everyone, but as the web evolves, it’s logical to assume that more of us will need to take accessibility into account.

Catering for Different Disabilities

Having read the information above, you might decide you want to make your website accessible. There are various factors to consider before you get started. Remember: accessibility should open up your content to people who are elderly or infirm, as well as those who speak a different language or have mental impairments. There’s a lot to think about.

At the bare minimum, you should consider the following challenges that your users face.

Vision Problems

Accessibility on the web means designing for people who are blind or partially sighted. People who are colourblind also fall into this category. Vision problems cause a range of issues, so this section is a good one to start with.

Text content is generally accessible with the use of a screen reader or braille peripheral, but if a web page is crammed with images, screen readers generally can’t cope. The font, colour scheme and layout all contribute, too.

Here’s how to take action:

• Anything that isn’t text-based (images, videos) needs to be described in words using the appropriate tags and markup. The ALT text (alternative text for images) you use should be meaningful without being overly verbose.
• If you use video, it should be accompanied by an accurate transcript (not just a machine-generated transcript; these are often wildly inaccurate). If you use YouTube to host your videos it’s easy to add captions using amara.org.
• The markup on the page should flow logically so that it can be interpreted correctly as it is read aloud or converted into braille. Your heading should be labelled H1, with subheadings H2, H3 and so on. Don’t break convention.
• The colour of your font should contrast with the page background so that it’s easy to read. Avoid using a pale shade of pink with red text, for example.

Navigation Problems

Using a mouse, trackball or trackpad requires a certain amount of dexterity. Not all users can use pointing devices accurately. Many find it more convenient to navigate in other ways: clicking devices are common, and some users simply use a keyboard, but there are a range of different ways for people to move around a page.
With the advent of tablets and touchscreens, it pays to revisit your navigation and ensure it works as intended.

• Each page should have clear headings, tagged with the right HTML tags, to help the user move around a page without necessarily clicking.
• The page structure should stay roughly the same from section to section to help the user familiarise themselves.
• Designers should consider eye tracking technology and touchscreens, ensuring there is open space between navigational elements and links.
• Hyperlinks should be paired with descriptive anchor text, rather than generic phrases like ‘click here’ or ‘read more’.

Other Issues

Always use good quality content on your website. Ensure it’s written in clear, understandable sentences. If you use unusual terms, or words specific to your industry, it’s a good idea to define them. Again, this helps both able bodied and disabled users.

Most websites use scripts and interactive elements. Even something simple like an email form should be thoroughly tested. Make sure fields are labelled and error messages make sense. Check you’ve labelled your buttons properly, too. Instead of ‘submit’, you may wish to rename the button to ‘send this email now’.

Common Misconceptions

Just because someone can’t see your web page, it doesn’t mean they need a verbose description of everything. One or two words about an image is enough, unless the image is a graph or chart full of data.

Also, don’t use keyboard shortcuts. They used to be fashionable, and they sounds like a great idea for accessibility, but they can activate settings and open menus in the user’s browser.

How to Test Your Website

Testing an accessible website is very straightforward, and it’s usually free.

Screen Readers

The best way to test your content and structure is to have a screen reader read the pages out to you. You’ll still have a slightly skewed opinion of the results, given that you’ve seen what the page looks like already, but the way it’s interpreted may still surprise you.

There’s a list of screen readers on Wikipedia. We like ChromeVox and Fire Vox since they can be quickly added to your browser, but there are plenty of others to choose from. If you don’t have time to listen to the page, try the Fangs extension: it shows you a plain text version.

Toolbars

For testing as you code, a toolbar is a great way to quickly check you’re working to the correct guidelines. Again, there are plenty of options, including the Accessibility Evaluation Toolbar for Firefox and the Web Accessibility Toolbar for the Opera browser.

Web-Based Checkers

Quickly evaluate your entire site with a web-based accessibility checker like the web accessibility evaluation tool, or WAVE. It highlights structural problems, and it can even detect potential issues with contrast. If you’ve never bothered to check your site’s accessibility, WAVE makes it very quick and simple to get a basic idea of what you need to work on.

Desktop Tools

Although less common, desktop tools still have their place. One very clever Windows application is EveryEye, a simple programme that shows you what your website looks like to someone with a visual impairment, an elderly person or someone who is colourblind.

Do DIY Website Builders Aid Accessibility?

We regularly review the quality of website builders for beginners. This time, we wanted to know whether it it’s possible to create accessible websites with them. Here are our results:

Criterion	Weebly	Jimdo	Squarespace	Wix
Contrast and Colours adjustable	yes	yes	yes	yes
Resizeable text (via CTRL +)	yes	yes	yes	yes
Responsive design	yes	only smartphone-friendly	yes	only smartphone-friendly
Headline structure (H1, H2 etc.)	yes	yes	yes	no
Alt-Text for images	yes	yes	yes (info)	yes
Form labels	cryptic	no	understandable	no
Keyboard accessibility	yes	yes	yes	yes
Site map	no (only xml format)	yes	no (only xml format)	no (only xml format)
Transcripts for video and audio	internal player: no, via YouTube: yes	via YouTube	via YouTube	via YouTube
Descriptive links	yes	yes	yes	yes
Further information	Full review	Full review	Full review	Full review

Reviewer’s comments:

Resizable text: users can press the CTRL key and the + key together to enlarge the font size
Responsive design: the website adapts dynamically to different devices (PC, tablet, smartphone)
Keyboard accessibility: we checked whether it is possible to navigate with the TAB and RETURN keys.
Site map: most website builders use the xml format, which is cryptic and not easily understandable.
Transcripts for video and audio: Weebly is the only site builder that has its own video and audio player. Captions can be added externally via YouTube.

Conclusion

Accessibility is a key aspect of good web design as it benefits both disabled and able-bodied users. Fortunately, current web design trends encourage large fonts and responsive layouts that adapt themselves to all different kinds of output devices (laptops, tablet computers, smartphones and even TVs). The same goes for Flash-based websites; thanks to the advent of the HTML5 markup language the extremely inaccessible Flash format is slowly disappearing.

Even with simple tools like DIY website creators, it’s possible to build an accessible website. As you can see in our table, there are still certain limitations that will prevent perfect access for handicapped users. If you need to achieve the best possible accessibility we recommend that you use one of the major content management systems (CMS), since they offer more flexibility.

As you might have realised, parts of our own website could also be improved. Researching this article has made us more aware of this issue and we are going to factor these findings into our upcoming redesign.

If you have any questions or feedback, please share them in the comment section!

Article written by: Claire Broadley of Red Robot