What is Software? | What is Education? | What is Technology? | What is Research? | What is Wi-Fi? | What is Communication? | What is Customer Service?

Free SEO Tutorials & Help

Tutorials:   Adobe Flash   Adobe Photoshop   CorelDRAW   SEO  

Site Map

Website Development | Cable & Broadband Magazine | Solutions for Higher Education | Auction Anything Online

Adobe Flash Help & Tutorials

 Back to Topics

 

 How to Create Accessible Content in Flash

Basic Tasks: Create Accessible Flash Content

Set up your workspace

Make your document accessible to screen readers

Provide a document title and description

Provide a title and description for instances

Change static text to dynamic text for accessibility

Checking for Flash Player

Control the tab order and reading order

About testing your document with screen readers

Summary

Basic Tasks: Create Accessible Flash Content

TOP

With knowledge of a few design techniques and accessibility features in Macromedia Flash Basic 8 and Macromedia Flash Professional 8, you can create Flash content that is accessible to all users, including those with disabilities.

This lesson demonstrates how to create an accessible document, designed for use with screen readers (which read web content aloud for visually impaired users) and other assistive technologies.

 

Set up your workspace

#TOP

First, you'll open the start file for the lesson and set up your workspace to use an optimal layout for taking lessons.

  1. To open your start file, in Flash select File > Open and navigate to the file:

    • In Windows, browse to boot drive\Program Files\Macromedia\Flash 8\Samples and Tutorials\Tutorial Assets\Basic Tasks\Create Accessible Content and double-click accessibility_start.fla.

    • On the Macintosh, browse to Macintosh HD/Applications/Macromedia Flash 8/Samples and Tutorials/Tutorial Assets/Basic Tasks/Create Accessible Content and double-click accessibility_start.fla

  2. Select File > Save As and save the document with a new name, in the same folder, to preserve the original start file.

    NOTE As you complete this lesson, remember to save your work frequently.

  3. Select Window > Workspace Layout > Default to set up your workspace for taking lessons.

 

Make your document accessible to screen readers

TOP

You'll now specify that your document is accessible to screen readers, and provide a name and description of your document that a screen reader can read aloud.

  1. With nothing selected on the Stage, select Window > Other Panels > Accessibility.

  2. In the Accessibility panel, verify that the following options are selected:

    Make Movie Accessible is selected by default and allows Flash Player to pass accessibility information to a screen reader.

    Make Child Objects Accessible allows Flash Player to pass accessibility information nested inside a movie clip to a screen reader. If this option is selected for the entire document, you can still hide child objects for individual movie clips.

    Auto Label associates text next to another Stage object, such as an input text field, as a label or title for that element.

 

Provide a document title and description

TOP

In the Accessibility panel for the document, you can enter a name and description for your document for screen readers.

  1. In the Name text box, enter Trio ZX2004. In the Description text box, enter Corporate website about the Trio ZX2004. Includes 6 navigation buttons, overview text, and an animated car.

 

Provide a title and description for instances

TOP

Now that you've provided information about the entire document, you can provide information about Stage objects included in the document.

  1. Select the Trio Motor Company logo along the top of the Stage. In the Accessibility panel, enter Trio Motor Company in the Name text box. Do not enter anything in the Description text box.

    Not every instance needs a description, which is read with the title information. If the title name sufficiently describes the function of the object, you don't need to include a description.

  2. With the Accessibility panel still open, select the Dealers button on the Stage.

    Information in the Accessibility panel changes to reflect Accessibility options for the selected object.

    In the Accessibility panel for the Dealers button, you do not need to provide a name in the Title text box, because the button includes a text label that the screen reader will read. If you did not want the screen reader to read the text in the button, you could deselect Auto Label when you set up accessibility for the document.

  3. In the Description text box, enter Links to a web page with information about dealers nationwide.

The other buttons also include text, which the screen reader will read aloud; therefore, you do not need to provide a title. Since the title of the buttons is fairly self-explanatory, there's no need for you to include descriptions.

 

Change static text to dynamic text for accessibility

TOP

Screen readers follow a specific order when reading web content. However, when content on the web page changes, most screen readers will begin reading the web content all over again. This screen reader feature can be problematic when Flash content contains, for example, animation, which could cause the screen reader to begin again each time there's a change in the animation.

