Applicability
- Adobe Flash Professional version MX and higher
- Adobe Flex
Adobe has plans to stop updating and distributing the Flash Player at the end of 2020, and encourages authors interested in creating accessible web content to use HTML.
This technique relates to:
- Success Criterion 3.3.1: Error Identification (Sufficient)
- Success Criterion 3.3.3: Error Suggestion (Sufficient)
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.
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.
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
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 source of Validating a text field is available.
Tests
Procedure
When a Flash movie provides interactive forms that can be submitted, confirm that:
- The validation warnings are placed next to the control visually.
- The validation warnings are added to the accessible name or description of each control.
Expected Results
- #1 and #2 are true