Web Accessibility Insights from 6 Women with Intellectual Disabilities

Last night, I met with a focus group formed to help me with the Clear Helper project.  It consists of people who are self advocates, who are interested in learning about computers, and who want to help me design a Web site accessible to them.  Each has an intellectual disability.  I know this blog post won’t sufficiently describe all I learned from them, but the following are some of the highlights.

Backgrounds and Interests

Joanne, Donna, Val, Nora, Mary and Jeanne are capable people.  The majority live in their own apartments and have jobs in the community.  Even so, only two have computers in their homes.  Another uses a public-library computer exclusively to exchange e-mail with her family.  The remaining four have little experience with computers.  Of all the ladies, one reported using the Web.

The main reason for the lack of computer experience is cost.  Despite ever-falling computer prices, the group members can’t afford them.  Of course, buying a computer is only a small part of the real cost.  Significantly beyond their means are: obtaining assistance for computer set up; purchase and integration of assistive-technology devices and software; and especially training.

All reported knowing of the Web, and that they want to learn about computer technology to access the Web’s many resources.  From most to least, they are interested in: learning to use e-mail; looking up recipes; determining local movie schedules; and finding contact information for state-government representatives.

Demonstration of Web Sites Designed to be Accessible to People with Intellectual Disabilities

I showed the group various Web sites intended to be accessible to them.  I started with Self Advocacy Online. The site-registration page has a fun video that takes users step-by-step through the registration form.  It pauses so users can complete each field, and prompts them to play the video to receive the next set of instructions.  The first set about creating a user name, and particularly the second set about entering an e-mail address, really confounded the group.  Members reported the instructions were too long, with too many steps and too much information.  Had the prompts been something as simple as “type a user name” and “type your e-mail address”, they told me, they would have understood what to do much better.

I showed them Easy You Tube and the BBC’s Us 5 video player.  For each, the group members reported confusion about the purposes of the control buttons.  Only two of the group members accurately reported the play button’s purpose.  They agreed that, if it had audio- and textual prompts that said “Play!” triggered by hovering the cursor on it, they would have understood what it was meant to do.

Demonstration of Clear Helper Test Pages

I showed them my recent experiment with designing features accessible to people with cognitive disabilities.

Because two group members told me at the start of our meeting that they found the text size of computers too small, I demonstrated my recent text size switcher.  The group acted surprised and pleased that a Web site / “the computer” could enlarge text.  Two said they thought the switcher was easy to use.  I also showed my instructions on how to use a Web browser to enlarge text size.  The group consensus was they were too confusing.  Even though the instructions begin by explaining the two-key combination to enlarge text, and show images of the keys, the group en masse asked, “What’s a control key?”

Switching between standard- and plain language versions was the next feature I showed them.  I pointed out the length of the standard version’s first paragraph.  I showed them the “Easy” link, and clicked it to reveal the plain language version.  Unprompted, immediate comments included approval of the short sentences and of the spacing between them.

My recent text-to-speech (TTS) experiment was next.  Group reaction was positive.  One lady explained in her own words that she is illiterate, and would need TTS to use a computer.  There was general agreement the voice narration should not announce the page content’s structural elements.

outline of a house: 2 windows, front door, A-frame roof, little chimneyI asked the group if they knew the purpose of my test home page image (pictured). One lady explained it was for the site’s home page,  the same lady who said she uses the Web.  Another guessed it meant that people lived there.  The rest of the group was silent.

Conclusion

This was an enlightening experience for me.  I learned that features on Web sites designed to be accessible for people with intellectual disabilities, features about which my impression was favorable, were not accessible (at least to this small group).  I am chagrined at my surprise that one of the ladies recognized and volunteered she found text most understandable when it was presented in small chunks.  I was equally impressed by another lady’s comment that making a Web site accessible to them means it would be easier to use for everyone.  This is a point the accessibility community continually makes.

Finally, I was again confronted with talking about Web accessibility to people who don’t have even basic computer skills.  All said they wanted to learn how to independently turn on a computer, and use its keyboard and mouse.  Acquiring and retaining these skills are going to be very difficult for these ladies simply because they don’t own computers, let alone their intellectual disabilities.

I plan to meet with this group again.  We agreed to think about what I could help them learn.  I know they have much more to teach me.

Notes

  • It is coincidence (not by design) that all the group members are women.
  • I don’t know how easy or difficult the group would have found the features I demonstrated had each been controlling her own computer.  Such activity will be part of the testing I do for the future Clear Helper Web site.