Fortunately, you can use the Accessibility panel to either deselect Make Object Accessible, so that the screen reader does not receive accessibility information about the object, or deselect Make Child Objects Accessible, so that the screen reader does not receive accessibility information nested within a movie clip. You'll now do the latter so that users will know the web page contains an animation, and the animation won't cause the screen reader to constantly refresh.

  1. On the Stage, click the car, which is the safety_mc movie clip instance.

  2. In the Accessibility panel, deselect Make Child Objects Accessible. In the Name text box, enter Trio ZX2004 animation. In the Description text box, enter Animation that includes three views of the Trio ZX2004.

 

Checking for Flash Player

TOP

Static text is accessible to screen readers. However, you cannot provide static text with an instance name, which is required to control the tab order and reading order. You'll change the overview text paragraph to dynamic text and specify accessibility options.

  1. On the Stage, select the text that begins "The TRIO ZX2004 provides the ultimate in efficiency ...."

  2. The Accessibility panel changes to indicate that you cannot apply accessibility features to this selection.

  3. In the Property inspector, select Dynamic Text from the Text Type pop-up menu.

  4. Accessibility settings now appear in the Accessibility panel.

  5. In the Instance name text box, enter text9_txt.

NOTE To specify a tab order and reading order, which you'll do next, you must provide an instance name for all instances. The instance name must be unique in your document.

 

Control the tab order and reading order

TOP

You can create a tab order that determines the order in which objects receive focus when the users press the Tab key. You can also control the order in which a screen reader reads information about the object (known as the reading order). You can create both the tab and reading order using the tabIndex property in ActionScript (In ActionScript, the tabIndex property is synonymous with the reading order). If you have Flash Professional 8, you can use the Accessibility panel to specify the tab order, but the tab index that you assign does not necessarily control the reading order.

To create a reading order, you must assign a tab index to every instance in ActionScript.

If you have Flash Professional, creating a tab order is as easy as entering a number in the Tab Index text box. You can then view the tab order directly on the Stage.

To create a tab order in this lesson, use one of the following procedures. To create a reading order along with a tab order, follow the procedure to control the tab order and reading order using ActionScript.

If you have Flash Professional 8, you can follow this procedure to create a tab order using the Accessibility panel:

  1. With the Accessibility panel open, select the logo_mc instance at the top of the Stage. In the Accessibility panel, enter 1 in the Tab Index text box.
  2. Continue to select each instance on the Stage and enter a tab order number in the Tab Index text box, using information from the following table:

Instance name

Enter the following number in the Tab Index text box

logo_mc

dealers_btn

orders_btn

research_btn

text4_txt (the text above theOverview button that reads TRIO ZX2004)

overview_btn

powerplant_btn

news_btn

safety_mc

text8_txt

text9_txt

bevel_mc (the bar along the bottom of the Stage)

1

2

3

4

5

6

7

8

9

10

11

12

If you have Flash Professional 8, follow this procedure to view a tab order:

  • Select View > Show Tab Order.

    The tab index number that you entered appears next to the instance on the Stage.

NOTE A tab order created with ActionScript, rather than the Accessibility panel, does not appear when Show Tab Order is enabled.

Follow this procedure to control the tab order and reading order using ActionScript:

  1. In the Timeline, select Frame 1 of the Actions layer.
  2. In the Actions panel (Window > Actions), view the ActionScript that creates the tab index for each instance in the document.
  3. If you're using Flash Basic 8, or if you're using Flash Professional 8 and you did not create the tab index using the Accessibility panel, delete the /* and */ in the script to uncomment the script:

this.logo_mc.tabIndex = 1;

this.dealers_btn.tabIndex = 2;

this.orders_btn.tabIndex = 3;

this.research_btn.tabIndex = 4;

this.text4_txt.tabIndex = 5;

this.overview_btn.tabIndex = 6;

this.powerplant_btn.tabIndex = 7;

this.news_btn.tabIndex = 8;

this.safety_mc.tabIndex = 9;

this.text8_txt.tabIndex = 10;

this.text9_txt.tabIndex = 11;

this.bevel_mc.tabIndex = 12;

 

About testing your document with screen readers

TOP

