Accessibility Validator - Document Conformance Tests

Accessibility Validator - Document Conformance Tests for Section 508 of the Rehabilitation Act (508 ACT) and for the W3C Web Accessibility Initiative (WAI) - Web Content Accessibility Guidelines (WCAG)

Dr. E. Garcia
Mi Islita.com
Email | Last Update: 06/08/05

Topics

About this Accessibility Validator

Test and Validate Your Document

Legal Implications of Section 508

About Our XHTML Reformulation of the Validator

Accessibility and Tab Navigation

Accessibility and Access Key Navigation

References

About this Accessibility Validator

Use Mi Islita's XHTML reformulation of the Cynthia Validator Interface. Learn XHTML while testing if documents conform to

Sec 508 (Section 508 of the Rehabilitation Act)
WAI (Web Accessibility Initiative)
WCAG (Web Content Accessibiliy Guidelines)

The CynthiaSays(tm) Accessibility Validator is designed to identify errors in design related to Section 508 standards and the WCAG guidelines. CynthiaSays.com is a joint Education and Outreach project of

ICDRI (The Internet Center for Disability Resources on the Internet)
ISOCDISAB (The Internet Society Disability and Special Needs Chapter)
HiSoftware, Inc.

Our XHTML reformulation of the CynthiaSays(tm) Accessibility Validator interface is presented with permission from HiSoftware, Inc.

Test and Validate Your Document

Accessibility Validator - An XHTML Reformulation of the Cynthia 1.0 Interface
Developed by Mi Islita.com. July, 2003

Test Your Page Now

Web Page (Required)

e.g. http://www.isocdisab.org/

Accessibility Report Mode

Do not fail pages for WCAG 1.0 Priority 2 and 3 errors, simply warn me.

Include the Alternative Text Quality Report

Include File Source on Accessibility Failures

Run the Potential Screen Movement and Flickering Report

Test for animated Gifs - Could add time to processing

Emulate this Browser:

Why Accessibility Validations

The following legal research information is reproduced with permission from Attorney Daniel W. Uhlfelder from the GigaLaw.com, [ 1 ] site,

In 1998, USA Congress amended the Rehabilitation Act. Section 508 of the Act mandates that virtually ALL federal government web sites be fully accessible to disabled people.
On December 21, 2000, the Architectural and Transportation Barriers Compliance Board (ACCESS BOARD) issued accessibility standards under section 508 of the Rehabilitation Act.
Enforcement takes effect on June 21, 2001. Standards are divided into four subparts:
(1) general, (2) technical, (3) functional performance criteria, and (4) information, documentation and support.
For federal Web designers, "accessibility" means that web pages must be usable by people who have limited use of their hands, vision, hearing or suffer from these or other disabilities such as colorblindness, to photo-sensitive epilepsy triggered by rapidly flashing lights. A system is accessible to people with disabilities if it can be used in a variety of ways that do not depend on a single sense or ability.
Accessibility also include access to user guides, customer support, installation guides, alternate formats such as braille, cassette recording, large print and captioning.
Provision requires alternative keyboard navigation. Other provisions address animated displays, color and contrast settings, flash rate and electronic forms, among others.
The criteria for web-based technology and information are based on the W3C WAI. The W3C has standing and draft standards -- for browsers, web sites, applications -- that outline the development of universal interfaces.

Legal Implications of Section 508

There are many legal reasons for validating sites.

Several U.S. States already mandate that any state-purchased or licensed software must be compatible with assistive devices for the handicapped.
The Americans with Disabilities Act (ADA) requires public institutions to offer services and mandates accomodations to people with disabilities if the services are available.
In court papers, the U.S. Justice Department has contended that the Americans with Disabilities Act (ADA) applies to private Internet sites.
In November 1999, the National Federation of the Blind (NFB) filed a suit against AOL claiming that AOL's software was not compatible with the screen-access software used by the blind. On July 26, 2000, AOL announced that it had agreed to work with NFB to ensure that AOL content is largely accesible to the blind.
The new rules of the 508 ACT could be the first step toward enforcement of a federal mandate that all private commercial sites (e.g., sites doing business with gov agencies or that are grant-funded) also be accessible to the disabled.

To learn more about Section 508 ACT guidelines for Web masters and designers, visit the following sites (1 - 3)

You may also want to download the 508Awareness.zip file, read the 36 CFR Part 1194 Subpart B, Technical Standards or review additional tutorial material from Section508.Gov or Access-Board.Gov sites.

About Our XHTML Reformulation of the Validator

The HTML markup of the Cynthia 1.0 interface is available at CynthiaSays.com. By reformulating it as XHTML, it is possible to improve its compatibility with emerging XML Web-based appliances that interpret XHTML rather than HTML. Since, XML Web-based technologies are still evolving, this reformulation should only be interpreted as an ongoing accessibility experiment. Still, we believe this experiment is a step in the right direction.