Accessible, Image-Based Menu: Rough Draft

I created a rudimentary, image-based menu as part of my recent Experiment with Site Design for People with Cognitive Disabilities. It has a few features that may make it easy to use by people cognitive disabilities.  This is a continuation of previous posts that describe my intention to use image-based navigation for the future Clear Helper Web site.3-image, vertical menu: 1 on top is 'Home'. Other 2 are blank.

The menu, pictured on the right, appears in the “sidebar” column of a test page. The image on top, an outline of a house, is intended to symbolize the home page. An ideal is that the meaning it conveys is proven, through research and extensive testing, to be consistently understood.  Accomplishing that is beyond the scope of this project.

The two images below that for the home-page are blank placeholders.  To view options for them, see “Proposed Navigation Buttons For Future Clear Helper Web Site: Draft 2“.

Attributes of Accessibility Best Practices

  • The text labels are not part of the images, which enables them to match text-size adjustments, especially enlargements, made by a site visitor.
  • The color contrast of the images themselves is good.  To see how this was objectively measured, see “Proposed Back & Next Navigation Icons For Future Clear Helper Web Site“.
  • There are no animations that could cause distraction.

Other Good Attributes for People with Cognitive Disabilities

  • The images and the text labels are large.  This helps with comprehension. It also provides easy-to-click targets for mouse users.
  • The text label for the home page is simple, as will be the labels of future navigation images.

Problems

  • The lighter color around the home-page image is intended to show it is the current page.  This violates the accessibility guideline that colors alone do not convey meaning. I will have to determine an additional method.
  • I failed to measure the contrast of the colors surrounding the actual images.  I suspect it is not good, so I will correct it in a subsequent version.
  • The alternative text for each images is repeated by the text label beneath it.  According to best practices, this is not advisable because screen-reader users hear the same message twice.  I will fix that too.

Other, Related Posts:

Text-Size Switcher Experiment

I incorporated a text-size switcher into a recent Experiment with Site Design for People with Cognitive Disabilities. I am trying this version because a feature like it may be easier to use for people with cognitive disabilities than a referral to instructions on how to increase text size.  This is a continuation of previous posts that describe my experiment with providing step-by-step instructions for changing text size in Firefox or Internet Explorer.

This text-size switcher, as pictured below, appears at the top of the test page, on the right side.

text menu above site logo and title

Description & Features

  • It is encountered immediately by site visitors who use a keyboard or a single-switch device for navigation.
  • It is activated via links that use simple words.
  • It has the following three versions. The first is displayed by default.  The latter two appear sequentially as the text-size switcher is activated. (The best way to understand it is to visit the test page and try it.)
    • Big Text
    • Smaller Text | Bigger Text
    • Smaller Text | Biggest Text
  • Its size always matches the text on the rest of the page.
  • Once it is invoked, the selected text size is displayed across all site pages.

[Edit on 2010-02-03: I just discovered a great article that discusses guidelines for text (font) resizing and the design difficulties faced accommodating it.  Entitled “Font Resizing Guidance“, it was written by Karl Groves of The SSB Bart Group. I realized with some satisfaction that, without having read the article first, the test page I created conforms to all the best practices and the recommendations it describes.]

Problems

As text size is increased, the switcher’s links shift left.  A mouse user therefore may need to move the cursor to the right to select subsequent links for larger text.  It would be simpler if the switcher were set up so a user could just click the same place a couple of times to increase text size.

It does not use symbols to indicate its function.  I will have to survey other sites to find examples of simple ones.

Request

As always, I am open to learning about alternative solutions. Please contact me or post a comment.

Related posts:

Experiment with Site Design for People with Cognitive Disabilities

I created my first Web site design intended to be used by people with cognitive disabilities.  It is only a first draft, but it employs many of the cognitive-accessibility attributes I have been discussing since I started this blog.

This post focuses on the CSS-based layout. Subsequent posts will describe the new text-size switcher experiment and the image-based menu.  The test page itself has a list of text-accessibility features.

The motivator for this draft was a desire for a two-column design that would not break no matter how much text size is increased.  To accomplish this, I used a hybrid of elastic- and fluid cascading style sheets (CSS) layouts.

Elastic Layout Definition

