Category: About Project

A Beginning for the Clear Helper Web Site

~ John Rochford

The “Clear Helper” Web site has its first page!  The home page has a decent look for a first attempt, and it experiments with a few accessibility elements.  However, its design is definitely not the one I am imagining for the site when it is available for use by people with cognitive disabilities.

HTML 5 & CSS 3

It took me eight hours to create the home page.  I spent much of the time learning enough HTML 5 and CSS 3.  I’m using those technologies primarily because they should work best with WAI ARIA, which defines a way for assistive-technology users to identify and to navigate visually-rich user interfaces.  Will I be using such interfaces or applets on the site?  I don’t know, but I want to be prepared for that possibility.

Voice Narration

One of the accessibility attributes the home page uses is a way for visitors to have its text read to them without needing to use a screen reader.  I created this feature with two tools.

I used Cognable’s speech demo to create a MP3 narration of the home page’s text.  I did this by:

  1. entering text for the MP3 title;
  2. copying and pasting the home page text;
  3. selecting the “Chilled US/Canadian Male” voice font;
  4. proving to the Captcha tool that I am human; and
  5. pressing the “Create MP3” button.

I then downloaded the created MP3 file for use on the home page.  Easy!

I embedded NCAM’s accessible MP3 player into the top, right of the home page.  I followed the simple instructions provided for the ccMP3Player.

The voice narration sounds okay, but it would be significantly improved by the use of a commercial voice font, I bet.  I did not set up closed captioning for the MP3 file because the entire text of it is right on the home page.

Immediate Next Steps

I will test the page using two tools:

  • WebAIM’s WAVE.  There are other Web accessibility evaluation tools, and I will use them.  Yet I am especially interested in WAVE because it will soon incorporate tests specifically for cognitive-disability accessibility attributes.  (More on this later.)
  • Juicy Studio’s Readability Test.  I plan to use this tool to analyze the home page text, then revise it until it reaches a reading level  likely to be understood by most people.  This experimentation, hopefully, will help train me to write explanatory text at an appropriate reading level.

I will be doing a lot more testing, experimentation and design revision.  All of it will be the subjects of future blog posts.

An Evangelist of Web Accessibility for People with Cognitive Disabilities

~ John Rochford

A project by Inclusive New Media Design in England is evangelizing Web accessibility for people with intellectual / cognitive disabilities, which it also refers to as “learning disabilities”.  It has been running workshops to train Web designers and developers, and to include people with cognitive disabilities as testers.

Its Web site has a section of tips on making Web sites work for people with cognitive disabilities, which includes links to examples of Web sites designed for the population, and information about assistive technology.

Its Web site has several nice features I plan to incorporate into the future “Clear Helper” Web site.

  • a design using HTML 5 and CSS 3;
  • a Flash-based, text-to-speech applet on every page;
  • CSS-based switching of page-background coloring (light / dark);
  • large font sizes;
  • breadcrumbs for site navigation;
  • contextually-relevant icons;
  • presentation of content in multiple formats (text, audio, video); and
  • embedded, closed-captioned videos.

I anticipate learning much from this great resource.

Proposed Back & Next Navigation Icons For Future Clear Helper Web Site

~ John Rochford

I plan to use a consistent set of navigation icons for the future Clear Helper Web site.  My first attempt is represented by the “BACK” and the “NEXT” icons below.  Others in the set will follow.

The development of them is not derived from research, which is beyond the scope of the project at this point.  However, they were created following WebAIM’s “Creating Accessible Images” guidelines.  In particular, they: are not animated; don’t use color alone to convey meaning; look okay even when enlarged to 500%; and use good color contrast between the text and the background.

Of these guidelines, the last can be objectively measured with the following tools.  Each is based upon the latest Web Content Accessibility Guidelines (WCAG 2.0).

Accessibility Color Wheel created by Giacomo Mazzocato.  This tool is used to choose a color pair, especially of foreground- and background colors, that is accessible to people with any of three color-blindness conditions. This tool rated the color contrast of the icons below as “13:1 ok”.

Luminosity Colour Contrast Ratio Analyser from Juicy Studio.  This tool also rates color contrast.  It reported the ratio as “12.96:1 … very good … ” and passing at WCAG 2.0 Level AAA, which is the highest standard.