Reformulation of the original markup, from HTML to XHTML 1.0 Transitional (and W3C-Valid), was carried out by

removing several orphan, closing tags found in the original markup (i.e., </p>)
removing all unnecessary white space from it.
adding a tab order to all input fields.
enabling accesskey navigation.
ending all input field tags with a space followed by a forward trailing slash.
declaring the method attribute of the form element in lowercase; i.e., method="post".
using self-referential selected attributes.
validating all changes at the W3C site.

These changes were necessary. In XHTML

all markup must be well structured, with no orphan tags or unnecessary extra space.
lowercase markup (tags and attributes) must be used; i.e., XML is case-sensitive.
attributes minimization is not allowed; i.e., attribute-value pairs must be fully qualified.

In addition, the W3C recommends the use of the space/trailing slash method to end the following empty tags or elements

area
base
basefont
br
col
frame
hr
img
input
isindex
link
meta
param

Ending these tags with a space and a trailing slash is recommended for two reasons, i.e.,

to allow older browsers to ignore the slash in empty tags.
to avoid compatibility problems with browsers that cannot recognize closing tags with empty elements.

We made the selected attribute self-referential by using selected="selected". As mentioned before, this was necessary

since XML does not support attribute minimization; that is, all attribute-value pairs like selected must be fully qualified.
to prevent the W3C SGML parser from reporting a SHORTTAG error, [ 4 ]
to prevent the W3C validator from failing the markup.

We must point out that this "solution" works well with HTML 4-compliant browsers but not for older browsers. One can do better by simply omitting the selected attribute entirely and using the first options as defaults. After all, the first options of Cynthia 1.0 are the "selected" options.

Accessibility and Tab Navigation

We implemented the W3C recommendations for alternate navigation using the tabindex attribute by adding a tab order to all input fields. Note. Although supported by some browsers, the practice of adding tabindex attributes to form labels has not been recommended in the XHTML Abstract Modules, [ 5 ]. According to the W3C, the following elements support the tabindex attribute, [ 6 ]

A
AREA
BUTTON
INPUT
OBJECT
SELECT
TEXTAREA.

Accessibility and Access Key Navigation

We also implementd alternate navigation with the accesskey attribute, by enabling access-key navigation in all relevant labels and associated input fields. Access keys are in boldface and underlined. We avoided the use of the F, E, V, A, T, and H keys since these are reserved for the Internet Explorer main menu or menubar. According to the W3C, the following elements support the accesskey attribute, [ 7 ]

A
AREA
BUTTON
INPUT
LABEL
LEGEND
TEXTAREA.

After all these changes were made, we were able to validate the final markup at the W3C site, earning the W3C Validation for Proper XHTML 1.0 Transitional. It should be pointed out that these changes degrade gracefully in older browsers and platforms, without compromising functionality, accuracy and performance.

A Note on keyboard shortcuts and anchor links. With regard to the use of keyboard shortcuts, some validators assign warning signals or even failing grades to documents that do not provide keyboard shortcuts (accesskey or tabindex attributes) to ALL anchor links. However, the W3C specification states

"Provide keyboard shortcuts to important links
(including those in client-side image maps),
form controls, and groups of form controls.
[Priority 3]" 9.5 specification, [ 8 ]

This is an interesting guideline since

"Provide keyboard shortcuts to important links..." is not the same as "...to all links".
"Important" is a relative term. What is important or relevant to some site visitors may not be important to others.
It might not be realistic trying to assign keyboard shortcuts to all links present in a document, portal or multimedia site, especially if the site content changes frequently.
For link-rich sites with duplicated links, temporary links, dynamic links, link-based advertisements, headliners and the like, the practice could be downright annoying to both authors and users; especially if a given accesskey attribute is assigned to different anchor links or if browser-reserved accesskeys are used.

Miscellaneous Changes

Miscellaneous changes to the user interface are possible. For instance, since the Cynthia 1.0 validator tests individual web pages rather than entire sites, the text in the legend and submit button was changed to read "Test Your Page Now" and "Test Your Page", respectively. A nice reset button could be placed next to the submit button (not done). We notice that a border property has been assigned to the img tag of the small Cynthia logo (Cynthia Tested!). This is a deprecated property, which could cause a document to fail the WCAG Priority 1,2,3 ("Level 3") test. Whenever possible, one should declare a border property with a CSS rule.

Further improvements are possible. In the next section we include additional recommendations to make Cynthia 1.0 fully compliant with XHTML 1.0 and 1.1 Strict.

Further Improvements

