How To Design Websites For Blind/Visually Impaired, Deaf & Disabled Visitors

Some notes I collected on ‘Inclusive Design’:

Table of Contents


Accessible Website Design

I’m interested in creating websites that the vast majority of people can access, regardless of challenges. It’s not always easy to create an accessible web design – my own site at the moment falls way too short for me.

Designing Websites For Blind and Visually Impaired Users

People with visual disabilities are individuals who are blind, have low vision, or have colour blindness. People who are blind need text equivalents for the images used on the Web page, because they and their assistive screen reader technology cannot obtain the information from the image. A person who has a visual disability will not find the mouse useful because it requires hand and eye coordination. Instead, this person must navigate the Web page using only the keyboard.

For example, the Tab key is used to move the focus to the item that needs to be selected. A screen reader then announces the item so the user knows where the focus is on the page. The user then presses the Enter key instead of “clicking” the mouse button. Those who have low vision need the assistance of a hardware or software magnifier to enlarge the text beyond simple font enlargement. People who are colour blind or who have low vision benefit from good contrasting colours.

When information is presented by colour alone, a person who is colour blind misses that information. Similarly, if information is presented using any attribute by itself (for example, contrast, depth, size, location, or font), a user who has low vision might not detect the difference.

Magnification might reformat the location, change the contrast, or distort the size and fonts of the text and objects on the Web page. It is best to use multiple attributes. For example, if both colour and a fill pattern are used on different bars on a graph, they can be viewed in either colour or black and white. Instead of using size attributes on the font element to denote a heading, the heading element should be used to correctly mark up a heading so that assistive technology can identify headings.

With the help of synthesised speech and Braille display technology, even completely blind people can use the Web. RNIB

The access needs of blind or visually impaired people can be as variable as the number of blind or visually impaired people visiting your website.

Flexibility therefore is the key to ensuring that your website is accessible to everyone. Those with some vision may need to be able to enlarge text (or make it very small), or change the contrast or colours on the web page. Others will have software installed on their computers to enable them to ‘hear’ web pages via synthesised speech, or to read the web page by using a Braille display. You must ensure that the design of your web pages does not make it difficult for a blind or visually impaired person to be able to customise the page for his/her own needs.

Designing a website to be accessible to a blind or visually impaired person – or indeed for anyone – can be a complex subject. The following general principles apply to designing for blind or visually impaired users, but are just as relevant to all groups:

  1. Provide text equivalents for all non-text objects on the page – speech synthesisers can’t read graphics, and graphic text can’t be enlarged in the same way as ordinary text.
  2. All graphics should have text labels, i.e. alternative attributes in HTML (Hyper Text Mark-up Language).
  3. Don’t design the page in a way that stops the user from setting their own browser preferences, i.e. don’t specify exact sizes for fonts or layouts – design everything in relative sizes.
  4. Use descriptive Titles for every page.
  5. Use valid HTML – many access programs depend on the use of standard HTML – e.g. some software can give an overview of the page by extracting all the headers and links and presenting them on a single page. If you have no headers on your page and all your links say ‘click here’ then the accessibility of your website will be very low.

There is very useful, more detailed information about designing for blind or visually impaired users at and you can get a free home eye test on this site, and some other information too.

Avoid Text Only Websites

‘The RNIB encourages the design of websites that practice ‘universal design’ or ‘design for all’. That is, a single version of the website which is accessible to everyone, no matter how they access the Web. This is made possible by the extensive accessibility features designed into HTML 4. The W3C recommend a text only page only as a last resort.‘ RNIB

In most circumstances there is no need to create a separate text-only version of a website.

Unless database content management is being used, the creation of an additional text-only version simply doubles the work involved in updating or amending the site, and often leads to an increasingly useless version of the site, with time constraints resulting in the graphic version being updated regularly while the text-only version is neglected and becomes more and more out of date. The creation of a text-only version should be seen only as a final option when all other alternatives for making the site accessible have been exhausted.

Accessible pages needn’t be bland! They can be well designed, attractive and interactive, while at the same time providing access for everyone.

Separate design from content using HTML & CSS and you effectively build a text only website, but when attached to your tailored style sheet, becomes an attractively designed website page.

UK Government recommendations:

