Accessibility Ruleset Rule and NLS Format 2.0

From MemberWiki

Jump to: navigation, search

Accessibility Home | Downloads | Evaluation Library API 2.0 | Ruleset Format 2.0 | Issue Tracker

Contents

Introduction

This document describes the requirements for the structure of OpenAjax Accessibility (OAA) version 2.0 of accessibility validation rules and rulesets and national language support (NLS). Version 2.0 is a total rewrite of ruleset to improve performance and to add a new API layer to standardize the generation of an evaluation and make available important accessibility information used in evaluating the web page. The infomration can be used with inspection and reporting tools to provide more detailed information to users and support manual evalutation of accessibility. Rulesets allow validation rules to be organized based on popular web accessibility requirements like the W3C Web Content Accessibility Guidelines and Section 508. Each OAA validation rule is associated with a requirement in a ruleset file, the primary ruleset for the OpenAjax Alliance is W3C Web Content Accessibility Guidelines 2.0. Validation rules may be applied to a specific Document Object Model (DOM). The rules are written Javascript and use a cache of the W3C DOM implementation and uses common DOM extensions to compute rendered values (i.e. getComputedStyle) and identify event handlers. Tools can trigger the evaluation of rules based on user interaction or external events. It is beyond the scope of this document to describe how or when rules are processed and applied by a given tool. The aim is to describe a way of expressing validation rules that will enable them to be readily consumable by accessibility tool venders and open-source or third-party components and applications and that these rules will be reusable among their various applications.

Changes in Version 2.0

  • Use of a DOM cache to improve rule evaluation performance
  • Use of a more flexible results object and messaging system

Main Features

  • Define accessibility rules using Javascript functions and data structures
  • Extensible, so rules can be extended and optimized for specific needs of a project

Rule Result Types

For a given accessibility requirement a node result can be assigned one of the following rule type results:

  • Violation
  • Warning
  • Manual Check
  • Passed
  • Hidden

Extending Rules Beyond Accessibility Evaluation

This document focuses upon validation rules that are derived from WCAG 2.0 and, in particular, the accessibility of web content as understood by that specification, the aim is to permit these requirements to determine the codification of other types of rules. For instance, these requirements might be useful in describing rule formats for specifying privacy and security policies of corporate web sites, a company's branding strategy and legal policies via logos, templates, and page layouts and disclaimers and notices, or rules that are derived from other open standards, including other accessibility standards.


Rule Object

Rule Object Property Summary

The following table lists the properties that are associated with a rule in the rule file. For each property, the table has the following headings:

Property Name Type Description
rule_id String a unique token that can be used to pick out a particular rule from the collection of rules
last_updated String Date formatted string when the rule was last changed
rule_scope Number Indicates wheter the scope of the rule is the page or an element
rule_category Number The rule category associated with the rule (i.e. images, form controls, links...)
wcag_primary_id String The primary WCAG 2.0 Success Criteria this rule applies to
wcag_related_ids Array of Strings Related WCAG 2.0 Success Criteria this rule could also appy to
target_resources Array of Strings The elements or attributes this rule applies to
cache_dependency String The cache that this rule uses
resource_proeprties Array of Strings The properties or attributes of a target element that are important in evaluating the rule
language_dependency String Space separated language codes, if an empty string rule applies to all languages
validate Function function encapsulating the logic for a given rule (see below)


Rule Object Example

 /**
 * @object CONTROL_1
 * 
 * @desc textarea, select and input elements of type text, 
 *       password, checkbox, radio and file must have an 
 *       accessible label
 * 
 */
	     
{  rule_id             : 'CONTROL_1',
   last_updated        : '2011-09-16', 
   rule_scope          : OpenAjax.a11y.RULE_SCOPE.ELEMENT,
   rule_category       : OpenAjax.a11y.RULE_CATEGORIES.CONTROLS,
   wcag_primary_id     : '3.3.2',
   wcag_related_ids    : ['1.3.1', '2.4.6'],
   target_resources    : ['input[type="checkbox"]', 'input[type="radio"]', 'input[type="text"]', 'input[type="password"]', 'input[type="file"]', 'select', 'textarea'],
   cache_dependency    : 'controls_cache',
   resource_properties : ['computed_label', 'fieldset_element', 'computed_label_source', 'name_attribute'],
   language_dependency : "",
   validate            : function (dom_cache, rule_result) {
   
     var TEST_RESULT = OpenAjax.a11y.TEST_RESULT;
   
     var tag_name;
     var type;
   
     var control_elements   = dom_cache.controls_cache.control_elements;
     var control_elements_len = control_elements.length;
      
     // Check to see if valid cache reference
     if (control_elements && control_elements_len) {
    
       for (var i = 0; i < control_elements_len; i++) {
         var ce = control_elements[i];
 
         var control_type = ce.control_type;

         if (control_type === OpenAjax.a11y.CONTROL_TYPE.CHECKBOX ||
             control_type === OpenAjax.a11y.CONTROL_TYPE.FILE     ||
             control_type === OpenAjax.a11y.CONTROL_TYPE.PASSWORD ||
             control_type === OpenAjax.a11y.CONTROL_TYPE.RADIO    ||
             control_type === OpenAjax.a11y.CONTROL_TYPE.SELECT   ||
             control_type === OpenAjax.a11y.CONTROL_TYPE.TEXT     ||
             control_type === OpenAjax.a11y.CONTROL_TYPE.TEXTAREA ) {
            
           if (ce.dom_element.computed_style.is_visible_to_at == OpenAjax.a11y.VISIBILITY.VISIBLE) {
    
             if (ce.computed_label && ce.computed_label.length) {
               rule_result.addResult(TEST_RESULT.PASS, ce, 'PASS_1', [ce.type.toUpperCase()]);     
             }
             else {
               rule_result.addResult(TEST_RESULT.FAIL, ce, 'CORRECTIVE_ACTION_1', [ce.type.toUpperCase()]);     
             }
           }
           else {
             rule_result.addResult(TEST_RESULT.HIDDEN, ce, 'HIDDEN', [ce.type.toUpperCase()]);     
           }
         }  
       } // end loop
     } 
   } // end validation function   
},

National Language Support (NLS) Rule Objects

The National Language Support (NLS) files provide a way to localize the language of all the messaging associated or an OAA Rule Object.

NLS Rule Object Summary

Property Name Type Description
ID String A unique human readible token that can be used to pick out a particular rule from the collection of rules
DEFINITION String Definition of the coding requirements of the rule
SUMMARY String A summary of the rule definition
TARGET_RESOURCES_DESC String A description of the elements, attributes or events targeted by this rule
Rule Result Messages
RULE_RESULT_MESSAGES Object An object that contains the potential messages of a rule results, depending on the number of node results that pass, fail or require a manual check
ALL_PASS_SINGULAR String Message when there is only one node result and the result type is PASS
ALL_PASS_PLURAL String Message when there is more than one node result and the all the results are of result type is PASS
SOME_FAIL String Message when there is more than one node result and some of the node results PASS and some are WARNING or VIOLATION
CORRECTIVE_ACTION_SINGULAR String Corrective action message if one one node result in a WARNING or VIOLATION
CORRECTIVE_ACTION_PLURAL String Corrective action message when more than on node result in a WARNING or VIOLATION
ALL_FAIL_SINGULAR String Message when there is only one node result and the result type is WARNING or VIOLATION
ALL_FAIL_PLURAL String Message when there is more than one node result and the all the results are of result type is WARNING or VIOLATION
NOT_APPLICABLE String Mesage when there are no node results for this rule
Node Result Messages
NODE_RESULT_MESSAGES Object
PASS_1 String
PASS_2 String
PASS_3 String
PASS_4 String
CORRECTIVE_ACTION_1 String
CORRECTIVE_ACTION_2 String
CORRECTIVE_ACTION_3 String
CORRECTIVE_ACTION_4 String
HIDDEN String
Other Rule Information
PURPOSE Array of Strings
TECHNIQUES Array of Strings
MANUAL_CHECKS Array of Strings
INFORMATION_LINKS Array of Objects

NLS Rule Object Example

/*
 * Copyright 2011, 2012, 2013 OpenAjax Alliance
 *
 * Licensed under the Apache License, Version 2.0 (the "License");
 * you may not use this file except in compliance with the License.
 * You may obtain a copy of the License at
 *
 * http://www.apache.org/licenses/LICENSE-2.0
 *
 * Unless required by applicable law or agreed to in writing, software
 * distributed under the License is distributed on an "AS IS" BASIS,
 * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
 * See the License for the specific language governing permissions and
 * limitations under the License.
 */

 /* --------------------------------------------------------------------------- */
 /*       OpenAjax Alliance Rules National Language Support (NLS): English      */
 /* --------------------------------------------------------------------------- */
   

 OpenAjax.a11y.all_rules.addRulesNLSFromJSON('en-us', {

   rule_scope: ['unknown', 'Element', 'Page', 'Website'],
   
   message_severities: {
     MUST : 'must', 
     SHOULD: 'should'
   },
   
   missing_message : "The following message id is not defined: ",

   rule_categories: {
          '1': 'Abbreviations',
          '2': 'Audio',  
          '4': 'Color',
          '8': 'Controls',
         '16': 'Objects',
         '32': 'Headings',
         '64': 'Images',
        '128': 'Landmarks',
        '256': 'Language',
        '512': 'Layout',
       '1024': 'Links',
       '2048': 'Lists',
       '4096': 'Navigation',
       '8192': 'Scripting',
      '16384': 'Tables',
      '32768': 'Title',
      '65536': 'Timing',
     '131072': 'Video',
     '262144': 'Widgets'
   },
   
   DEFAULT_RULE_RESULT_MESSAGES: {
     MANUAL_CHECKS_SINGULAR:       '1 element requires manual checking',
     MANUAL_CHECKS_PLURAL:         '%N_MC elements require manual checking',
     ALL_PASS_SINGULAR:            '1 element passed',
     ALL_PASS_PLURAL:              '%N_P elements passed',
     SOME_FAIL:                    '%N_F out of %N_T elements failed',
     CORRECTIVE_ACTION_SINGULAR:   '1 element needs corrective action',
     CORRECTIVE_ACTION_PLURAL:     '%N_F elements need corrective action',
     ALL_FAIL_SINGULAR:            '1 element failed',
     ALL_FAIL_PLURAL:              'All %N_F elements failed',
     NOT_APPLICABLE:               'No applicable elements'
   },

   SO: ', so ',

   AND: ' and ',

   //
   //  OAA Rules title and message string National Language Support (NLS)
   //
   rules: {
       CONTROL_1: {
           ID:                    'Form Control 1',
           DEFINITION:            '@textarea@, @select@ and @input@ elements of type @text@, @password@, @checkbox@, @radio@ and @file@ %s have an accessible label',
           SUMMARY:               'Controls %s have labels',
           TARGET_RESOURCES_DESC: 'User interface form controls',
           RULE_RESULT_MESSAGES: {
             ALL_PASS_SINGULAR:            'Form control has label',
             ALL_PASS_PLURAL:              '%N_P form controls have a label',
             SOME_FAIL:                    '%N_F out of %N_T form controls do NOT have a label',
             CORRECTIVE_ACTION_SINGULAR:   'add label to form control missing a label',
             CORRECTIVE_ACTION_PLURAL:     'add labels to %N_F form controls missing a label',
             ALL_FAIL_SINGULAR:            'form control does NOT have label',
             ALL_FAIL_PLURAL:              'All %N_F form controls do NOT have a label',
             NOT_APPLICABLE:               'No form controls on this page'              
           },
           NODE_RESULT_MESSAGES: {
             PASS_1:                '%1 control has label',
             CORRECTIVE_ACTION_1:   'Add label to %1 control',
             HIDDEN:                '%1 control is hidden from assistive technologies.',
             TARGET_RESOURCES_DESC: '@textarea@, @select@ and @input@ elements of type @text@, @password@, @checkbox@, @radio@ and @file@'
           },  
           PURPOSE: [
             'A label associated with a form control insures that information about the form control is spoken by screen readers when it receives focus'                   
           ],
           TECHNIQUES: [
             'The preferred technique for labeling for controls is using the @label@ element and referencing the @id@ attribute value of the form control element',
             'Use the @label@ element to encapsulate the form control element',
             'In special cases, use @aria-labelledby@ attribute to reference the id(s) of the elements on the page that describe the purpose of the form control element',
             'In special cases, use @aria-label@ attribute to provide a explicit text description of the purpose of the form control element'
           ],
           MANUAL_CHECKS: [
           ],
           INFORMATIONAL_LINKS: [
             { type:  OpenAjax.a11y.REFERENCES.SPECIFICATION, 
               title: 'HTML 4.01 Specification: The @label@ element', 
               url:   'http://www.w3.org/TR/html4/interact/forms.html#edef-LABEL'
             },
             { type:  OpenAjax.a11y.REFERENCES.WCAG_TECHNIQUE, 
               title: 'H44: Using label elements to associate text labels with form controls', 
               url:   'http://www.w3.org/TR/2010/NOTE-WCAG20-TECHS-20101014/H44'
             },                             
             { type:  OpenAjax.a11y.REFERENCES.WCAG_TECHNIQUE, 
               title: 'H65: Using the title attribute to identify form controls when the label element cannot be used', 
               url:   'http://www.w3.org/TR/2010/NOTE-WCAG20-TECHS-20101014/H65'
             },                             
             { type:  OpenAjax.a11y.REFERENCES.WCAG_TECHNIQUE, 
               title: 'H71: Providing a description for groups of form controls using fieldset and legend elements', 
               url:   'http://www.w3.org/TR/2012/NOTE-WCAG20-TECHS-20130103/H71'
             },                             
             { type:  OpenAjax.a11y.REFERENCES.TECHNIQUE, 
               title: 'iCITA Best Practices: Labels for Form Controls Overview', 
               url:   'http://html.cita.illinois.edu/nav/form/'
             }                            
           ]
       },
       CONTROL_2: {
           ID:                    'Form Control 2',
           DEFINITION:            'Every @input@ type @image@ %s have an @alt@ or @title@ attribute with content',
           SUMMARY:               'Image button %s have alt content',
           TARGET_RESOURCES_DESC: 'input elements of type image',
           RULE_RESULT_MESSAGES: {
             ALL_PASS_SINGULAR:            '@input[type="image"]@ form control has @alt@ attribute with content',
             ALL_PASS_PLURAL:              '%N_P @input[type="image"]@ form controls have @alt@ attribute with content',
             SOME_FAIL:                    '%N_F out of %N_T @input[type="image"]@ form controls do NOT have an @alt@ attribute with content',
             CORRECTIVE_ACTION_SINGULAR:   'add @alt@ attribute and/or content to @input[type="image"]@ form control missing a @alt@ attribute with content',
             CORRECTIVE_ACTION_PLURAL:     'add @alt@ attribute and/or content to %N_F @input[type="image"]@ form controls missing a @alt@ attribute with content',
             ALL_FAIL_SINGULAR:            '@input[type="image"]@ form control does NOT have an @alt@ attribute with content',
             ALL_FAIL_PLURAL:              'All %N_F @input[type="image"]@ form controls do NOT have an @alt@ attribute with content',
             NOT_APPLICABLE:               'No @input[type="image"]@ form controls on this page'
           },
           NODE_RESULT_MESSAGES: {
             PASS_1:                'Image button has label',
             CORRECTIVE_ACTION_1:   'Add @alt@ attribute with text content',
             CORRECTIVE_ACTION_2:   'Add text content to the @alt@ attribute',
             HIDDEN:                'Image button is hidden from assistive technologies.'
           },  
           PURPOSE: [
             'A label associated with a form control insures that information about the form control is spoken by screen readers when it receives focus'                   
           ],
           TECHNIQUES: [
             'The preferred technique for labeling for controls is using the @label@ element and referencing the @id@ attribute value of the form control element',
             'Use the @label@ element to encapsulate the form control element',
             'In special cases, use @aria-labelledby@ attributes to reference the id(s) of the elements on the page that describe the purpose of the form control element',
             'In special cases, use @aria-label@ attributes to provide a explicit text description of the purpose of the form control element'
           ],
           MANUAL_CHECKS: [
           ],
           INFORMATIONAL_LINKS: [
             { type:  OpenAjax.a11y.REFERENCES.SPECIFICATION, 
               title: 'HTML 4.01 Specification: The @label@ element', 
               url:   'http://www.w3.org/TR/html4/interact/forms.html#edef-LABEL'
             },
             { type:  OpenAjax.a11y.REFERENCES.WCAG_TECHNIQUE, 
               title: 'H36: Using alt attributes on images used as submit buttons', 
               url:   'http://www.w3.org/TR/2012/NOTE-WCAG20-TECHS-20130103/H36'
             },                             
             { type:  OpenAjax.a11y.REFERENCES.TECHNIQUE, 
               title: 'iCITA Best Practices: Labels for Form Controls Overview', 
               url:   'http://html.cita.illinois.edu/nav/form/'
             }                            
           ]
       },
 
 ....

Ruleset Object

Ruleset Object Summary

Ruleset Object Example

/**
 * Copyright 2011-2013 OpenAjax Alliance
 *
 * Licensed under the Apache License, Version 2.0 (the "License");
 * you may not use this file except in compliance with the License.
 * You may obtain a copy of the License at
 *
 * http://www.apache.org/licenses/LICENSE-2.0
 *
 * Unless required by applicable law or agreed to in writing, software
 * distributed under the License is distributed on an "AS IS" BASIS,
 * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
 * See the License for the specific language governing permissions and
 * limitations under the License.
 */

/* --------------------------------------------------------------------------- */
/* OpenAjax Alliance (OAA) Ruleset for WCAG 2.0 (Beta)           */
/* --------------------------------------------------------------------------- */
   

OpenAjax.a11y.all_rulesets.addRuleset('WCAG20', {
 
 title : {
   'default' : "ARIA Strict: General",
   'en-us'   : "ARIA Strict: General"
 },   
 
 description : {
   'default' : "ARIA strict ruleset is based on best practice design patterns to improve accessibility and usability with the features available in HTML and ARIA specifications to meet WCAG 2.0 success criteria.",
   'en-us'   : "ARIA strict ruleset is based on best practice design patterns to improve accessibility and usability with the features available in HTML and ARIA specifications to meet WCAG 2.0 success criteria."  
 },
 
 author : {
   name : "OpenAjax Accessibility Working Group",
   url  : "/member/wiki/Accessibility"
 }, 
 
 ruleset_id    : "ARIA_STRICT_GENERAL",  
 version       : "0.7 Beta",
 last_updated  : "2012-01-13",

 // Assignement of rules to WCAG 2.0 requirements

 rule_mappings : {
  AUDIO_1 : {
      required : true,
      enabled  : true
    },
  AUDIO_2 : {
      required : true,
      enabled  : true
    },
  COLOR_1 : {
      required : true,
      enabled  : true
    },
  COLOR_2 : {
      required : true,
      enabled  : true
    },
  CONTROL_1 : {
      required : true,
      enabled  : true
    },
  CONTROL_2 : {
      required : true,
      enabled  : true
    },
  CONTROL_3 : {
      required : true,
      enabled  : true
    },
  CONTROL_4 : {
      required : true,
      enabled  : true
    },
 
  ....