You already know the importance of regularly testing your Flash document as you create it to ensure it performs as expected. Frequent testing is even more important when you design a document to work with assistive technologies such as screen readers. In addition to testing tab order in your SWF file, you should also test your tab order in various browsers; some browsers differ in how the user tabs to or out of Flash content. For information about resources to test your document with a screen reader, see "Testing accessible content" in Using Flash.

 

Summary

TOP

Congratulations on creating accessible Flash content. In a few minutes, you learned how to accomplish the following tasks:

  • Specify that your document is accessible to screen readers

  • Provide a document title and description

  • Provide a title and description for document instances

  • Specify that screen readers ignore elements in your document

  • Change static text to dynamic text for accessibility

  • Control the order in which users navigate with the Tab key

  • Control the reading order with ActionScript
     

 

Copyright ADOBE - All Rights Reserved Worldwide

 

 

More Topics:

Working with Flash Documents

How to work in Flash WorkSpace

Working with Projects in Flash

Process to Build your First Application in Flash

Using Symbols, Instances and Library Assets in Flash

How to Build Video Player in Flash

How to Work with Color, Strokes and Fills in Flash

How to Create Document in Flash

What is Vector and Bitmap Graphics in Flash

How to Create a Banner in Flash, Part 1

How to Work with Text in Flash

How to Create a Banner in Flash, Part 2

How to Use Imported Artwork in Flash

How to Create a Banner in Flash, Part 3

How to Work with Graphic Objects in Flash

How to Work with Layers in Flash

How to Use Filters and Blends

Working with Graphics in Flash

What is Accessibility Features in Flash

How to Create Motion (Shape Tween & Motion Tween) in Flash

How to Create an Application in Flash

What is Masking in Flash

How to Work with Video in Flash

How to Use Layout Tools in Flash

What are Behaviors in Flash

How to Work with Sound in Flash

How to Create Symbols and Instances in Flash

What is ActionScript in Flash

How to Write ActionScript With Script Assist in Flash

How to Add Button Animation and Navigation in Flash

What is Data Integration in Flash

How to Work with Screens

How to Create a Presentation with Screens

What is Extending Flash

How to Create Multilanguage Text in Flash

How to Create Graphics: Draw in Flash

What is Flash Lite

Ways of Data Integration

How to Create Graphics: Create a Timeline Animation in Flash

Getting Started with Flash Lite in Flash

How to Publish Flash Documents

How to Create Graphics: Making Animations with Easing

Learning Flash Lite 1.X ActionScript in Flash

How to Export Flash Content and Images from Flash

How to Create Graphics: Applying Gradients in Flash

Process of Writing and Editing ActionScript 2.0 in Flash

How to Create Accessible Content in Flash

How to Create Graphics: Apply Graphic Filters and Blends

What is Data and Data Types in Flash

Process of Printing from SWF Files in Flash

Using ActionScript: How to Use Script Assist mode in Flash

Learn Syntax and Language Fundamentals in Flash

How to Create E-learning Content in Flash

Using ActionScript: How to Write Scripts in Flash

Working with Functions and Methods in Flash

Process of Using Templates in Flash

Using ActionScript: Process of Adding Interactivity in Flash

What are Classes in Flash

Control Tag Summary of XML to UI in Flash

Using ActionScript: How to Create a Form with Conditional Logic and Send Data in Flash

What is Inheritance in Flash

What is Data Integration: Overview

Using ActionScript: How to Work with Objects and Classes in Flash

Overview on Interfaces in Flash

What is Data Integration: Using XML for a Timesheet

How to Work with Text and Strings in Flash

How to use Handling Events in Flash

What is Data Integration: Using XUpdate to Update the Timesheet

Learning Animation, Filters and Drawings in Flash

How to Work with Movie Clips in Flash

How to Create Interaction with ActionScript in Flash

How to Work with Images, Sound, and Video in Flash

How to Work with External Data in Flash

What is Security in Flash

How to Debug Applications in Flash

List of Error Messages in Flash

Using Object-Oriented Programming with ActionScript 1.0 in Flash

How to Write Scripts for Earlier Versions of Flash Player in Flash

List of all Keyboard Keys and Key Code Values for using in Flash

Terminology

Introduction to Components in Flash

What are Components in Flash

How to Create an Application with Components

How to Work with Components in Flash

How to Handle Component Events in Flash

How to Customize Components in Flash

How to Create Components in Flash

What is Collection Properties in Flash