Text Equivalents

Whether using ActionScript or the Accessibility panel in Macromedia Flash, creating accessible Flash content can be quick and easy. Using text and text equivalents, designers and developers can create exciting content for users of screen readers and other assistive technologies.

At the same time, the screen reader environment poses new challenges. Just as designers and developers are mindful of the user experience in a browser or stand-alone environment, it is important to consider how users of assistive technologies such as screen readers will interact with Macromedia Flash content.

Using Microsoft Active Accessibility (MSAA), Macromedia Flash Player 8 exposes Macromedia Flash content to the screen reader. Text contained within a Macromedia Flash movie is exposed by default; however, graphic elements are not exposed automatically. As in HTML, graphic elements require a text equivalent that is read by the screen reader in place of the image. Using ActionScript or the Accessibility panel in Macromedia Flash, designers and developers can easily assign text equivalents for elements in Macromedia Flash content. In most cases, the greatest challenge is deciding when to use text equivalents and what they should say.

This document explains when and how to use the Accessibility panel in Macromedia Flash to add text equivalents to elements of a Macromedia Flash movie.

Text in Macromedia Flash Player 8

By default, Macromedia Flash Player 8 exposes all text elements to the screen reader user. Designers and developers do not need to make any modifications. For example, the simple Macromedia Flash banner below was created by adding text to the stage. A screen reader would read this banner as “Trio Motor Company.”

Adding Text Equivalents in Macromedia Flash 8

Now, take a look at another example that will require a text equivalent. In the example below, the Macromedia Flash logo is displayed. The entire logo is not actually text, but a graphic.

Since the logo is not text, a screen reader will not read it. A text equivalent should be provided.

To add a text equivalent, use the Accessibility panel. Make sure the logo is selected. Before adding a text equivalent to this item, the object must be saved as a symbol in the library. Since text equivalents are not supported for graphic symbols, save the object as a movie symbol or a button.

To bring the Accessibility panel to the front, press Alt + F2.

Notice the two fields titled “Name” and “Description.” In general terms, the Name field is used for shorter text equivalents and the Description field is used for longer ones. (This parallels the use of the ‘alt’ and ‘longdesc’ attributes in HTML.) In more practical terms, the difference is less important since screen readers read both by default.

Deciding on the proper text equivalent is not always easy. In most cases, it is wise to consider the purpose of the image rather than giving it a merely literal description. In the example above, a literal description may read, “Red letter f.” This would not be particularly helpful to a screen reader user. By contrast, the phrase “Macromedia Flash” might be a more meaningful equivalent for the logo.

In this case a description would not likely be necessary. Descriptions are best used in cases where the text equivalent needs to be longer than about 50 characters. One thing to keep in mind is that the description is generally read following the name. If the content does not flow when the two are read together, the designer/developer may choose not to use a name, only a description of the object.

Accessible Elements of a Macromedia Flash Movie

By default, Macromedia Flash 8 is able to make text, input text fields, buttons, movie clips, and even make entire movies accessible. While text elements do not require modification, other elements do. Designers and developers may use the Accessibility panel in Macromedia Flash to add a text equivalent or even to hide elements from assistive technologies.

In the example below, the Macromedia Flash movie shows a moon orbiting a planet. In this case, it is not appropriate to provide a text equivalent for the moon and the planet separately. Instead, the relationship between these two elements needs to be conveyed to the user.

To provide a single text equivalent for this entire movie, first make sure that nothing in the movie is selected. In the name field, add the text equivalent “Moon orbiting planet.” The name may differ depending on the context, but this equivalent will suffice for our purposes here. Note that this text equivalent conveys not only the contents of the movie but how the separate elements relate to one another.

To group the contents of this movie formally together, deselect ‘Make Child Objects Accessible.’ This step tells the screen reader to use this text equivalent for the entire movie.

With a host of new features, Dreamweaver 8 makes it easier than ever to build accessible tables for data. Using the Accessibility preferences, Dreamweaver 8 prompts designers and developers to provide captions, headers, and summary information as the table is inserted.

Here’s a basic overview of how to create accessible tables using Dreamweaver 8, with discussions on the following topics:

• Screen Readers and Tables
• Inserting a Table
• Adding Captions and Summaries
• Specifying Headers
• Screen Readers and Tables

Before creating accessible tables, it’s important to understand how screen readers interact with tables. First of all, tables are generally used in one of two ways: to control the layout of a page and to present data.

Using tables for page layout is an easy way to create columns, align elements on a page, or control page width. Earlier versions of screen readers had great difficulty handling tables of any kind, so designers were discouraged from using tables for layout. The latest generation of screen readers now works more effectively with tables.
In general, current versions read tables row by row, from left to right. As long as the contents of the page make sense when read across, you can use tables for page layout.

Tables used to present data are read the same way. The screen reader will read the top row from left to right, and continue reading across each of the following rows. One problem with the current method is the difficulties screen reader users may have in remembering column headings during the reading, as the following example illustrates:

A screen reader would likely read this table as follows:

Online Training Courses
Course Name
Instructor
Summary
Code
Introduction to the WWW
Hannah Marsh
This course will provide an overview of using the World Wide Web
mw103
Cascading Style Sheets
Luis Gandin
This course provides an introduction to text formatting using CSS
mw105
Flash MX
Alan Foley
This course provides an introduction to application development using Flash MX
mw203
ActionScript
Lexie Frances
This course reviews the advanced techniques for scripting in Flash MX
mw303

Without the column headers to help keep track of the purpose of each piece of information, it’s difficult to make sense of the table. To help organize the information, screen readers often have a table-reading mode. In this mode, the column or row headers (if they are properly marked up) may be read before each piece of data. Using the table-reading mode, the first two rows of the same table might be read as follows:

Online Training Courses
Course Name
Introduction to the WWW
Instructor
Hannah Marsh
Summary
This course will provide an overview of using the World Wide Web
Code
mw103
Course Name
Cascading Style Sheets
Instructor
Luis Gandin
Summary
This course provides an introduction to text formatting using CSS
Code
mw105

It’s much easier to grasp and keep track of information presented in this mode, with the header read before each piece of information. In addition, screen reader users may also read a table summary, which provides a quick overview of the table to help orient users to the information presented.

Inserting a Table

When you add a table, you’ll be asked to provide a caption, summary information, and header layout, in addition to the dimensions of the table itself.

Adding Captions and Summaries

The following dialog box appears when you insert a table on the page:

The first six options in this dialog box are Rows, Columns, Width, Border, Cell Padding, and Cell Spacing. For more detailed information about these properties, see Setting Table Properties in Dreamweaver 8 Help.

Enter a table title in the Caption text box. The title (caption) should be brief and describe the information contained in the table. The caption will be displayed as a table title by default. You can use the Align Caption option to align the caption to the left or right, or to place it at the bottom of the table.

The Summary text box allows you to describe the data presented in the table. This description should give users a general understanding of the information without data-specific details. Summary text will not be visible on the page.

Specifying Headers

The use of headers in a table helps organize the information read by screen readers. The Header option shown in the preceding dialog box enables you to easily specify headers and link the table data to those headers. However, this feature will only work with relatively simple tables (one or two levels of headings). More complex tables (three or more levels of headings) require a more complex HTML mark-up than is represented here.

The Heading text box offers four choices. The first selection, "None", specifies no headers. The second Heading selection, "Left", inserts row headers, i.e., the first cell in each row is marked up as a header. Here’s an example of a table with row headers:

The third Heading selection, "Top", inserts column headers, i.e., the first cell in each column is marked up as a header. You can see an example of this selection at the beginning of this document. The final Heading selection lets you change both the first row and first column of the table into headers. Here’s an example of a table with row-and-column headers: