Understanding Disabilities when Designing a Website

In: Articles

By Leona Tomlinson

Published on September 16, 2008

With 75%¹ of the US population and 65%² of the UK population having internet access at home, it is imperative that websites are designed to be both accessible and usable. The WCAG Guidelines, introduced in 1999, go some way to helping web developers create accessible websites—but …we must look further than the guidelines if we are to create websites which are accessible to users with disabilities and the assistive technologies they rely on.

In the UK	In the US
2m people have a vision impairment3	10m people have a vision impairment4
8.2m people have mild to moderate deafness5, 688,000 people have severe to profound deafness6	28m people have a hearing impairment7
3.4m people have a physical disability8	8m people have a physical disability9
1.5m people have a learning disability10	6.8m people have a learning disability11
6m people have dyslexia12	25m people have dyslexia13

This article will explain some simple techniques which, if incorporated into the design of a website, will enhance its accessibility and usability for people who have a vision, hearing, physical, cognitive, or learning disability.

And remember—techniques incorporated for users with disabilities can help make a website easier to use for everyone!

Vision Impairment—Blind

Most people who are blind will rely on screen reading software such as JAWS or Windows-Eyes to read the pages of the website to them. Additionally, some users may access the website via a refreshable Braille device which converts the text on the website into Braille. However, Braille users are less common—most people who are blind have become so throughout their lifetime rather than being born blind, and therefore have not learned to read Braille.

The key principles for accessible and usable design when considering blind screen reader users are:

Place form instructions before the form field

As screen reading software reads content in a linear format, it is important to provide useful information about the requirements of a form field before the field itself. If useful information is provided after the form field, blind screen reader users would only encounter the specified criteria after they have filled in the form field.

Figure 1—Instructions after the form field

Another instance where this issue normally occurs is when the ‘required field’ asterisk is placed after the form field, as shown in figure 2. Again, blind screen reader users would not know that the field is mandatory until they move to the next field in the form.

Figure 2—Required field asterisk placed after the form field

To improve accessibility and usability for screen reader users, form field requirements must be placed before the form field itself. If the user must enter data into the form field, then the asterisk should be placed within the form label, as shown in figure 3. To further enhance the accessibility and usability of the form, it is helpful to place a key before the form to make users aware that the asterisk indicates a mandatory field.

Figure 3—Instructions and required field asterisk before form field

Provide a ‘skip to main content’ link

Screen reader users benefit from a ‘skip to main content’ link as it enables them to jump over lengthy navigation to the main content of the web page, reducing the amount of content they have to listen to. Additionally, if there are widely used areas of the website, such as the search functionality, screen reader users would also benefit from skip links to these areas, as shown in figure 4.

Figure 4—Useful skip links

Ensure link text is descriptive

Screen reader users using software such as JAWS can listen to the links on a web page through functionality known as a links list. If link text is not descriptive—solely using phrases such as “click here” or “more information”, for example—there is no way for screen reader users to determine where the link will take them. Figure 5 shows an example of the links list functionality.

Figure 5—Links List in JAWS

Because of this functionality, it is recommended that the link text define the destination content. For example, instead of “Click here to find out more about Agoo IT”, it would be more appropriate to include the entire content as the link: “Find out more information about Agoo IT”. As “click” is mouse-dependent terminology it has been removed from the second example.

Provide descriptive web page titles

The first piece of information a screen reader user will listen to when they open a web page is the <title> assigned to the page. It is important, therefore, to use a title which reflects the content of the web page. For example, a page detailing contact information might have the title: “Contact Us”. Screen reader users will be able to clearly identify, from listening to the title of the page, whether they have arrived at the correct page and want to listen to the content.

Use succinct alternative text

Blind screen reader users rely on alternative text to understand what images represent. When an image conveys important information, appropriate and succinct alternative text should be provided. For instance, a logo on Company XYZ’s website should be detailed as alt="Company XYZ". Going into great detail about the design of the website logo, such as “Company XYZ, blue background with purple text and yellow highlights” is far too verbose, and creates audio clutter for screen reader users.

Where an image is purely decorative or used for spacing it should be assigned empty alternative text: alt="". This ensures that the screen reading software does not speak the image filename.

Provide descriptive headings

It is important to provide descriptive headings which have been semantically marked up from <h1> through to <h6>. Screen reader users often listen to headings out of context from the main content of the web page through use of a headings list. This enables quick access into areas of content the user is interested in, rather than having to listen to the entire web page.

<h1> should be reserved for the main heading so that screen reader users can quickly identify what the content on the web page will be about.

Provide audio descriptions and transcripts of video content

Screen reader users depend on audio descriptions to provide additional information about important visual content displayed within a video. For instance, in a chase scene where the only audio is a piece of music, it is essential that audio descriptions are used to describe the actual events, e.g. “two thieves run down a flight of stairs to escape the police.”—it would not be possible for blind screen reader users to determine this is what is being displayed on the video by listening to the audio alone.

Another useful inclusion for audio and video content is transcripts. Transcripts are written accounts of the video or audio content and can include additional information such as comments and descriptions that may assist in the understanding of the content. Transcripts enable blind screen reader users to access video or audio content by an alternative method.

Remember screen reader users cannot use a mouse

It is important to remember that blind screen reader users do not use a mouse—they use the keyboard to navigate a website. It is therefore essential that all functionality and information can be accessed via the keyboard, including video controls within media players.

Vision Impairment—Low Vision

People with low vision will tend to use magnification software to make reading a website easier. Depending on the severity of their vision impairment, these users may combine magnification and screen reading software by using software products such as Supernova or ZoomText. For milder vision impairments, users may just increase the /files/includes/default.css size of text within their browser settings or change the colors to make the content more comfortable to read.

The key principles for accessible and usable design when considering users with low vision are:

Avoid using images of text

Wherever possible avoid using images of text; instead, use suitably styled HTML. Images of text affect all users with low vision. For magnification software users, the image will degrade when magnified and make the text more difficult to read, as shown in figure 6. Additionally, images of text will not reflect colors customized within the web browser or text that has been enlarged.

Figure 6—Magnified image of text that has degraded

Ensure text can be resized

By providing content which can be resized, users with low vision can change the size of text in the web page to make it more comfortable to read.

Place key information in specific locations of the screen

Magnification software users can only see a very small portion of the web page at any one time, and will look for content and functionality in specific locations of the page. For example, website search functionality is often located in the top-right corner of the web page; if this functionality is located elsewhere, it may be overlooked.

Use good contrasting colors

To aid readability for users with a vision impairment, ensure that good contrasting colors are used within the website. This can be achieved by testing the chosen colors with the Juicy Studio color contrast analyzer. By testing the various foreground and background color combinations, it is possible to determine whether the colors chosen meet the minimum requirements specified in the WCAG Guidelines. In addition, it is helpful if different color scheme options are provided, to aid readability for users with a vision impairment.

Hearing Impairment

People with a hearing impairment tend not to use assistive software to improve their web browsing experience. Instead, they rely on the website being accessible by providing any audio content in alternative formats, such as captioning or transcripts.

By making audio content accessible for users with a hearing impairment, it also makes the content accessible for other users who find themselves in an environment where audio cannot be heard. This may be because they are viewing video content in a library with the sound turned down; they may be in a noisy environment where it is difficult to hear the audio; or they may be using a computer without speakers.

The key principles for accessible and usable design when considering hearing impaired users are:

Provide captions for any video content

Captions should be provided within the video content itself. The captions should be synchronized with the audio so that the content can be fully understood without sound. Additional information on captioning can be found in chapter 13 of Joe Clark’s Building Accessible Websites book.

Provide transcripts of the spoken audio

Where content is spoken without video, such as in a podcast, it is important to provide a transcript. It is recommended that the transcript be provided in plain accessible HTML to allow access by the widest possible audience, as opposed to a Microsoft Word or Adobe PDF document.

Consider providing signing for important multimedia content

There are between 500,000 to 2 million American Sign Language (ASL) users in the US¹⁴ and between 50,000 and 70,000 British Sign Language (BSL) users in the UK¹⁵. Therefore, for important video content it may be worthwhile investigating the possibility of including signing to assist these users in understanding the content being provided.

Physical Disability

Physical disabilities range in severity from those who are temporarily disabled, for example having a broken arm, to those who are quadriplegic and have no use of any limbs. Depending on the severity of the physical disability, these users may access websites through voice recognition software such as Dragon Naturally Speaking. However, what all users with a physical disability have in common is limited or no ability to use a mouse. This means that content within the website that requires a mouse click or fine motor control cannot be accessed by these users.

The key principles for accessible and usable design when considering users with a physical disability are:

Ensure all content can be accessed via the keyboard

Users with a physical disability will have limited or no ability to use a mouse and as such will navigate websites using the keyboard. Mouse-dependent functionality, such as the onchange event handler commonly used within combo boxes, will prove problematic to keyboard users. (As soon as the user tabs into the combo box and presses the down arrow key to make a selection, the onchange event is immediately triggered, resulting in the first option being chosen regardless of the option the user wanted.)

Provide a focus state for links

As users with a physical disability will often rely on the keyboard for all interaction, it is important to provide a :focus state for links. This can be achieved by assigning a different style of text to the link so that when it receives tab focus, the color or other aspect changes and makes it clear where the user is on the page. The example below when inserted into the CSS would make links turn black when they receive focus by either the mouse and the keyboard.

