[Accessibleweb] Developing a basic Web site accessibility evaluation procedure

[Rick Ells]

Please join us on Thursday, September 22 for a working session
to rough out a basic Web site accessibility evaluation procedure

Location: Mary Gates Hall 015L
Date:     Thursday, September 22
Time:     11:30am - 1pm

The objective is develop a procedure we are all comfortable with
and which will help guide us as we work with others working to
ensure their Web sites are accessible.

To kick off the discussion, Terry Thompson has provided the rubric
he used in a recent study of university Web sites (see below).

Bring your lunch, your ideas, and join us for a lively discussion!


  |- Rick Ells - 543-2875 - rells at cac.washington.edu - Rm 011S MGH Bldg -|
  |-                http://staff.washington.edu/rells/                  -|


---------- Forwarded message ----------
Date: Sun, 28 Aug 2005 21:01:41 -0700
From: Terry Thompson <tft at u.washington.edu>
To: 'Rick Ells' <rells at u.washington.edu>
Subject: RE: Approaches to systematic testing for accessibility (fwd)

Hi Rick,

I've attached the web accessibility rubric that we're using for a couple 
of research projects in which we manually assess accessibility of specific 
pages. Our goal was to assign scores to web pages for research purposes, 
and we found that we attained the highest inter-rater reliability by 
assessing individual checkpoints on a page, rather than the entire page. 
The manual assessments are highly dependent on the AIS Web Accessibility 
Toolbar. This approach to assessment is probably most useful for research 
- I don't suppose web developers in an organization would be assigning 
scores to their web pages in this fashion. Our assessment tool is being 
utilized nationwide by people of varying technical abilities - this 
required that we keep things simple, minimize the amount of code-level 
knowledge required, and not use a screen reader in our assessments, all of 
which are of course somewhat limiting.

At Western we had an informal arrangement where all websites developed
by the Web Services department had to be reviewed by me prior to its
going live. My reviews typically would involve some of the same steps
described by our research rubric, but without actually assigning scores.
I would also review all content with JAWS, and developers would
routinely review it in a variety of browsers with and without scripts
and style sheets.

Hope this helps. Let me know if you have questions.

Terry


Web Accessibility Checkpoints


Each web page will receive a rating (1-3, or 9 if not applicable) on
each of 14 checkpoints, as follows:

*	1 = Site has failed to implement this checkpoint.

*	2 = Site has partially implemented this checkpoint.

*	3 = Site has fully implemented this checkpoint.

Note: A rating of 9 is also possible to indicate that an item is not
applicable for a given page.

Note #2: The word some is used in defining a score of "2" within several
of the checkpoints (e.g., "some frames to do not have titles"). In each
case, some means one or more. So, the statement "some frames do not have
titles" would be true if only one frame was missing a title, or if
several frames were missing a title.

Below is an explanation of each checkpoint, and how to assess whether a
site implements that checkpoint. Important: The assessment process
requries Internet Explorer and the free Web Accessibility
<http://www.nils.org.au/ais/web/resources/toolbar/> Toolbar from
Accessible Information Solutions.

1.	Are frames appropriately titled?


 	Steps:

1.	Using the Web Accessibility Toolbar, select Structure
(Alt+Ctrl+5) > Frame Name/Title.

2.	Review the list of frames. If frames have titles, they are
displayed in this list. Determine whether these frame titles convey the
function of the frame. (e.g., "top frame" and "left frame" do not convey
function.)

3.	Score as follows:


*	1 = No frames have titles.

*	2 = Some frames do not have titles, or frame titles do not
adequately convey function.

*	3 = All frames are appropriately titled.

*	9 = There are no frames on this page.

 	NOTE: If a page uses frames, the assessment of the overall page
requires that the component pages be assessed individually. To do this,
use the Web Accessibility Toolbar to view the frame structure (same
procedure as above). In the frame structure, the source ("src") for each
frame is identified as a link. Where it makes sense to do so, follow
these links and assess each frame separately using the remaining
checkpoints. You will ultimately enter only one score for the entire
page.

2.	Are ALT tags present and sufficiently equivalent to the graphic
content?


 	Steps:

1.	Using the Web Accessibility Toolbar, use Images (Alt+Ctrl+4) >
Image List. This generates a list of all images, followed by the code
that displays each image. Compare each image with its accompanying IMG
tag, specifically noting whether the IMG tag has an ALT attribute, and
if so, whether the ALT attribute provides equivalent text.