I would appreciate any constructive feedback about these icons.  They are being shown at the size I plan to use on the Web site.

Back

Next

Accessible Video Players

~ John Rochford

On the future Clear Helper Web site, I plan to embed videos as an option for visitors to take tutorials.  At the time of this writing, I know of three accessible video players.  On the Clear Helper Web site, I may experiment with each to see which works the best.

  • ccPlayer, from the National Center for Accessible Media is the one I have been using for a couple of years on another Web site.  It was selected for use because of its accessibility features for screen readers and for keyboard users, for its closed-captioning feature, and for its ability to play well the site’s streaming-video files.
  • Easy YouTube, developed by Christian Heilmann, may be an option if Clear Helper’s videos are hosted on YouTube.  It has big buttons and clear video-size options.  Visitors with cognitive disabilities may find those controls easy to use.
  • Section 508 Video Player, was just released by Business.GOV, an official site of the U.S. Government.  Like Easy YouTube, The Section 508 Video Player is intended for use with YouTube videos.  One feature that may make it unique is that it “… plays a single video or a playlist, which is a group of videos within a single player.”

WebAIM: Insights into Cognitive Web Accessibility

~ John Rochford

My idea for the future Clear Helper Web site, and the reason I named it “Clear Helper”, is that it will offer tutorials intended for people with cognitive disabilities.  My current thinking is that each tutorial will be offered in three modes: text-only, text with pictures, and video.  Visitors to the site, presumably, would choose the mode easiest for them to follow.

So it was with interest that I reviewed the notes from a brief, related study conducted by WebAIM, and reported by Jared Smith, Associate Director of WebAIM.  The notes were from a presentation entitled “Insights into Cognitive Web Accessibility.”  It was of a user test that attempted to measure the efficiency, the effectiveness, and the satisfaction of participants (N = 8, grade 6 – 12 students with cognitive- or learning disabilities).

Among the findings, detailed in the presentation notes, were that participants did better with: larger text; images paired with text; short line lengths; and video-based instruction.  Insights included recommendations to “make your page LOOK easy” (“simple and intuitive”); “provide error recovery mechanisms”; and “keep visual aids clean, simple, and complementary to the content”.

I will keep these findings and recommendations in mind when designing the tutorials on the future Clear Helper Web site.

Augmentative-Communication Perspective on Icon-Based, Web Site Navigation

~ John Rochford

Today, I spoke with Krista Wilkinson, Ph.D., who is an expert in the field of augmentative communication, particularly for people with cognitive disabilities.  Her interests include vocabulary learning and the use of visual supports in communication and education.

I approached Dr. Wilkinson with my struggle to create, for the future Clear Helper Web site, a set of navigation icons that would enable people with cognitive disabilities to find the information they want quickly and easily.

I said I would like to use icons shown by research to be effective  communicators.  She confirmed for me that little research has been performed in this area.  After more discussion, we agreed that icons we have seen in use on Web sites seem arbitrary, or bereft of context.

She explained that even the common use of left- and right arrows on Web sites to indicate previous- and next pages is not contextually accurate in practice.  She said that people with cognitive disabilities can find it confusing that a click to a right arrow does not actually present the next page from the right.  Instead, a new page just appears.

Dr. Wilkinson showed me an augmentative communication device, called The Tango, that uses arrow buttons in a contextually appropriate manner.  Below is a picture of it.  Note the green arrow buttons on both sides of the middle set of icon buttons.Tango Augmentative Communication DeviceWhen a user presses a green, up-arrow button, the middle set of icon buttons revolve upward like a slot machine acts, and presents a new set.  When a user presses a green, right- or left arrow button, the middle set of icon buttons scrolls in the relevant direction, and presents a new set.

Dr. Wilkinson suggested I might make Web pages act similarly when left- and right arrow buttons are clicked.  I can’t think of an accessible way to do that, but I will consider it.

Another suggestion she made would be much easier to implement; left- and right arrow buttons could be paired with a contextually-appropriate sound.  An example of this would be a recording of a page turning.

Again, little research has been performed to demonstrate that the context of icons can be understood, or that the pairing of icons with sound is more effective than not.  I’ll do what I can to experiment with these ideas on the future Clear Helper Web site.  Perhaps, through evaluations by users, and via automated Web-site evaluation tools, the effectiveness of the navigation icons I plan to use could be measured.

