W3C logoWeb Accessibility initiative

WAI: Strategies, guidelines, resources to make the Web accessible to people with disabilities

In-Suite Navigation

Stories of Web Users
[DRAFT] How People with Disabilities Use the Web

Editors Draft: $Date: 2012/06/14 12:32:23 $ [changelog]
Status: This document is an in-progress draft and should not be referenced or quoted under any circumstances. Please send comments to wai-eo-editors@w3.org (a publicly archived list).
The current posted version of this document is available from http://www.w3.org/WAI/intro/people-use-web/.

Introduction

removed text: {The following stories are selected} added text: [This page provides] scenarios of people with disabilities using the Web removed text: {,} to removed text: {highlight the effect of barriers and the broader benefits of accessible} added text: [show how] websites and web tools added text: [work when they are accessible, and to show examples of accessibility barriers when they are not].

Note: removed text: {The following} added text: [These] scenarios do not represent actual individuals and do not include every removed text: {kind} added text: [type] of disability.

On this page

Mr. Lee, Online shopper with color blindness

Mr. Lee wants to buy some new clothes, appliances, and music. As he frequently does, he is spending an evening shopping online. He has one of the most common visual disabilities for men: color blindness, which in his case means an inability to distinguish between green and red.

More about Mr. Lee

removed text: {He} added text: [Mr. Lee] has difficulty reading the text on many websites. When he first started using the Web, it seemed to him the text and images on a lot of websites used poor color contrast, since they appeared to use similar shades of brown. He realized that many websites were using colors that were indistinguishable to him because of his red/green color blindness. In some cases, the removed text: {site} added text: [website] instructions explained that discounted prices were indicated by red text, but all of the text looked brown to him. In other cases, the required fields on forms were indicated by red text, but again he could not tell which fields had red text.

Mr. Lee removed text: {has found that he prefers} added text: [can use] websites that use sufficient color contrast, and redundant information for color. removed text: {The websites accomplish this by including names of the colors of clothing as well as showing a sample of the color; by adding text cues such as an asterisk to discounted prices in addition to showing them in a different color; and by clearly indicating the required fields on the order form in addition to indicating them by color.} added text: [For example, his favorite online shop for clothes lists the names of the colors in text in addition to showing images with the colors. Also required fields in the order form are indicated with text, such as an asterisk, instead of just by using a different color. Similarly, discounted prices are labeled with text instead of just being in a different color.]

removed text: {After additional experimentation,} Mr. Lee added text: [later] discovered settings in his web browser that removed text: {allowed} added text: [let] him removed text: {to} define customized color combinations for text, links, and the background. He also discovered settings for high color contrast combinations in his web browser that he can switch on when he encounters a website that is difficult to read. However, this approach does not work for all websites removed text: {, such as those that} added text: [because some] are not coded to removed text: {allow readers to} added text: [let users] override the default presentation of the website.

removed text: {Eventually, Mr. Lee bookmarked a series of online shopping sites where he could get reliable information on product colors or where he could override the colors, and not have to guess at which items were discounted.}

removed text: {Mr. Lee bookmarks the online shopping sites that list the product colors and that let him change text and background colors, so he can make the pages easier to read and does not have to guess at which items are discounted.}

Mr. Lee bookmarks removed text: {the online shopping sites that list the product colors and that let him change text and background colors, so he can make the pages easier to read and does not have to guess at which items are discounted.} added text: [websites that he finds easier to use. These are websites that let him change the text, links, and background colors and that provide cues and text alternatives to information provided in color.]

Sections related to Mr. Lee

Diversity of web users:

Diversity in web use:

Accessibility principles:

back to page contents

Mr. Jones, Reporter with repetitive stress injury