Alternative text-only pages should rarely be necessary and are not best practice. If text-only pages are used it is essential that their content is as complete and comprehensive as graphic content and is updated simultaneously with graphic content.

Guidelines for UK Government websites
Illustrated handbook for Web management teams

(RNIB) Royal National Institute For The Blind

The Royal National Institute for the Blind (RNIB) are at the forefront of promoting accessible website design, and you have to acknowledge the achievements of the organisation.

The RNIB says that people with disabilities may use a variety of access technologies in order to read your web pages. The problem is that these technologies will only work if websites support them. The way that websites are designed and built may be closing some of the doors that they should be opening.

Responsible business practice

The RNIB has stated that In today’s environment corporate and social responsibility have increasingly become fundamental in building trust and reputation with the people you do business with. However, experience of closed doors on your websites can have a negative influence on the way people perceive even the most reliable companies and the strongest brands.

The RNIB says that if information is worth publishing on the web, it is worth ensuring that everyone can access it.

The RNIB says that, fundamentally, the tools and the technology of the web all support accessibility; it is therefore the responsibility of managers, designers and ultimately the page author, to apply the techniques that allow web pages to be accessed.

The RNIB has also stated the web has opened up many doors and possibilities for everyone, but this is especially true for people with disabilities. Due to increasing availability and widespread use of access technology, people now enjoy a level of empowerment and independence that previous generations never experienced before.

RNIB See It Right Web Accessibility Review Audit

The RNIB operate the ‘See it Right’ programme, which you can employ to test the accessibility of your website.

The RNIB See it Right accessible website checkpoints are taken from the WAI guidelines. We build websites using the same guidelines but we do aim to build the sites to a higher compliance with the guidelines than the RNIB.

See it Right checkpoints set a standard of accessibility exceeding WAI single ‘A’ and close to WAI ‘AA’. We at Hobo aim to build build all our website templates to ‘AAA’.

As well as requiring compliance with WAI priority one checkpoints, the requirements for gaining the RNIB Accessible Website logo incorporate a range of priority two and three checkpoints which have particular relevance to users with sight problems.

‘The See it Right checkpoints have been selected because they are realistic, achievable and have the highest impact on the accessibility of a website.’

Unfortunately, the RNIB See It Right costs hundreds of pounds to purchase for your business, and you need to pay every year to keep the ‘award’. This prohibitive cost is often a block to small business website owners.

If you are employed by a larger, nationwide organisation, then it may be advisable that you check out the offer.

RNIB Campaign For Good Website Design

The RNIB operate the Campaign For Good Website Design in attempt to raise the profile of accessible website design for all.

Hobo website developers are supporters of the campaign, and we recommends that if you’re serious about website design you should support the RNIB Campaign For Good Website Design and join up.

When you join you get regular emails about website accessibility news.

Join up at the RNIB website.

Designing Websites For Deaf / Hard Of Hearing Visitors

Although it may not be immediately obvious how a predominantly visual medium like the web can be inaccessible to people who are deaf or hard of hearing the following points are worth noting.

Many deaf or hard of hearing people – particularly if they are sign-language users – do not have highly developed reading skills. Sign language is a different language from standard written English. Some people who use sign language therefore have a limited reading vocabulary. The use of simple, clear language will help to ensure that deaf or hard of hearing people can access the information on your web pages.

Closed Captioning

If you use audio or video provide text-based transcripts and closed captioning. Closed captioning on the web when not directly embedded within the video consists of a link to a ‘script’ of the video – the link to the script should be located close to the video clip.

Guidelines for implementing captioning for video can be found at in an article by Mike Paciello. For more detailed information about web accessibility for deaf people, see

Designing Websites For Mobility or Physically Impaired People

People with mobility disabilities have physical impairments that substantially limit movement and fine motor controls, such as lifting, walking, and typing. Mobility impaired individuals experience difficulties in using the computer’s input devices and in handling storage media. Solutions for persons with mobility disabilities include switches, latches, and controls that are easy to manipulate, and diskettes and media that are easy to insert and remove.

Additional solutions include alternate input capabilities, such as voice input or the ability to enter information at the user’s own pace. For example, sequences of keystrokes can be typed, one at a time, rather than simultaneously as in Ctrl+Alt+Del. Many of these needs are supported by assistive technology, operating systems, and hardware platforms. Furthermore, making the Web site accessible will make it more compatible with voice input and control technologies.

Things To Remember

For people who have difficulty using their hands or whose hand/eye co-ordination is restricted, the following guidelines can improve access.

  • Provision of buttons rather than text for navigation to provide a larger ‘target’ for links. Having said that – if you design your web pages so that the text can be resized easily there should be no need to use graphics so that you can provide a larger target.
  • Clear consistent layouts and navigation.
  • Don’t think everybody uses a mouse

Remember to consider the physical access to the computer itself. If a website is being designed for use in a public kiosk, the kiosk should be accessible to wheelchair users.

How To Design A Website For People With Learning Disabilities

There are of course marked differences in cognitive skills between individuals with learning difficulties and it would be virtually impossible to design a website to meet all requirements – however here are some general rules worth applying when creating websites for this demographic.

Design simple uniform screen layouts (with the option of only viewing one thing at a time), keep jargon to a minimum and use plain language and avoid pages overloaded with too many distractions (like flashing graphics) or too many choices (like a large cumbersome navigation system).

For the same reason avoid long lists of links unless they are arranged in logical groups of no more than five or six links each.

The combination of auditory information, pictures, and text helps to reinforce navigation and actions for those who have a short attention span or are easily distracted.

This will also be useful for those who cannot read (over 80 per cent) or are surfing the web with assistance. Auditory information should be clear, simple and repeatable.

Other suggestions include:

  • Provide a plain language description of the site
  • Include a simple way and obvious way to return to your home page
  • Avoid animated graphics – if they change too quickly their use can lead to cognitive overload
  • Simplify sequences – limit choice and number of steps

Web Accessibility Checks, Tests, Tools + Resources

We’re currently re-evaluating all the sites with our name on it including this one – perhaps you might want to test your site?

Valid HTML and Valid CSS is the first step to ensuring an accessible website.

  1. Validate Your HTML to W3C recommendations
  2. Validate Your CSS to W3C levels
  3. ATRC – Find out if your page is WCAG 2.0 Level2 ‘compliant’ – this is the grade (or level of compliance) that the UK Government now recommend – Hobo Web
  4. WAVE – Test your website compatibility issues with WCAG 1.0 and section 508
  5. TAW – Checks website pages for conflicts with WCAG 1.0.
  6. CynthiaSays – I use this and it’s my favourite, but to be honest, I think the reports, though extremely detailed are difficult for the novice web designer
  7. HERA – Highlights WCAG 1.0 compatibility issues
  8. CSS Analyser – Color contrast test to make sure your sites CSS colour scheme meets WCAG 1.0 requirements
  9. Readability Check – Analyzes the language on your website to Flesch Reading Ease and Flesch-Kincaid!
  10. Check how your site looks on multiple browsers.

Other Reading

If you want to procure, or design and build sites with accessibility in mind in the UK, you’ll find the following documents useful:

Of course, the best way to get the accessibility of your site evaluated is by getting a focus group organised to test the accessibility and usability of your site, but the reality is not many go to these lengths. Note too, Automatic tests like the ones listed have many limitations.

NB – No web design company can build you a website that complies with the UK DDA, so ignore the snakeoil sellers. You do have a responsibility to make your website accessible under the DDA, though. Hey, it’s complicated and often confusing so make sure you think about accessibility at the start of your web design project.

“You now have a legal obligation – following the implementation of section 21 of the Disability Discrimination Act – to make reasonable adjustments to ensure blind and partially sighted people can access your service. RNIB, 2005

Ask your website design company if they will ensure your site is built to good standards, and make any changes if you are approached about accessibility issues with your site, because that is when you can actually be sued under breach of the UK DDA, which might not be ideal publicity for your business.

We have a sort of idiots guide to accessible web design on the site if you want to learn more – if you have any comments about this site or have difficulty accessing any information please let us know and we will have a look see what we can do to improve things. Keep an eye out for the new BS 8878, too.

  • Share on Google Plus
  • Share on Linkedin

Get Your Free Ebook

Hobo UK SEO A Beginner's Guide V3 2015: by Shaun Anderson

Join over 20,000 fans of our newsletter and download your FREE training guide.

Privacy Policy