Adding summary information to a DataGrid

Important Information about Techniques

See Understanding Techniques for WCAG Success Criteria for important information about the usage of these informative techniques and how they relate to the normative WCAG 2.1 success criteria. The Applicability section explains the scope of the technique, and the presence of techniques for a specific technology does not imply that the technology can be used in all situations to create content that meets WCAG 2.1.

Applicability

Note

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 1.3.1: Info and Relationships (Sufficient as a way to meet an unwritten technique).

Description

The objective of this technique is to provide a brief overview of how data has been organized into a DataGrid or a brief explanation of how to navigate the grid.

As Flash does not provide a summary attribute, this descriptive text will be added to the DataGrid's accessible desription instead. This approach will make the summary information available to people who use screen readers; the information is not displayed visually.

The summary is useful when the table has a complex structure (for example, when there are several sets of row or column headers, or when there are multiple groups of columns or rows). The summary may also be helpful for simple data tables that contain many columns or rows of data.

Examples

Example 1: Adding a summary to a DataGrid in the Accessibility control panel

This is an example of a DataGrid being added to the stage in Flash Professional from the Components panel. The description field is used in the Accessibility control panel in Flash to serve as the summary information for the DataGrid.

  1. Create a new Flash file (.fla) or open an existing one to put a DataGrid into.
  2. Open the Flash components panel from the Window menu
  3. Drag a DataGrid component onto the stage and position as desired.
  4. Select the DataGrid component and add the summary information to the description field for DataGrid, using the Accessibility control panel.

Example 2: Adding a summary to a DataGrid with ActionScript 3

This is a basic AS3 example of a DataGrid component that has summary text added as its accessible description. 

import fl.accessibility.DataGridAccImpl;
import fl.controls.DataGrid;
import fl.controls.Label;
import fl.data.DataProvider;
import flash.accessibility.Accessibility;
import flash.accessibility.AccessibilityProperties;
import flash.system.Capabilities;

DataGridAccImpl.enableAccessibility();

createGrid();

//set the summary text as accessible description
var accProps: AccessibilityProperties = new AccessibilityProperties();
accProps.description = "The first column shows the player's name," +
  "the second and third column shows the player's gaming statistics." +
  "the fourth column shows the player's year as FR (Freshman), JR (junior) or SO (Sophomore)." +
  "The fifth column shows the player's home city and state";
aDg.accessibilityProperties = accProps;
if (Capabilities.hasAccessibility)
Accessibility.updateProperties();

function createGrid() {
  
  //create and add the components
  var aDg: DataGrid = new DataGrid();
  addChild(aDg);
  aDg.move(50, 50);
  bldRosterGrid(aDg);
  
  var aRoster: Array = new Array();
  aRoster =[ {
    Name: "Wilma Carter", Bats: "R", Throws: "R", Year: "So", Home: "Redlands, CA"
  }, {
    Name: "Sue Pennypacker", Bats: "L", Throws: "R", Year: "Fr", Home: "Athens, GA"
  }, {
    Name: "Jill Smithfield", Bats: "R", Throws: "L", Year: "Sr", Home: "Spokane, WA"
  }, {
    Name: "Betty Kay", Bats: "R", Throws: "R", Year: "Fr", Home: "Palo Alto, CA"
  },];
  aDg.dataProvider = new DataProvider(aRoster);
  aDg.rowCount = aDg.length;
}

function bldRosterGrid(dg: DataGrid) {
  dg.setSize(400, 300);
  dg.columns =[ "Name", "Bats", "Throws", "Year", "Home"];
  dg.columns[0].width = 120;
  dg.columns[1].width = 50;
  dg.columns[2].width = 50;
  dg.columns[3].width = 40;
  dg.columns[4].width = 120;
};

For a demonstration, see the working version of Adding a summary to a DataGrid with ActionScript 3. The source of Adding a summary to a DataGrid with ActionScript 3 is available.