An elastic page layout scales as text size is changed.  To do this, the height and the width of a page’s main CSS container and other elements are defined by a unit of measure known as an “em”. Since ems are proportional to text size, containers and elements measured by them adjust themselves relative to changes in text size.

Fluid Layout Definition

A fluid layout, otherwise known as a liquid layout, adjusts itself to fit the size of the window in which it is being viewed.  By using CSS container sizes based upon percentages, fluid designs typically take up an entire window without producing a horizontal scroll bar.

Combined Layouts

The body of the test page has a width of 56 em. The two columns, “primary” and “sidebar” have widths of 65 percent and 30 percent respectively.  The combination of the widths for the body and for the primary column means that lines of text, no matter how large, will not be longer than 80 characters.  This is a best practice of cognitive accessibility.

The remaining 35% of the body width is taken up by the margin space (5%) between the two columns and by the sidebar / menu column.  This is enough room to enable the menu text to be enlarged without breaking the page design.

Design Problems

  • In aesthetic terms, the best I could say about the design is that it is “not pretty”.  I can create functional designs, but not eye-pleasing ones.  I will have to outsource to a professional designer.
  • The tab order is a problem.  People who are sighted, but who can not use a mouse, instead use the tab key or a single-switch device to navigate a Web page.  Doing so with my hybrid design does not immediately bring such a user to the primary content.  Worse, it appears tabbing through the page skips the primary content entirely.  This is mitigated by the “Skip to content” link at the top of the page, but it is still something I would have to fix were I to use this design on the production site.

Notes


Lessons Learned from a Budding Web Developer with an Intellectual Disability

Jeremiah has been teaching himself how to develop Web sites.  We were introduced because of this interest, and because Jeremiah is a person with an intellectual disability.

When I told Jeremiah of my plan to provide video-based tutorials on the future Clear Helper Web site, he immediately became excited.  He is especially interested in Web-based video as a medium for opening the public’s hearts and minds to the song and dance of his home country.

I am intrigued by the possibility that people with intellectual disabilities could actually develop their own Web sites. To my shame, this had not occurred to me before I met Jeremiah.  I will have to rethink the roles people with intellectual disabilities could play in the development of the future Clear Helper Web site.

Jeremiah showed me a HTML tutorial he found on the Web.  He had made it his home page.  It consisted of text-based lessons on how to code a Web page by hand.  In a quick search, all HTML tutorials I found focused on coding.  I explained that learning how to create Web pages might be better with a graphical HTML editor.  He could use its visual interface to include- and to place elements, and then examine how it wrote the associated HTML code.

It has been many years since I have seen a graphical HTML editor on the order of Dream Weaver or Front Page.  I no longer know what popular software people use who don’t code Web sites.  I assume many use Web-based content management systems.  Before my visit with Jeremiah, I did find a free Web-page creator with a graphical editor.

I learned during our visit that not only had Jeremiah already tried Kompozer, but he had downloaded it for installation on his recently-donated computer.  The savvy it took to find Kompozer and try it on his own indicated his capabilities to me.  It reminded me that people with intellectual disabilities are often quite adept in perhaps unexpected areas.

Trying Kompozer together showed it does have a graphical- and a code editor, but learning to use it was not immediately intuitive for Jeremiah.  I could not find a picture- and text based, step-by-step tutorial for using Kompozer’s graphical editor.  Likewise, I struck out trying to find on YouTube an appropriate, similar tutorial.

This reaffirmed for me one of the reasons I started this project; step-by-step tutorials just are not available on the Web for people with intellectual disabilities.  That’s a shame, because they would benefit many people.

If anyone knows of one, or knows of an alternative HTML editor Jeremiah could try, please contact me or post a comment.  Right now, Jeremiah must use free software. Yet with his newly-acquired, full-time job, he may soon be able to afford a commercial alternative.

I did explain to Jeremiah that his video files should be converted to Flash, and found a free converter for him.  I briefly showed him how to use it.  I promised to send him step-by-step instructions on its use, and then on how to embed a Flash file in a Web page.  While writing the instructions later, I was reminded how difficult it is to break down simple tasks, let alone the complicated ones I was trying to teach Jeremiah. Designing such content will be much more work than developing a Web site to deliver it.

As I have described, I learned important lessons in my brief time with Jeremiah.  I anticipate they will serve me well as I move forward with the Clear Helper project.  For this, I thank Jeremiah.

Note: No endorsement of Kompozer is expressed or implied.

Clear Helper Project Updates: On with the Development Work!

I’m taking a moment now to publish a few updates on the Clear Helper project.  My original goal remains: to develop a Web site using best practices of accessibility for people with intellectual disabilities.  I realized recently that my actual development work has slowed due to the significant amount of time I have been putting into related research.  In the next couple of weeks, I am going to renew my work on an experimental site design.

  • Simon Evans, of Cognable.com, has graciously set up an account for me to try his Speeka text-to-speech for Web sites.  I will create some tests, and will publish the results.
  • I will set up within the next several weeks a Web site that will use one or more commercial technologies designed to make Web sites more accessible to people with cognitive disabilities.  I will blog about my efforts to make this happen. Trying out these technologies on this new Web site will help me decide which to use on the Clear Helper Web site.
  • Within the next month, I will meet with a ten-person focus group of people with intellectual disabilities.  To my good fortune, they have agreed to work with me to develop and to evaluate the Clear Helper Web site.
  • I have been asked to help WebAIM evaluate some recent work in its wonderful project to advance the development of accessibility for people with cognitive disabilities.  I am honored to play even the tiniest of roles in this effort.
  • Finally, I can report a little accessibility-advocacy success.  I decided to blog with WordPress because its accessibility was commended and my evaluation showed it was good.  However, it has had an accessibility problem to which I had no access to fix: a missing label for the input fields of its e-mail subscription- and blog search tools. With a small amount of persistent prodding, WordPress technical support did fix the e-mail subscription form.  I am informed it will soon do the same for the other.

Definitions of “Cognitive Disability”

Goal

Find a recent, functional definition of “cognitive disability” written by an appropriate U.S. federal government agency, and adopted by government agencies and education institutions throughout the country.

Goal = Wishful Thinking

It appears no authoritative source has published a widely-used and accepted functional definition, nor a clinical one. Because I intend the Clear Helper Web site to be accessible to people with cognitive disabilities, it would have been helpful to find an authoritative, functional definition.

Definitions from Federal-Government Sources

The closest I came to my goal, at least for an authoritative source, is a clinical definition on the Web site of the U.S. Department of Health and Human Services, Administration for Children & Families.  The definition is part of an explanation of why the term “cognitive disabilities” was not used instead of “intellectual disabilities” on the Web site of the President’s Committee for People with Intellectual Disabilities.

“Cognitive disabilities” is often used by physicians, neurologists, psychologists and other professionals to include adults sustaining head injuries with brain trauma after the age 18, adults with infectious diseases or affected by toxic substances leading to organic brain syndromes and cognitive deficits after the age 18, and with older adults with Alzheimer diseases or other forms of dementias as well as other populations that do not meet the strict definition of mental retardation.

Retrieved from: http://faq.acf.hhs.gov/cgi-bin/acfrightnow.cfg/php/enduser/std_adp.php?p_faqid=934&p_created=1068052784 (Published December 4, 2009)

The next-closest to my goal, in terms of a functional definition from a federal-government agency, is on the Web site of the U.S. Environmental Protection Agency.

Cognitive disabilities cover a wide range of needs and abilities that vary for each specific person. Conditions range from person having a serious mental impairment caused by Alzheimer’s disease, Bipolar Disorder or medications to non-organic disorders such as dyslexia, attention deficit disorder, poor literacy or problems understanding information. At a basic level, these disabilities affect the mental process of knowledge, including aspects such as awareness, perception, reasoning, and judgment. Simply put, the Center on Human Policy at Syracuse University defines cognitive disability as: “a disability that impacts an individual’s ability to access, process, or remember information.”

Retrieved from: http://www.epa.gov/accessibility/technology/disabilities.htm (Published December 29, 2008).  Syracuse University definition retrieved from: http://thechp.syr.edu/definitions_support_terms.html

I also found an older, brief, functional definition on a Web site of the U.S. Department of Transportation.

Cognitive disability – Limitation of the ability to perceive, recognize, understand, interpret, and/or respond to information.

Retrieved from: http://www.fhwa.dot.gov/environment/sidewalks/appb.htm (Published January 20, 2004)

I could not find any evidence that the above definitions have been adopted by anyone, let alone widely-adopted.

Definitions From Other Sources

I found the following definition on the Web site of the Coleman Institute for Cognitive Disabilities, at The University of Colorado.

When we refer to “cognitive disabilities” on this website we are primarily referring to mental retardation and developmental disabilities, acquired brain injury, Alzheimer’s disease, and severe and persistent mental illness. …

