Design Websites For Blind/Visually Impaired, Deaf & Disabled Visitors
LAST UPDATED: APRIL 3RD, 2015
Some notes I collected on ‘Inclusive Design’
I’m interested in creating websites that the vast majority of people can access, regardless of challenges. It’s not always easy – my own site at the moment falls way too short for me.
——————————
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:
- 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.
- All graphics should have text labels, i.e. alternative attributes in HTML (Hyper Text Mark-up Language).
- 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.
- Use descriptive Titles for every page.
- 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 www.rnib.org.uk/digital/hints.htm 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
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 www.samazdat.com/pac2.html in an article by Mike Paciello. For more detailed information about web accessibility for deaf people, see www.weizmann.ac.il/deaf-info/cc.
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.
- Validate Your HTML to W3C recommendations
- Validate Your CSS to W3C levels
- 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
- WAVE – Test your website compatibility issues with WCAG 1.0 and section 508
- TAW – Checks website pages for conflicts with WCAG 1.0.
- 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
- HERA – Highlights WCAG 1.0 compatibility issues
- CSS Analyser – Color contrast test to make sure your sites CSS color scheme meets WCAG 1.0 requirements
- Readability Check – Analyzes the language on your website to Flesch Reading Ease and Flesch-Kincaid!
- 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.
BOBBY/Watchfire (Web Accessibility Tools)
Bobby is a comprehensive web accessibility software tool designed to help expose and repair obvious barriers to accessibility and encourage compliance with existing accessibility guidelines.
Bobby tests for compliance with government standards, including the U.S. Government’s Section 508. It offers prioritized suggestions based on the Web Content Accessibility Guidelines provided by the World Wide Web Consortium’s (W3C) Web Access Initiative. Bobby allows developers to test web pages and generate summary reports highlighting critical accessibility issues before posting content to live servers.
Bobby tests web pages using the guidelines established by the World Wide Web Consortium’s (W3C) Web Access Initiative (WAI), as well as Section 508 guidelines from the Architectural and Transportation Barriers Compliance Board (Access Board) of the U.S. Federal Government.
Watchfire recently purchased the Bobby Website Accessibility Tool and have their own fantastic website accessibility tool you can access via Accessibility101.
It must always be remembered that the W3C WAI is not a standard but a set of guidelines. There is no automatic way in which an organisation can get its website validated against all the guidelines.
A page can be compared against the guidelines to raise a Web manager’s awareness of certain issues. The leading tool is The Center for Applied Special Technology’s (CAST) Bobby software.
Individual pages can be run through the Bobby service by visiting the site and typing the page URL into a specific box. The service will scan the page and then return an automated report highlighting areas of concern and suggesting what could be done to rectify them.
It must be noted that this application has a number of limitations:
- It will highlight areas that need to be looked at, but will not correct them
- It also suggests using attributes that are not supported by any web browser at
present. - It does not validate a web page. This should be done using the W3C
validator. - A Bobby approved certification does not necessarily mean it is usable by all.
‘Bobby Approved’ does not mean your website is accessible
Bobby is a very useful tool but it is all too often misunderstood. Many organisations however, falsely believe that simply passing the Bobby test will satisfy their accessibility obligations. For them, the measure of accessibility is whether or not their pages can attain the Bobby Approved icon. In many ways, this is an understandable perspective. The Bobby icon represents an achievable standard and a tangible, cost effective reward for efforts made towards web accessibility.
It should be remembered that the Bobby test does not ensure ‘real’ accessibility. Firstly, “Bobby Approved” is based on passing the Priority 1 checkpoints alone. Many now believe that if a site is to be truly accessible it should pass the Priority 2 checkpoints also. Indeed, if we are to look at initiatives at European Union level we should expect Priority 2 compliance to be the benchmark going forward. Bobby tests for these Priority 2 checkpoints but compliance is not part of getting the icon. Secondly, Bobby cannot even warrant that a site has passed all of the WAI Priority 1 checkpoints it has evaluated as Bobby is only one interpretation of the WAI checkpoints.
Indeed, in the absence of a complaint, CAST does not actively regulate the use of the icon. There seems to be abuse in some instances and sites have been observed to display the icon even though they are not compliant. This usually occurs where the test’s subjective Priority 1 ‘user checks’ have not been addressed, where only the homepage on a site has been tested or where new content is not assessed for accessibility when added.
UK Government recommendations:
‘The reports can look extremely daunting at first because of their length and quantity of detail but it is (BOBBY) a service worth persevering with.’
Guidelines for UK Government websites
Illustrated handbook for Web management teams
Illustrated handbook for Web management teams
Watchfire
This was a great accessibility tool for web designers
Founded in 1996, Watchfire provides organizations with comprehensive website management solutions that enable decision-makers to gain competitive advantage.
Watchfire’s analysis of business-critical content enables e-businesses to identify key issues that affect user experience, online risk, and e-business operational costs. Watchfire’s solutions contribute to the effective management of e-businesses for profitability.
More than 50 percent of the Fortune 500 rely on Watchfire to optimize their e-business success. Customers include Compaq Computer, Lockheed Martin, First Union Bank, Nickelodeon Online and AT&T. Watchfire’s partners include PricewaterhouseCoopers, Inktomi, Interwoven, Vignette and CustomerCentric Solutions. The company maintains dual North American headquarters in Ottawa, Canada and Lexington, Mass. Further information on Watchfire can be found online at www.watchfire.com.
Watchfire recently purchased the Bobby Website Accessibility Tool.
No comments:
Post a Comment