a:hover, a:focus, a:active {color: #000000;}

The result would be:

Figure 7—Link with and without focus

Provide visible skip links

Skip links are links that become visible when they receive focus, and are helpful for users with a physical disability. Keyboard users must tab through the web page to reach the particular link they are interested in—skip links allow lengthy navigation to be bypassed and reduce the number of key presses required to activate links in the main content.

Avoid moving targets

Avoid using moving targets such as tickers, as users with a physical disability can find them very difficult to use. These users will have reduced motor control and therefore may not have the precision to accurately control the mouse and click on the target as it moves; and keyboard users may not have enough time to focus on the desired target before it moves out of view.

Provide large clickable areas

Some users with a physical disability will use a mouse when accessing websites. As they will have reduced motor control, it is important that text can be enlarged, making the link text easier to click. To further enhance usability, provide sufficient whitespace between links. This reduces the margin of error, meaning that users will not accidentally click the wrong link.

Figure 8—Links placed too close together

Figure 9—Links with sufficient whitespace

Correctly name image links and controls

Voice recognition software users navigate a website by saying words to activate links and controls. The words spoken are generally the same as those displayed on the website. Therefore, it is essential to ensure that all form buttons and image links are correctly coded so that their name matches the text or image displayed. For instance, if there is a ‘Buy’ button on the website, the voice recognition user will say “Buy” to activate the button—but if the underlying name for the button is ‘purchase’, it will not be possible for the user to activate the button.

Cognitive and Learning Disabilities

People with a cognitive or learning disability may have difficulties with memory, problem solving, perception, and conceptualization. In addition, people with a learning disability may have issues with reading and comprehension such as dyslexia. To enhance the usability of the website for these users it is important that content is written in plain English, page layouts are simple in design, navigation is clear and consistent and there is no moving content to impede comprehension. There are a number of other key principles for accessible and usable design when considering users with a cognitive or learning disability.

Provide a consistent design

Provide the same look and feel throughout all pages of the website. Ensure that the navigation and main content are located in the same area of every page. Additionally, consider color coding different sections within the website. Users with cognitive or learning disabilities tend to find it easier to navigate around sections which are color coded. This can be achieved by using the same background color or heading banner for all pages within a section.

Provide a site map

A site map will enable users with a cognitive or learning disability to have a clear idea of the breadth of content contained within the website. The site map also enables users to directly access any page on the website, and helps if the user becomes lost.

Use a resizable sans-serif font which is left-aligned

To increase readability for users with a cognitive or learning disability, use a sans-serif font which can be resized. Additionally, left-align content—justified text is more difficult to read due to the uneven spacing between words. Italicized and capitalized text should also be kept to a minimum to aid readability.

Provide helpful error messages

If a user makes a mistake, assist them by providing helpful error messages. For instance, if mandatory form fields have been missed out, the error message should tell the user which fields still need to be completed.

Offer speech output

Organizations such as Browse Aloud and Textic enable content from a website to be spoken when highlighting the words on a web page. Offering this functionality is especially helpful for users who find it difficult to read large amounts of text.

Provide an Easy Read Version

Consider providing an ‘easy read’ version of complex content. This combines plain text with images to aid understanding of the information. For an example of an easy read document see the Department of Health’s Making Lives Better for People with a Learning Disability.

Provide different color schemes

People with cognitive or learning disabilities may benefit from different color scheme options. It is helpful if an easy read scheme such as a lemon background with dark text, and a hi-viz scheme such as a black background with yellow text, are provided.

Conclusion

I hope that this article has provided some insight into how users with different disabilities access websites, and how simple changes can make a huge difference to their browsing experience. Whilst not an exhaustive list, the techniques described in this article should go some way to enhancing the accessibility and usability of websites for people who have a vision, hearing, physical, cognitive, or learning disability.

Footnotes

¹ http://digital-lifestyles.info/2008/07/07/us-broadband-uptake-slows-25-without-home-internet-access
² http://www.statistics.gov.uk/CCI/nugget.asp?ID=8
³ http://www.rnib.org.uk/xpedio/groups/public/documents/PublicWebsite/public_rnib003680.hcsp
⁴ http://www.afb.org/section.asp?SectionID=15&DocumentID=1367
⁵ http://www.rnid.org.uk/information_resources/aboutdeafness/statistics/
⁶ http://www.rnid.org.uk/information_resources/aboutdeafness/statistics/
⁷ http://www.sciencedaily.com/releases/1999/02/990204081932.htm
⁸ http://www.abilitynet.org.uk/enation21
⁹ http://ada.ky.gov/mobility_imp_def.htm
¹⁰ http://www.mencap.org.uk/landing.asp?id=1683
¹¹ http://www.ubaccess.com/ldweb.html
¹² http://www.bdadyslexia.org.uk/news.html
¹³ http://findarticles.com/p/articles/mi_m0EIN/is_2004_May_17/ai_n6029324
¹⁴ http://en.wikipedia.org/wiki/American_Sign_Language
¹⁵ http://www.rnid.org.uk/information_resources/factsheets/communication/factsheets_leaflets/sign_language.htm

• Add to Magnolia
• Add to My Yahoo!
• Add to Newsvine
• Digg this story
• Add to Del.icio.us

Related Topics: User Experience, Usability, Information Design, Accessibility