Cognitive disability stems from a substantial limitation in one’s capacity to think, including conceptualizing, planning and sequencing thoughts and actions, remembering, and interpreting the meaning of social and emotional cues, and of numbers and symbols.

Retrieved from: https://www.cu.edu/ColemanInstitute/background.html (Published December 14, 2006)

The most useful information I found is on the WebAIM Web site.  It provides general clinical- and functional definitions in the context of accessibility for people with cognitive disabilities.  It has a list of categories of functional deficits, with a relevant synopsis of each.

Cognitive Disabilities: Introduction (Published May 3, 2009)

The WebAIM article’s discussion of clinical- versus functional- definitions closely matches that of another useful article, posted on the Disabled World Web Site.

Cognitive Disabilities (Published February 10, 2009)

Search Term

In all my searches, I used variations of the search term: “cognitive disability” definition

Sources Searched

Note: If you know of a definition or a source of a definition for “cognitive disability”, please contact me or post a comment.  Thank you.

Tutorial Suggestions from a Self Advocate & a Person with ID

I met today with Anne, a self advocate, a co-founder of Massachusetts Advocates Standing Strong (MASS), and a person who uses the Web daily.  Anne is also a person with an intellectual disability.

Popular Request

When I started working with Anne to resolve some issues with her computer, the very first action she asked me to take was to increase its font size.  This is a common request amongst other people with intellectual disabilities.

Increasing a computer’s font size will be the subject of the first tutorial for the future Clear Helper Web site. I could set up the site so it auto-detects the operating system of a visitor’s computer and displays the relevant instructions.  This would be more useful than asking visitors to choose a set of instructions based upon which operating system they use.  Many people do not know what an operating system is, let alone which version their computers use.

Anne’s Suggestions for Tutorials

For future tutorials, Anne suggested instructions on how to:

  • increase the font size of operating systems and/or Web browsers;
  • save for future use the Web site links sent via e-mail;
  • save files, such as attachments, into folders; and
  • find the contact information for state legislators.

Note: The last suggestion is one Anne has in common with Mary, another self advocate I interviewed.

MADIL

Anne also asked me to show her how to find information using The Massachusetts Aging and Disabilities Information Locator (MADIL). I designed the site to meet accessibility standards of the time. However, it has become clear to me it is not as accessible as it could be for people with intellectual disabilities.  Its purpose and how I might improve its accessibility will be the subjects of a future blog post.

Need Help Finding Video Tutorials for People with Intellectual Disabilities

I would like to find video tutorials designed for people with intellectual disabilities.  If you know of a source for such videos, would you please share it?

A comment to this post would be best.  Alternatively, information could be sent via Twitter (@ClearHelper) or via e-mail (clear.helper@neindex.org).

The future Clear Helper Web site will contain video tutorials.  I want to learn techniques from those already created.

Thank you!

Conveying Abstract Concepts of Easy- & Standard Web Site Versions

I have been struggling with how to convey to people with intellectual disabilities the abstract concepts of easy- and standard Web site versions.  At the time of this writing, the experimental Clear Helper Web site has text links of “Easy” and “Standard” to switch between versions.

How do I make these choices more concrete for people?  I have two ideas.  Each involves a set of buttons that visually represent the two versions.  Perhaps the text links could be replaced by their respective buttons.  Alternatively, they could bring users to a page that contains the buttons and explains the other accessibility features of the Web site.

Wireframe Buttons

Displayed below is my first attempt at wireframe buttons.  The “Standard” button shows rectangular outlines of its version’s sections: header, primary-content column, sidebar and footer.  The “Easy” button shows an outline for its version’s only section, that of primary content.

button showing single, large box and 'Easy' text labelbutton showing rectangular outlines of page sections and 'Standard' text label

Screen-Shot Buttons

Because the wireframe buttons may themselves be too abstract, a better way of representing the two versions might be to use screen-shot buttons for them.  Displayed below are scaled-down screen shots of the standard- and the easy versions of the Clear Helper home page as it is now.  Each is accompanied by an explanatory caption.

screen shot of easy home page version
Click this picture to see only the main part of this Web site's pages
screen shot of standard home page version
Click this picture to always see all parts of this Web site's pages

It is likely that I will create sample Web sites using each of these methods, and will ask people which they find the easiest to understand.

Notes

This is a follow-up to these previous blog posts: