Techniques for WCAG 2.0

Skip to Content (Press Enter)

This document is a draft, and is designed to show changes from a previous version. It is presently showing added text,changed text,deleted text,[start]/[end] markers,and Issue Numbers.

Hide All Edits   |   Toggle Deletions  |   Toggle Issue Numbers   |   Toggle [start]/[end] Markers   |   Show All Edits

Changes are displayed as follows:

-

FLASH12: Providing client-side validation and adding error text via the accessible description

Applicability

This technique relates to:

User Agent and Assistive Technology Support Notes

See User Agent Support for Flash for general information on user agent support.

Description

The objective of this technique is to validate user input as values are entered for each field, by means of client-side scripting. If errors are found, a description is added to the controls that have invalid data. Visually, the description will be placed adjacent to the control. Additionally, the error message text is added to the control's accessible description so that it is readable by assistive technology when the control receives focus.

Editorial Note: In the wiki this technique was indicated as applying to SC 3.3.4. However, don't see how that fits and removed that.

Examples

Example 1: Validating a text field

In this example, a sample form is shown with two text fields ('name' and 'zip code'). Both fields are required. When the form's submit button is pressed, the values of the text fields will be validated. If a textfield contains an invalid value, an _accProps object is created for the textfield, and its description property is set the error message.

Note: Instead of using the accessible description, the error text can also be added to the accessible name (_accProps.name), which is supported by a wider range of assistive technology than the _accProps.description property.

ActionScript 2.0 Code

Example Code:

import flash.accessibility. *;
import mx.accessibilty.ButtonAccImpl;
import mx.controls.Alert;
import mx.accessibility.AlertAccImpl;

AlertAccImpl.enableAccessibility();
ButtonAccImpl.enableAccessibility;

resetTextFieldAccNames();
Accessibility.updateProperties();

submit_btn.addEventListener("click", handleClick);
function handleClick(e) {
  //reset values
  resetTextFieldAccNames();
  resetTextFieldAccDescriptions();
  resetErrorLabels();
  //perform validation
  var errors =[];
  if (name_txt.text == '')
    errors.push([name_txt, "You must enter your name", name_error_lbl]);
  if (zipcode_txt.text == '')
    errors.push([zipcode_txt, "You must enter your zip code", zipcode_error_lbl]);
  else if (zipcode_txt.text.length != 5 || isNaN(zipcode_txt.text))
    errors.push([zipcode_txt, "Zip code must be 5 digits", zipcode_error_lbl]);
  
  //add validation error messages, if any
  var field, errorMsg, errorLabel;
  if (errors.length > 0) {
    //loop over encountered errors
    for (var i = 0; i < errors.length; i++) {
      field = errors[i][0];
      errorMsg = errors[i][1];
      errorLabel = errors[i][2];
      
      updateAccDescription(field, "Warning: " + errorMsg);
      errorLabel.text = errorMsg;
    }
  } else {
    Alert.show("Form field values were entered correctly");
  }
  Accessibility.updateProperties();
}

function updateAccName(obj, newName: String) {
  if (! obj._accProps)
  obj._accProps = new Object();
  obj._accProps.name = newName;
}

function updateAccDescription(obj, newDescription: String) {
  if (! obj._accProps)
  obj._accProps = new Object();
  obj._accProps.description = newDescription;
}

function getAccName(obj) {
  return obj._accProps? obj._accProps.name: "";
}

function resetTextFieldAccNames() {
  updateAccName(name_txt, "name, required");
  updateAccName(zipcode_txt, "zip code, required");
}

function resetTextFieldAccDescriptions() {
  updateAccDescription(name_txt, "");
  updateAccDesciption(zipcode_txt, "");
}

function resetErrorLabels() {
  name_error_lbl.text = "";
  zipcode_error_lbl.text = "";
}

This approach is demonstrated in working version of Validating a text field. The working version of Validating a text field is available.

Editorial Note: These files seem to be different from what was expected in the wiki. The files I was expecting were named client_side_validation_flash_forms_using_accessible_description_as2.*, while what we have are client_side_validation_flash_forms_using_alert_as2.*. And reading over the example in the wiki and looking at the example files, it seems they don't match. The example files use an alert, but the wiki describes updating the accessible name. The example seems good, but like it applies to a different technique, which maybe we should document. Either that, we should update the technique, particularly the example it claims to be a working example of, or get the correct example files in place.

Tests

Procedure

When a Flash movie provides interactive forms that can be submitted, confirm that:

  1. The validation warnings are placed next to the control visually.

  2. The validation warnings are added to the accessible name or description of each control.

Expected Results