Repository Tools

From CodeTalks

Directory contents of http://svn.codetalks.org/repos/trunk/tools

Contents 1 Firebug Accessibility Extension 1.1 Current Distribution 1.1.1 Configuration 1.1.2 FAQ 1.1.3 "To do" 1.1.4 Known Issues 2 FB_aria 3 Firefox Accessibility Extension 4 REngine 5 REngine_App 6 Test Pages 7 WATQA 8 WAT_toolbar

Firebug Accessibility Extension

Dependencies: FF, Firebug
The Firebug Accessibility Extension is a conglomeration of several extensions which allows one to validate ARIA and check for accessibility issues of a web page. All within the Firebug framework.

Current Distribution

The A11y Firebug Accessibility Extension demonstrates the ability to examine the accessibility features of a node and report on accessibility problems and features of standard HTML and ARIA enabled web resources. When in the HTML tab, REngine allows one to see errors in the new tabs Dom+ and A11y. The following links are to file directories, install the "xxx.xpi" file.

• Rule Engine(REngine) () (rengine.xpi)
  • Processes rules and displays results
  • Contains Open Ajax Alliance WCAG 2.0 rules
• Rule Engine Application(REngine App) () (rengine2_app.xpi)
  • Contains ICITA rules for the rules engine
  • contains the actual javascript code for the rules
  • Contains new ARIA validation rules

To view dynamically added event listeners please use the minefield version of FireFox located at: https://build.mozilla.org/tryserver-builds/opettay@mozilla.com-jsdivalue_listener_8/

Configuration

Make sure you have at least the following options enabled in the "DOM" tab, otherwise you will not be able to see the accessible name & description or any errors. "Options" menu

• "Show DOM properties"
• "Show rules"
• "Show user defined properties"

FAQ

Q - How do I see where the error is in my code?

A - In REngine, first click on the Error/Warn/Check message, second click on a specific element in the element tree.

Q - How do I get REngine to stop giving the me the alert message 'Please enter a valid website address before running REngine'?

A - On the REngine splash page, uncheck 'Auto run test every time you launch REngine'

"To do"

1. In the A11y tab, filter attributes to a11y specific attributes, all user defined attributes are shown
2. Review the REngine App grading algorithm.
3. Move rule code from AE to file(s) in the REngine App.
4. Switch all rules to use jQuery.
5. Determine which rules invoked in REngine should be eligible to be invoked in A11y & Dom+.
6. Enable Printable View
7. Modify the Dom+ tab to include the same drop down list as DOM plus "Show Rules"

Known Issues

1. Does not work on Apple OSX due to disabled accessibility API mapping on public distributions
2. Only English language mappings for messages
3. The REngine & A11y message text are not styled.
4. The REngine tree open and close icons are currently the icons used for only macs.
5. Some of the rules have the char '%' in them.
6. The browser page does not scroll when one selects an element from the Grade View.
7. In REngine, all attributes for the element are displayed. If two elements on the page fail and they are identical (i.e have exact same attr & attr values only one will be displayed in the element list for the message.
8. Some rules invoked in REngine are not invoked in A11y & Dom+.
9. All rule sets are incomplete

FB_aria

Location: http://svn.codetalks.org/repos/trunk/tools/FB_aria
Dependencies: FF, Firebug, REngine, REngine App, Accessibility Extension (from SVN)

The FB_aria extension allows the user to view ARIA errors associated with a particular DOM nodes. FB_aria's A11y tab, in the HTML view, and the Dom+ tab both show accessible name (aria-labeledby) & description (aria-describedby) via nsIAccessible. The A11y tab only displays attribute information when the attribute role is present or when aria-<> attributes are present.

When the Ruleset 'ARIA Validation' is selected in REngine the following checks are performed; when an issue is found, the attribute is displayed in bold orange:

1. attribute aria-<> is a valid state/property
2. attribute aria-<> matches (is appropriate for) the element's role
3. attribute aria-<>'s value is a member of the predefined values for the attribute http://www.w3.org/WAI/PF/aria/
4. attribute role's value is valid according to: http://svn.codetalks.org/repos/trunk/tools/Test%20Pages/aria.rdf
5. if attribute role's value requires subelements of a particular role(s), then those role(s) on subelements must be present (i.e. role has a mustcontain).

Likewise, when other Rulesets are selected, checks pertinent the selected Ruleset are performed.

Firefox Accessibility Extension

Location: http://svn.codetalks.org/repos/trunk/tools/Firefox%20Accessibility%20Extension
Official release via mozilla: https://addons.mozilla.org/en-US/firefox/addon/5809
Dependencies: FF

The Firefox Accessibility Extension is designed to make information, related to accessibility on a web page, easier to view, locate and evaluate. It provides mechanisms to automatically evaluate a variety of aspects of accessibility as well as mechanisms to manually examine web pages.

The extension allows people to look at accessibility markup though lists, highlighting, keyboard shortcuts and alternate views of page content. Much like the Functional Accessibility Evaluator(FAE), the extension provides accessibility evaluation based on the iCITA HTML Best Practices. The extension helps developers locate individual elements on a the web page that have been reported, via FAE or Firefox Accessibility Extension, as being inaccessible.

Stengths

• Can anaylize dynamically generated HTML content for accessibility features
• Elements on the page with rule violations can be highlighted for developers to identify specific elements with accessibility problems
• Implements over 40 rules for functional web accessibility
• Provides specific markup recommendations to meet rule violations
• Supports views of markup that can help with manual accessibility checks
• Links to iCITA HTML best practices for more informatin on accessibility and examples
• Can be used behind your fire wall for proprietary/sensitive web pages
• Contains links to other accessibility evaluation tools
• Includes dialogs to view WAI-ARIA widgets and rules, in the beta rule set, to test WAI-ARIA (http://www.w3.org/WAI/PF/aria/)

Limitations

• Does not create archivable reports on accessibility
• Provides information only on the page with focus

REngine

Location: http://svn.codetalks.org/repos/trunk/tools/rengine2
Dependencies: FF, Firebug, REngine App + Accessibility Extension (from SVN) or define your own rule set App

REngine analyzes web pages and why they're inaccessible based on accessibility rules for highly accessible web sites. REngine contains no rules itself, therefor you must supply a ruleset application. REngine App + Accessibility Extension will allow you to run the Accessibility Extension's rules via REngine in Firebug.

REngine_App

Location: http://svn.codetalks.org/repos/trunk/tools/rengine2_App
Dependencies: FF, Firebug, REngine, Accessibility Extension (from SVN)

REngine_App contains calls to Accessibility Extension rules. REngine_App groups the rules into rule sets, each rule or rule set is invoked via REngine.

Test Pages

The Test Pages directory contains pages used for demonstrating error caught by FB_aria and/or WAT_toolbar.

WATQA

WAT_toolbar

The Wat toolbar extension located at http://svn.codetalks.org/repos/trunk/tools/wat_toolbar/ allows the user to run accessibility rules, in a particular category, on the entire page being inspected.

In the WAT toolbar extension, using ARIA/examine roles, you can run the aria rules (from FB_aria) for all items with aria roles and attributes aria-describedby and aria-labeledby, they are not formatted pretty but you can see more problem at one time.