To make the Cynthia 1.0 markup fully compatible with XHTML Strict, all fragment identifiers must be of the type id, not name. The W3C has determined that XHTML documents must use the id attribute when defining fragment identifiers with the following elements

a (anchor links)
applet
form
frame
img
map

According to the W3C, in XHTML 1.0, the name fragment of these elements is formally deprecated, [ 9 ], and will be removed in a subsequent version of XHTML. (Note. The W3C has already released XHTML 1.1 and is currently working on XHTML 2, a DOM-oriented markup.)

With HTML 4 standards-compliant DOM browsers, like Internet Explorer 6, Netscape 6 and Opera, the selection menus of Cynthia 1.0 can be improved with the optgroup element. Implementation of this element is well described in Andy King's Speed Up Your Site: Web Site Optimization; Chapter 4, pages 88-92; New Riders, 2003.

The optgroup element can be used to group related options under one label, making the selections more user-friendly and easy to remember. Older browsers will ignore safely the element. According to the W3C, the

"use of the optgroup, [ X ] element allows authors to group choices logically. This is particularly helpful when the user must choose from a long list of options; groups of related choices are easier to grasp and remember than a single long list of options."

For instance, we could use a markup similar to the following

<option value="Cynthia 1.0" selected="selected" label="none">Cyntia 1.0</option>
<optgroup label="MS IE">
<option value="MS Internet Explorer 6.0">MS Internet Explorer 6.0</option>
<option value="MS Internet Explorer 5.5">MS Internet Explorer 5.5</option>
// additional options go here
</optgroup>
<optgroup label="MS IE">
<option value="MS Internet Explorer 6.0">MS Internet Explorer 6.0</option>
<option value="MS Internet Explorer 5.5">MS Internet Explorer 5.5</option>
// additional options go here
</optgroup>
<optgroup label="Netscape">
<option value="Netscape 6.0">Netscape 6.0"</option>
<option value="Netscape 6.1">Netscape 6.1"</option>
// additional options go here
</optgroup>
<optgroup label="Opera">
<option value="Opera 3.0">Opera 3.0"</option>
<option value="Opera 3.1">Opera 3.1"</option>
// additional options go here
</optgroup>
<optgroup label="Others">
<option value="Lynx">Lynx"</option>
<option value="WebTV">WbTV"</option>
// additional options go here
</optgroup>

A Note on CSS Rules

We styled the interface by adding the following CSS rules to our external .css file

.validator{font-weight:bold;color:#fff;background:#008;padding:0.2em;}
.s{text-decoration:underline;font-style:normal;font-weight:bold;}
form,fieldset,legend,label{font-family:arial,helvetica,serif;
color:#000;background:#ccc;font-size:1em;
border-left:1px solid #fff;border-top:1px solid #fff;
border-bottom:1px solid #000;border-right:1px solid #000;
margin:0px;padding:0.2em;}
form,.validator{width:70%;}

The first style rule (.validator) styles the division element used as a container for the interface. The second rule (.s) styles the em tag used to identify the access key letters. The third rule styles the form, fieldset, legend and label elements. The fourth rule defines relative widths. These CSS rules were validated at the W3C site and can be modified to suite the needs of any site.

How short is too short? Some authors like to optimize CSS rules by using shorthand notations. This is a good optimization practice. However don't go overboard with this as it could lead to W3C warning flags or worse false negatives. For example, for the third style rule (see above), we did not use the obvious shorthand notation "border:1px solid;border-color:#fff #000 #000 #fff;". This notation produces the desired rendering but when validated at the W3C site, the CSS parser interprets the rule as duplicated instructions (for the border property), triggering several warning signals.

Conclusion

We have presented an XHTML reformulation of the user interface of Cynthia 1.0. We believe that by reformulating the user interface as an XHTML markup, its compatibility with Web-based appliances can be improved.

CynthiaSays is Copyright 2002-2003 HiSoftware. Cynthia uses HiSoftware AccMonitor Technology. HiSoftware, CynthiaSays, AccMonitor and CynthiaSays(tm) Accessibility Validator are either Trademarks or registered trademarks of HiSoftware Company, Inc. Any and all other product and company names mentioned herein are the trademarks or service marks of their respective owners.

Accessibility Statement. It is claimed in good faith that this document conforms to Section 508 of the Rehabilitation Act and with the W3C Web Accessibility Initiative - Web Content Accessibility Guidelines. The use of the WCAG 1.0 logo on this page is used to indicate only a claim of conformance level, not a machine-validated conformance. The use of the following logo(s) indicates only that these accessibility claims have been verified with third-party validation tools. Other tools might disagree with these finding, produce false positives or false negatives. The W3C-WAI documentation provides guidelines for responsibility for accuracy of accessibility claims.

Accessibility Validator - Document Conformance Tests