Mr. Jones is a reporter for an on-line journal who must submit his articles using a web-based removed text: {tool (called} content management system removed text: {—} added text: [(]CMS) provided by the publisher. Over his twenty-year career, Mr. Jones developed repetitive stress injury (RSI) in his hands and arms, and it has become painful for him to type.

More about Mr. Jones

removed text: {He} added text: [Mr. Jones] does not use a mouse because it strains his wrists. He also cannot type for long periods of time without serious pain. After dedicated research and consultation, Mr. Jones developed an approach that allows him to continue working as a reporter. He uses:

It took him several months to become sufficiently accustomed to using voice recognition software and to be comfortable working with it for many hours at a time. It also took him a while to learn the keyboard commands built into his web browser and to use them effectively on different types of web pages.

Still, Mr. Jones cannot use websites that do not provide keyboard support. For instance, some websites have forms and controls that cannot be used by keyboard alone. To activate these, he would have to use a mouse instead of voice recognition or typing, and this would worsen his RSI. Many websites also do not provide mechanisms to skip over forms, menus, and other parts of a web page using the keyboard alone. To navigate through such websites, he would have to use the keyboard extensively, and this would again strain his hands.

removed text: {In order for Mr. Jones to continue working with the publisher, web developers built customized work-arounds into the CMS to add some of the keyboard support that was initially missing. It is not an optimal solution and only works for some of the functions, but the publisher intends to upgrade the CMS to one with full keyboard support, especially since other employees found that keyboard support was easier on their hands.}

removed text: {In-house developers maintaining the CMS tried to configure and customize it to add some of the keyboard support that was initially missing but these work-arounds do not work well for Mr. Jones and they are difficult for the developers to maintain. The publisher now intends to upgrade the CMS to one with full keyboard support, especially since other employees found that keyboard support was easier on their hands too.}

In-house developers removed text: {maintaining} added text: [at the publishing company that maintain] the CMS tried to configure and customize it to add some of the keyboard support that was initially missing but these work-arounds do not work well for Mr. Jones and they are difficult for the developers to maintain. The removed text: {publisher} added text: [publishing company] now intends to upgrade the CMS to one with full keyboard supportremoved text: {, especially since} added text: [. This will also benefit] other employees found that keyboard support was easier on their hands too.

Sections related to Mr. Jones

Diversity of web users:

Diversity in web use:

Accessibility principles:

back to page contents

Ms. Martinez, Online student who is hard of hearing

Ms. Martinez is taking removed text: {several} distance learning courses in physics. She is 62 years old, and has been hard of hearing since birth. She can hear some sounds but not enough to understand all speech, so she learned sign language in addition to written language.

More about Ms. Martinez

removed text: {She} added text: [Ms. Martinez] had little trouble with the curriculum until the university upgraded their online removed text: {material to a multimedia approach, using an extensive collection of} added text: [system and started using] audio lectures. For classroom-based lectures the university provided sign language interpreters and CART writers (professionals typing what is removed text: {being} said verbatim). However, for web-based instruction, they initially did not realize that accessibility was an issue, then said they had no idea how to removed text: {provide the} added text: [make the audio] material removed text: {in} accessible removed text: {format}.

With the help of a local disability organization, Ms. Martinez removed text: {was able to point out} added text: [highlight: (contacted the appropriate university officials) and showed] that the university was clearly covered by a policy requiring removed text: {accessibility of} added text: [that the] online educational material added text: [be accessible]. She removed text: {was} also removed text: {able to point} added text: [pointed] to the Web Content Accessibility Guidelines (WCAG) as a resource providing guidance on how to make websites accessible, including removed text: {those with} multimedia content.

The university added text: [then] had the audio-only lectures (no video) transcribed and made these transcripts available through their website along with audio files. For multimedia presentations that include video and audio, the university added text: [now] provides captioning of the audio. Ms. Martinez uses a media player that displays these captions directly below the video so that she can added text: [see the visuals at the same time and] better understand the context of what is being said.

removed text: {Through this process the} added text: [The] university added text: [has] discovered many more benefits of transcripts and captions. For removed text: {instance} added text: [example], it removed text: {was} added text: [is] much easier to comprehensively index the accessible multimedia resources and provide them in the search engine of the website. highlight: (The transcripts are also frequently accessed to avoid downloading the large audio lectures on mobile devices.) removed text: {They also found they can provide captions} added text: [The university now provides these transcripts] in other languages to support international students, added text: [to] students who could not download or play the audio, and removed text: {many more} added text: [to students who prefer to read text and use it for citations].

Sections related to Ms. Martinez

Diversity of web users:

Diversity in web use:

Accessibility principles:

back to page contents

Ms. Laitinen, Accountant with blindness

Ms. Laitinen is the chief accountant at an insurance company that uses web-based documents and forms over a corporate intranet. highlight: (She is blind and, like many other blind computer users, she does not read braille very well because she did not learn it from early on).

More about Ms. Laitinen

To use her computer and the Web, Ms. Laitinen uses:

added text: [She listens to speech output that is so fast her co-workers cannot understand it at all.] highlight: (She then uses braille output to carefully read and check numbers and spelling of particular sections. Even though she reads braille fairly slowly she finds it less confusing to read individual characters by scanning over them with her fingertips than by listening to them one after the other.)

She uses the keyboard to navigate websites, often by jumping from heading to heading to get an overview of what is on a web page. Her screen reader indicates the structural information on a web page such as headings, column and row headings in tables, list items, links, form controls, and more. removed text: {She has become accustomed to listening to speech output at a speed that her co-workers cannot understand at all.} However, when websites are not coded properly and do not include structural information, Ms. Laitinen removed text: {would have} added text: [has] to read every web page from top to bottom to find the information that she needs. This is unmanageable and she avoids such added text: [poorly coded] websites removed text: {where} added text: [when] she can, both for leisure and for business.

Much of the information on the intranet removed text: {documents used} added text: [pages] at her company is organized in tables, which can removed text: {sometimes} be difficult to read by people using screen readers added text: [when they are not designed well]. However, since the tables in these removed text: {documents} added text: [pages] are marked up properly, she added text: [can] easily removed text: {orients herself to} added text: [get] the information in the tables. The removed text: {documents} added text: [pages] also include alternative text for images, labels for form elements, and other navigational cues that are interpreted by the screen reader.

As removed text: {one of the more} added text: [a] senior removed text: {members of the accounting staff} added text: [accountant], Ms. Laitenen removed text: {must} frequently removed text: {train} added text: [trains] employees who are based at different locations using a virtual learning environment. This includes video conferencing, document and slide sharing, removed text: {as well as} added text: [and] a live chatroom. It was a challenge to find a solution that was accessible to her and to other employees with disabilities, removed text: {but} added text: [and] it proved to be beneficial for many of the staff.

Sections related to Ms. Laitinen

Diversity of web users:

Diversity in web use:

Accessibility principles:

back to page contents

Ms. Olsen, Classroom student with attention deficit hyperactivity disorder (ADHD) and dyslexia

Ms. Olsen attends middle school, and particularly likes her literature class. She has attention deficit hyperactivity disorder (ADHD) removed text: {with} added text: [and] dyslexia removed text: {, and the combination leads to substantial difficulty reading} added text: [that make it very difficult for her to read]. However, with recent removed text: {accommodations} added text: [adaptations] to the curriculum she has become enthusiastic about this class.

More about Ms. Olsen

removed text: {Her} added text: [Ms. Olsens'] school recently started removed text: {to use} added text: [using] more online curricula to supplement class textbooks. She was initially worried about the reading load, since she reads slowly. She experimented with text-to-speech software that highlighted the text on the screen and read it aloud at the same time, and found that she was able to read much more easily when she could hear certain sections of it read to her, instead of struggling over every word.

When she goes onto the Web, she finds that some websites are much easier for her to use than others. Some of the web pages have a lot of graphics and illustrations that help her focus in quickly on sections she wants to read. In some cases, though, where the graphics are animated, it is very hard for her to focus added text: [on the text] and she is constantly distracted by the movement. She removed text: {set} added text: [uses extensions for] her web browser to freeze or hide animated graphics so that she can focus on the relevant information but that removed text: {does not always work on every website} added text: [only works on websites that are properly coded].

One of the most important things for her removed text: {has been the level of} added text: [is the] accessibility of the removed text: {web-based} online library catalogues and the general search functions on the Web. Until recently, Ms. Olsen often needed to visit the library added text: [in person] removed text: {and to seek} added text: [to get] assistance removed text: {to find} added text: [finding] the information removed text: {that} she needs. Today, the accessible online library catalogue of the school enables her to find the right information without any assistance.

Her teacher taught a number of different search strategies but sometimes the search options are still quite confusing for her. She finds that websites that provide error removed text: {corrections} added text: [correction] and suggest alternative spellings removed text: {assist} added text: [help] her significantly. Also added text: [,] websites that provide multiple navigation mechanisms such as a navigation bar, a search box, a sitemap, or bread-crumb trails, are easier for her to use.

Sections related to Ms. Olsen

Diversity of web users:

Diversity in web use:

Accessibility principles:

back to page contents

Mr. Yunus, Retiree with low vision, hand tremor, and mild short-term memory loss

Mr. Yunus is 85 years old and started to use the Web several years ago to stay in touch with family and friends, and to read about art history. He has reduced vision, hand tremor, and mild short-term memory loss.

More about Mr. Yunus

removed text: {He} added text: [Mr. Yunus] regularly reads selected news websites and removed text: {tracks} several blogs that interest him. He also uses removed text: {several} social networking websites removed text: {with which he can} added text: [to] communicate with his children, grandchildren, other relatives, and friends. He removed text: {maintains} added text: [has] a blog removed text: {in which} added text: [and once or twice a week] he writes about art history and other topics removed text: {that} he enjoys. His grandchildren set up a photo-sharing website that his family uses to post pictures and videos, and he enjoys seeing family members who removed text: {are} added text: [live] far away removed text: {and that he otherwise can not see as frequently}.

Mr. Yunus has difficulty reading small text and clicking on small links removed text: {or} added text: [and] form elements. His daughter gave him a specialized mouse that compensates added text: [for] hand trembling removed text: {and} added text: [. She also] showed him how to enlarge the text on websites using the web browser settings, removed text: {since enlarging} added text: [which] makes reading text and clicking links easier.

His web browser has a zoom function that enlarges the entire page and a text enlarging setting that only increases the text size. He prefers to enlarge the text only rather than the entire web page, since enlarging the entire web page on his browser added text: [sometimes] distorts the images and forces him to scroll horizontally to removed text: {read} added text: [get to] some of the text. removed text: {Besides the difficulty in using a mouse, it is also} added text: [It is] difficult for him to concentrate on scrolling and reading a sentence due to his limited memory and focus.

removed text: {Unfortunately,} Mr. Yunus removed text: {discovered} added text: [finds] that many websites are not designed to support text enlarging. For removed text: {instance} added text: [example], sometimes the text cannot be resized removed text: {or the text on the web pages starts to overlap each other as he increases the text size} added text: [, or some of the text overlaps or even disappears with his increased text size setting].

Another barrier that he encounters is CAPTCHA images that he finds on several social networking websites. These distorted images of text are intended to tell computers and humans apart, but Mr. Yunus cannot removed text: {read the small and distorted text, even if he enlarges the image} added text: [focus on reading the distorted images and remember to type them in the box below at the same time]. Only a few websites provide alternatives to CAPTCHA images that are more accessible to him.

Mr. Yunus removed text: {has gradually found and bookmarked} added text: [bookmarks] websites that work well for him. He removed text: {also found} added text: [uses] a web browser that helps him organize these bookmarks and removed text: {that} shows him pictures of his favorite websites so that he does not need to remember added text: [or type] their web address removed text: {or name}.

Sections related to Mr. Yunus

Diversity of web users:

Diversity in web use:

Accessibility principles:

back to page contents

Mr. Sands, Supermarket assistant with Down syndrome

Mr. Sands removed text: {has put groceries in bags for customers for the past year at a supermarket} added text: [works at a nearby supermarket, and is responsible for bagging groceries for customers]. He has Down syndromeremoved text: {,} and has difficulty with abstract concepts, reading, and doing mathematical calculations.

More about Mr. Sands

removed text: {He} added text: [Mr. Sands] usually buys his own groceries at this supermarket because he is familiar with it, but sometimes removed text: {finds that} added text: [he gets confused because] there are so many product choices removed text: {finds that} that he becomes confused removed text: {, and he finds it difficult to keep track of how much he is spending. He has difficulty re-learning where his favorite products are each time the supermarket changes the layout of its products}. added text: [When the supermarket rearranges the products, he has difficulty finding and remembering where his favorite products are located. He also has difficulty keeping track of how much he is spending.]

Recently, he visited an online grocery service from his computer at home. He explored the website the first few times with a friend. removed text: {He found that} added text: [Soon] he could use the website removed text: {without much difficulty} added text: [by himself] because the items removed text: {were} added text: [are] clearly removed text: {indicated} added text: [labeled and easy to identify], the information and instructions removed text: {were} added text: [is] formulated in simple language that is easy to understand, and the navigation removed text: {was} added text: [is] consistent and easy to use.

His friend also showed him some software that highlights links and form options on the web page, and helps him select removed text: {such} added text: [the] links and options using a single key. This software also has word prediction functionality removed text: {which} added text: [that] highlights a selection of likely words based on the first few characters removed text: {that he can easily select}. Ms. Sands uses this function frequently when he is entering text, such as comments and product reviews. He is happy that the website provides a similar feature for its product search function because it highlights the product names removed text: {which} added text: [that] his software does not know.

The website also provides an option that lets him select from a list of products that he has ordered in the past or that he selected as his favorites. Once he decides what he wants to buy, he selects the item and puts it into his virtual shopping basket. The website gives him an updated total each time he adds an item, helping him make sure that he does not over spend his budget.

Mr. Sands now shops on the online grocery site a few times a month, and just buys a few fresh items each day at the supermarket where he works. He is one of the many happy customers of this usable added text: [grocery] website.

Sections related to Mr. Sands

Diversity of web users:

Diversity in web use:

Accessibility principles:

back to page contents

Ms. Kaseem, Teenager with deaf-blindness

Ms. Kaseem uses the Web to find new restaurants to go to with friends and classmates. She is deaf and recently became highlight: (legally blind) too removed text: {, but she can see small portions of a screen}. added text: [In her particular case it means that she can see very small portions of a computer screen but cannot see enough to recognize people, objects, and obstacles well.]

More about Ms. Kaseem

removed text: {At home, she} added text: [Ms. Kaseem] uses the following combination of hardware and software to use the Web:

She uses screen magnification software removed text: {to enlarge} added text: [which enlarges] small portions of a web page removed text: {on} added text: [to fill] the entire screen. The magnifier also enlarges the mouse pointer on the screen so that she can see it added text: [more easily]. removed text: {When screen magnification is not sufficient, she uses a screen reader to drive the refreshable braille display, highlight: (which she reads slowly).} added text: [Ms. Kaseem relies on visual cues to orient herself with the web pages as she can only see small areas at a time. She also relies on web page titles, headings, and page areas that can be easily distinguished from one another.]

removed text: {Ms. Kaseem also uses a mobile phone to access the Web when she is not at home. The phone displays buttons or braille characters on the screen, and uses the vibration function to signal when she scans over the touch-screen with her fingertips. She uses the GPS on her phone to better orient herself, to find out about what is nearby, or for recording reviews about restaurants in her favorite city guide.}

removed text: {She} added text: [Ms. Kaseem] often uses removed text: {the} public transportation websites to plan her trips. However, the bus schedules get distorted when they are enlarged because the text inside them does not wrap or re-flow properly. The schedules for the local train are in a different format that removed text: {allows} added text: [works] better removed text: {enlarging} added text: [when the text is enlarged]. The local removed text: {trains} added text: [train] website also uses proper markup to indicate the page headings, column and row headings in tables, list items, links, form controls, and more. Her highlight: (sighted) friend told her that this added text: [trains] website was easier to use removed text: {by others using a} added text: [on his] mobile phone added text: [than the buses website,] too.

Ms. Kaseem found advice on Contacting Organizations about Inaccessible Websites and notified the webmaster of the public buses website about the accessibility barriers she encounters on the site. She also explained how the public trains website works better for her and for removed text: {other} mobile phone users removed text: {, and hopes she will soon get a response}. added text: [She has not yet received a response from the webmaster and is contemplating next steps.]

Sections related to Ms. Kaseem

Diversity of web users:

Diversity in web use:

Accessibility principles:

back to page contents

[Previous Page - Overview | Top of Page | Next Page - Diversity of Web Users]