2.	Follow a similar procedure for image maps. Using the Web
Accessibility Toolbar, select Images > Show Image Maps, then review the
output to be sure all image maps are accessible. To be accessible, an
image map should have an ALT attribute on the image, as well as ALT
attributes on each of the AREA elements that define the image map's
clickable areas. Note: Support for image maps was a recent addition to
the Toolbar. If you don't find this option on your Toolbar, update your
toolbar by selecting the AIS button (ALT+CTRL+0) > Accessibility Toolbar
Options > Toolbar Update.

3.	Score as follows:


*	1 = No ALT tags on informative images.

*	2 = Some, but not all, images have ALT tags, ALT tags are not
equivalent, or ALT tags provide unnecessary information such as
ALT="spacer" (NULL ALT should be used for decorative images.

*	3 = All images are marked up with either equivalent ALT tags for
informative images or NULL ALT tags (alt="") for decorative images.
Images displayed using the background attribute do not require ALT tags.


*	9 = No images on this page.

3.	Are form elements explicitly associated with labels?


 	Steps:

1.	If there are form elements on a page, roughly estimate how many
of these form fields should have labels explicitly associated with them.


2.	Now open the document's source code (View > Source in Internet
Explorer).

3.	Search for the following text:
<label

4.	If multiple labels are required on this page, repeat your search
several times to be sure that label elements are used consistently.

5.	Score as follows:


*	1 = No LABEL tags are present.

*	2 = Some, but not all, form fields have LABEL tags.

*	3 = All form fields have LABEL tags.

*	9 = No form fields on this page.

 	Note: A rating of 2 is highly unlikely with this checkpoint. If
designers are aware of LABEL at all, they tend to implement it
consistently.

4.	Is information in PDF available in other more accessible
formats?


 	Steps:

1.	Using the Web Accessibility Toolbar, select Doc Info
(Alt+Ctrl+8) > List Downloadable Files. If there are PDF's, they will
show up in this list. Don't open them. Just check to see whether there
seem to be companion links in HTML or ASCII or Word. Rate as follows:


*	1 = No equivalent to PDF documents linked from this page.

*	2 = Some, but not all, PDF documents linked from this page are
also available in HTML or ASCII or Word.

*	3 = All PDF documents lined from this page are also available in
more accessible formats.

*	9 = There are no PDF documents linked from this page.

5.	Are all links and navigational elements present and contextually
appropriate via the keyboard?


 	Steps:

1.	Use the mouse to hover over links and navigational elements on
the page, looking for flyout menus or other dynamic behaviors.

2.	Now use the keyboard to navigate among the links on the page.
(tab key in Internet Explorer)

3.	If flyout menus are present, check to see if the root menu item
can be activated using keyboard (by pressing Enter). If activating the
root menu leads to a new web page, that page should contain all of the
same menu items as the flyout menu. These menu items should be near the
top of the new page and easy to access.

4.	Score as follows:


*	1 = Some links are only accessible via mouse.

*	2 = It is possible to access all links via the keyboard, but
either difficult (e.g., if keyboard users don't have a visual cue as to
where they are) or inefficient (e.g., if links are buried on a secondary
web page.)

*	3 = All links are accessible via keyboard. If a secondary page
is required for accessing flyout menus, the links on that secondary page
are equivalent and easy to access.

*	9 = There are no links or navigational elements on this page.

 	Note: If flyout menus are present, and if they are available on
a secondary page, just quickly glance to see if the options are roughly
equivalent. If the majority are present, consider it equivalent, rather
than devoting time to trying to locate each menu item.

6.	Does the site avoid conveying meaning with color alone?


 	Steps:

1.	Glance quickly through the page, looking for instances of color
being used to communicate information (e.g., "click red for this, green
for that").

2.	If color is present, check to see if this same information is
also communicated using some means other than color.


*	1 = Color is used as the sole means of communicating
information.

*	3 = Color is used to communicate information, but this same
information is communicated using another means as well.

*	9 = Color is not used to communicate information on this page.

7.	Are data tables marked up as required?


 	Steps:

1.	Decide whether table is simple (no nested rows or columns) or
complex (nested rows and columns).

2.	Using the Web Accessibility Toolbar, use the Structure menu
(Alt+Ctrl+5) to select either Simple Data Table or Complex Data Table,
depending on the outcome of the previous step.

3.	Review the results. The Web Accessibility Toolbar will mark
possible problems with red text and an exclamation point!

4.	Rate as follows:


*	1 = Data table has no accessible markup, including the
following:


*	TH elements for headers

*	SCOPE for headers on simple tables

*	ID for headers on complex tables

*	HEADERS attribute on all table cells in complex tables

*	2 = Data table has some accessible markup, but not all.

*	3 = Data table has all the necessary accessible markup.

*	9 = There are no data tables on this page.

8.	Is multimedia content captioned (or if audio only, transcribed)?



 	Steps:

1.	Using the Web Accessibility Toolbar, select Doc Info
(Alt+Ctrl+8) > Identify Multimedia Files. This will display any embedded
or linked multimedia files.

2.	If multimedia content is present, follow any links necessary to
access the multimedia file.

3.	If the content is audio only, check the page for a link to a
transcript.

4.	If the content includes both audio and video, play the
multimedia file to see if it is captioned. (Be sure you have captions
turned on in your media player.

5.	Score as follows:


*	1 = None of the multimedia is captioned. If audio only, no
transcript is provided.

*	2 = Some, but not all, of the multimedia is captioned. Some but
not all of the audio content is transcribed.

*	3 = All multimedia is captioned. All audio-only content is
transcribed.

*	9 = There is no multimedia on this page.

9.	Is flickering content avoided?


 	If the page has flickering content, score is follows:

*	1 = There is flickering content.

*	3 = There is no flickering content

 	Note: A score of 9 is not possible on this item.

10.	Is a skip navigation link present if needed?


 	Steps:

1.	Determine whether a Skip Navigation link would be helpful on a
page.

2.	If a Skip Navigation link would be helpful, open the source
code.

3.	Search for the word "Skip".

4.	If not found, search for the word "jump".

5.	If not found, search for a same-page link. Since this may be
coded using either single quotes ('') or double quotes (""), search for
both of the following variations:
href="#
href='#

6.	If any of the above text is found, and is in fact a link to a
named anchor within the same document (e.g., <a href="#main">), now
search for that named anchor to be sure it exists. (In this example, you
would search for "main").

7.	Score as follows:


*	1 = A Skip Navigation link is needed, and none is present.

*	2 = A Skip Navigation link is needed and present. But it's
broken (i.e., it's a link to nowhere)

*	3 = A Skip Navigation link is needed, present, and working.

*	9 = No Skip Navigation link is needed on this page.

11.	Is the page functional when scripts are disabled?


 	Steps:

1.	Check the site for any components that might have interactive
behaviors, such as flyout menus, form validation features, pop-up
windows, etc. Particularly note whether these behaviors result in
communication of important information.

2.	Using the Web Accessibility Toolbar > IE Options (Alt+Ctrl+S),
turn off Javascript and ActiveX.

3.	Check for loss of content.

4.	If any interactive behaviors were found in Step 1, see if the
scipted content is accessible now that scipts are disabled.

5.	Score as follows:


*	1 = Without scripts, page is missing informative content.

*	2 = Without scripts, some of the scripted content is still
present, but some is missing.

*	3 = All content is present with or without scripts.

 	Note: A score of 9 is not possible on this item.

12.	Is the page functional when style sheets are disabled?


 	Steps:

1.	Using the Web Accessibility Toolbar > CSS menu (Alt+Ctrl+3),
turn CSS off, and check to be sure the page still flows logically and
contains all informative content.

2.	Score as follows:


*	1 = Without style sheets, page is missing informative content,
or content order is changed to the point of being indecipherable.

*	2 = Without style sheets, all informative content is present,
but the structure and sequence of the page may be confusing.

*	3 = Without style sheets, all informative content is present,
and the structure and sequence of the page is preserved.

*	9 = Page does not have style sheets (i.e., page is unchanged
when style sheets are turned off).

13.	Does link text provide a reasonable description of the link
target?


 	Steps:

1.	Using the Web Accessibility Toolbar, select Doc Info
(Alt+Ctrl+8) > List Links.

2.	Review the list of links, particularly noting the link text. If
images are used in place of link text, note the ALT text (by mousing
over the image, or by using a screen reader)

3.	Score as follows:


*	1 = Most link text and link ALT text is unclear without
surrounding context (e.g., "click here" or URLs)

*	2 = Most link text and link ALT text is clear, but some is
unclear.

*	3 = All link text and link ALT text is clear without surrouding
context.

*	9 = There are no links on this page.

14.	If a page requires a timed response, can users request more
time?


 	Steps:

1.	Quickly review page for content that changes or disappears with
time if user does not respond. This might include, but is not limited
to, scrolling or animated text.

2.	If content is found in Step 1, determine whether the user can
stop, pause, slow down, or otherwise alter the time required before the
content changes.

3.	Score as follows:


*	1 = Time-sensitive content is present, and the time limit can
not be altered.

*	3 = Time-sensitive content is present, and the time limit can be
altered.

*	9 = There is no time-sensitive content.