Note: No endorsement is intended or implied for the Tango.

Icon-Based, Web Site Navigation

~ John Rochford

I have been considering the use of a consistent set of icons throughout the future “Clear Helper” Web site to facilitate the navigation of it.

One ideal for such icons is that the messages or the concepts they convey are proven, through research and extensive testing, to be consistently understood by the users of them.  Accomplishing that is beyond the scope of this project, but may be an avenue for future, grant-funded research.

Another ideal would be the development of a set of navigation icons for use across Web sites.  I had hoped there was already an effort underway.    At the time of this writing, I have not found one.

Listed below are a few sites that attempt to use a set of icons for site navigation, particularly for people with cognitive disabilities.  The success or failure of the sites’ navigation is best judged by the reader.

  • The Consumer Corner section of the California Department of Developmental Services Web site has a clip art and text based navigation menu on the right of its pages.
  • Symbol World, for site navigation, uses very large icons accompanied by short text labels.  Most appear to be unique to page content, rather than being part of a consistent navigation set.
  • Children’s Society, on the right side of its pages, uses a common set of navigation icons.  Hovering the cursor over the icons produces related sound effects.
  • Symbol Rainforest uses photographs as navigation aids.  The use of photographs may be an answer to the criticism that icons are a poor substitute for realistic representations.  (Note: The Symbol Rainforest Web site can not be viewed in Firefox, but can be viewed in Internet Explorer.)
  • Check the Map uses a navigation strip of icons on the bottoms and on the tops its pages.  Most of the icons immediately make sense to me, but the home icon is odd.  Perhaps it would be better represented by an outline of a house.
  • Moorcroft School has a large navigation strip of icons (clip- and line art) on the bottoms of its pages.

None of the Web sites listed above use what I have in mind for navigation.  I do like the combination of navigation icons and related sound effects on the Children’s Society Web site, and will consider doing something similar.

Note: The “Icons” section of a WebAIM article on “Creating Accessible Images” is germane to the creation of Web site navigation icons.

Note: With the exception of The Consumer Corner, the sites listed above are either examples set up by The Widget Software Company or use symbols provided by it.  No endorsement is intended or implied.

Cognitive Web Accessibility Checklist

~ John Rochford

One of the two purposes of this blog is to document my effort to create a Web site that follows best practices of accessibility for people with intellectual / cognitive disabilities.  So far, the clearest, most up-to-date set of these practices I can find are written by WebAIM.

In WebAIM’s article, Evaluating Cognitive Web Accessibility, principals of cognitive Web accessibility are discussed, and a detailed “Cognitive Web Accessibility Checklist” is provided.  When creating the Web site, I plan to follow this checklist as much as practical and possible.

Of note is a posting by the Curb Cut blog.  Entitled “Access to the Web for People with Intellectual Disabilities“, it refers to older articles on creating Web sites for people with cognitive disabilities, and discusses barriers that keep them from getting online.

 

Relevant Literature: Coleman Institute for Cognitive Disabilities

~ John Rochford

The Coleman Institute for Cognitive Disabilities has a Cognitive Technology Literature Database.  At the time of this writing, if the term “Web accessibility” is entered into the database’s search page, references to almost 30 research studies are produced.  Some are not strictly related to Web accessibility, but it is an informative collection.

Literature Reviews, Part 2: Paul R. Bohman

~ John Rochford

Web Accessibility for Cognitive and Learning Disabilities: A Review of Research-Based Evidence in the Literature, by Paul R. Bohman of George Mason University, is a working paper that, at the time of this writing, was last edited July 20, 2007.

This review summarizes and critiques seven relevant studies, and has an extensive discussion on potential reasons for the paucity of relevant research.  It notes common findings across studies, such as user difficulties typing text, understanding context, and navigating Web sites.

I was intrigued by the observation that Web sites could be more navigable / accessible to people with cognitive disabilities if the need for text input is reduced.  I imagine one way that could be done, at least for Web site searching, would be to enable users to select from a common set of search terms, rather than require them to enter the search terms themselves.

I found enlightening the brief discussions on resistance to the idea that people with cognitive disabilities are entitled to accommodations, and on the possibility there is reluctance to accommodate people with cognitive disabilities because it may require significant Web site redesign.