Accessible Flash A Web Accessibility Center Presentation Rick Fellers Presented by Rick Fellers August 18, 2004

Accessible FlashAccessible Flash

A Web Accessibility Center PresentationA Web Accessibility Center Presentation

Presented by Rick FellersRick FellersAugust 18, 2004

August 18, 2004 OSU-WAC Flash AccessibilityPresented by Rick Fellers

2

AGENDAAGENDA

1. Overview & Reference links to 508

2. Overview of Flash Accessibility

3. Example Page of Flash Accessibility

4. Basic Tips for Making Flash 508 Compliant


3

ReferenceReference

Reference links to Section 508Macromedia Accessibility Pagehttp://www.macromedia.com/macromedia/accessibility/ ►

Macromedia 508 Guidelines Pagehttp://www.macromedia.com/macromedia/accessibility/508_guidelines.html ►

W3C Accessibility Guidelines http://www.w3.org/TR/WCAG/ ►

http://www.macromedia.com/macromedia/accessibility/

http://www.macromedia.com/macromedia/accessibility/508_guidelines.html

http://www.w3.org/TR/WCAG/


4

ReferenceReference

W3C Checklists

Checklist for Web Content Accessibility Guidelines 1.0 ►http://www.w3.org/TR/WCAG10/full-checklist.html

Checklist for Authoring Tool Accessibility Guidelines 1.0 ►http://www.w3.org/TR/ATAG10/atag10-chktable.html

Checkpoints for User Agent Accessibility Guidelines 1.0 ►http://www.w3.org/TR/UAAG10/uaag10-chktable.html

http://www.w3.org/TR/WCAG10/full-checklist.html

http://www.w3.org/TR/WCAG10/full-checklist.html

http://www.w3.org/TR/ATAG10/atag10-chktable.html

http://www.w3.org/TR/ATAG10/atag10-chktable.html

http://www.w3.org/TR/UAAG10/uaag10-chktable.html

http://www.w3.org/TR/UAAG10/uaag10-chktable.html


5

Flash AccessibilityFlash Accessibility

In general, designers and developers of Macromedia Flash content need to consider three factors…


6



1.1. Text EquivalentsText Equivalents


7



1. Text Equivalents

2.2. Animated ElementsAnimated Elements


8



1. Text Equivalents

2. Animated Elements

3.3. Tab OrderTab Order


9


• Through the use of Microsoft Active Accessibility (MSAA), Macromedia Flash Player 6 exposes Macromedia Flash content to the screen reader.


10



• Text in a Flash movie is exposed by default.


11




• Graphic elements are not exposed by automatically. They need a text equivalent.


12




• Graphic elements are not exposed by automatically. They need a text equivalent.

• The biggest challenge is deciding when to use text equivalents and what they should say.


13

Macromedia Flash MX 2004 (Professional)Macromedia Flash MX 2004 (Professional)Accessibility OverviewAccessibility Overview

You can now accomplish the following:

• Specify that your document be 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


14



• Specify that your document be accessible to screen readers Specify that your document be accessible to screen readers








15




• Provide a document title and description Provide a document title and description







16





• Provide a title and description for document instances Provide a title and description for document instances






17






• Specify that screen readers ignore elements in your documentSpecify that screen readers ignore elements in your document





18







• Change static text to dynamic text for accessibility Change static text to dynamic text for accessibility




19








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



20









• Control the reading order with ActionScriptControl the reading order with ActionScript


21


• Basic techniques for making Flash content accessible;

• See Flash Help “Creating Accessible Content” for reference;


22


Example files location: Flash Help: How Do I -


23

Example File:Example File: accessibility_start.fla accessibility_start.fla


24

Specify that your document be Specify that your document be accessible to screen readersaccessible to screen readersOBJECTIVE:

• Provide a name and description of your document that a screen reader can read aloud.

STEPS:

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


25

Specify that your document be Specify that your document be accessible to screen readersaccessible to screen readers2. 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.


26







27







28







29

Provide a document title & descriptionProvide a document title & description

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

--------------

Name: Trio ZX2004

Desc: Corporate website about the Trio ZX2004. Includes 6 navigation buttons, overview text, and an animated car.


30

Provide a title & description for instancesProvide a title & description for instances


31

Title & description for instancesTitle & description for instances


32


You do not have to give a description to all instances if the name is sufficient.


33


4. Give the next instance, the DEALERS BUTTON, a description only.

CONDITIONS:

• Button must have Text element;

• Text element not converted to paths;

• Text listed as DYNAMIC in PI;

• Give all instances a name.


34


ORDERS and RESEARCH require no additional description, but make sure they conform to text previously stated requirements.

ORDERS and RESEARCH require no additional description, but make sure they conform to text previously stated requirements.


35

Specify what items Screen Readers Specify what items Screen Readers should ignoreshould ignore• Screen readers follow a specific order when reading web

content;

• When content changes (e.g., animation or movie) many screen readers will begin reading the web content all over again;


36

Specify what items Screen Readers Specify what items Screen Readers should ignoreshould ignore• Use the Accessibility panel to either…

– deselect Make Object AccessibleMake Object Accessible, so that the screen reader does not receive accessibility information about the object, or…

– deselect Make Child Objects AccessibleMake Child Objects Accessible, so that the screen reader does not receive accessibility information nested within a movie clip.

This option gives the user information about the web page containing animation, yet won’t cause the screen reader to constantly refresh.


37

Specify what items Screen Readers Specify what items Screen Readers should ignoreshould ignore• Use the Accessibility panel to either…

– deselect Make Object AccessibleMake Object Accessible, so that the screen reader does not receive accessibility information about the object, or…

– deselect Make Child Objects AccessibleMake Child Objects Accessible, so that the screen reader does not receive accessibility information nested within a movie clip.

This option gives the user information about the web page containing animation, yet won’t cause the screen reader to constantly refresh.


38

Specify what items Screen Readers Specify what items Screen Readers should ignoreshould ignore5. On the Stage, click the car,

which is the safety_mc movie clip instance.

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.


39

Specify what items Screen Readers Specify what items Screen Readers should ignoreshould ignore5. On the Stage, click the car,

which is the safety_mc movie clip instance.

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.


40

Change static text to dynamic text for Change static text to dynamic text for accessibilityaccessibility • Text items must be dynamic

to be read by the screen reader.

• Check each text item and change as needed in the Properties Inspector.


41

Change static text to dynamic text for Change static text to dynamic text for accessibilityaccessibilityText items must be dynamic to

be read by the screen reader.

6. Check each text item and change as needed in the Properties Inspector.

Text items must be dynamic to be read by the screen reader.

6. Check each text item and change as needed in the Properties Inspector.


42

Change static text to dynamic text for Change static text to dynamic text for accessibilityaccessibilityChange text to DYNAMIC in Properties Inspector.

Then give the instance a name identifier in Properties.


43

Control the tab order and reading orderControl the tab order and reading order

OBJECTIVES:

• Create a tab order that determines the order in which objects receive focus when the users press the Tab key.

• Control the order in which a screen reader reads information about the object (known as the reading order).


44


• 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 MX Professional 2004, 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.


45


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

• If you have Macromedia Flash MX Professional 2004, 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.


46


If you have MX 2004 Professional…

• With the Accessibility panel open, select the first instance in your desired tab order; then in the Accessibility panel, enter 1 in the Tab Index text box.


47


If you have MX 2004 Professional…

• With the Accessibility panel open, select the first instance in your desired tab order; then in the Accessibility panel, enter 1 in the Tab Index text box.

• the logo_mc instance at the top of the Stage. In the Accessibility panel, enter 1 in the Tab Index text box.

• 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:


48


• After changing tab order for all instances we can now check their order visually.

• To show or hide tab order select menu options VIEW > SHOW TAB ORDER

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


49


50


To control the tab order and reading order using ActionScript:

• In the Timeline, select Frame 1 of the Actions layer.

• In the Actions panel (Window > Development Panels > Actions), view the ActionScript that creates the tab index for each instance in the document.


51


52


If using Flash MX 2004, or if using Flash MX Professional 2004 and you do not create the tab index using the Accessibility panel…

delete the /* and */ in the script to un-comment the script:

_root.logo_mc.tabIndex = 1; _root.dealers_btn.tabIndex = 2; _root.orders_btn.tabIndex = 3; _root.research_btn.tabIndex = 4; _root.text4_txt.tabIndex = 5; _root.overview_btn.tabIndex = 6; _root.powerplant_btn.tabIndex = 7; _root.news_btn.tabIndex = 8; _root.safety_mc.tabIndex = 9; _root.text8_txt.tabIndex = 10; _root.text9_txt.tabIndex = 11; _root.bevel_mc.tabIndex = 12;


53


54


55

Summary of Creating Summary of Creating Accessible Flash Content ExampleAccessible Flash Content ExampleExample covered the following areas:

• Specify that the document be 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;


56


• Specify that the document be accessible to screen readers;Specify that the document be 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;


57


• Specify that the document be accessible to screen readers;• Provide a document title and description;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;


58


• Specify that the document be accessible to screen readers;• Provide a document title and description;• Provide a title and description for document instances;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;


59


• Specify that the document be 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;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;


60


• Specify that the document be 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;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;


61


• Specify that the document be 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 order in which users navigate with the Tab key;• Control the reading order with ActionScript;


62


• Specify that the document be 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;Control the reading order with ActionScript;

Macromedia Flash MX 2004Macromedia Flash MX 2004

Basic Accessibility TipsBasic Accessibility Tips


64

TipsTips

1.1. Pay attention to the user Pay attention to the user experience!experience!


65

TipsTips

1. Pay attention to the user experience!

2.2. Provide text equivalents for Provide text equivalents for graphic items.graphic items.


66

TipsTips

• Provide text equivalents for graphic elementstext equivalents for graphic elements in Macromedia Flash MX.

• Provide names for graphic icons.

• Add text equivalents for gesturing animations that highlight an area of the page.

• When you use a feature such as Break Apart for text, be sure to provide a name or description.


67

TipsTips

3.3. Consider visual element Consider visual element relationships…relationships…


68

TipsTips

• Consider visual relationships among elements when adding text equivalents.

• Think about whether it is most helpful to provide a name for each element in a movie, or whether the name should instead reflect a group of elements.

• For example, for an animation of the solar system, the description "animation of solar system" may be more meaningful than "Mercury, Venus, Earth," and so on.


69

TipsTips

3. Consider visual element relationships…

4.4. Avoid animating Text, Buttons, Avoid animating Text, Buttons, Fields or Links.Fields or Links.


70

TipsTips• Avoid animating the text, buttons, and input text fields in your

movie.

• Each time a Macromedia Flash movie updates, the screen reader receives a command to return to the top of the page.

• In the case of the Window-Eyes screen reader from GW Micro, the user will hear, "Loading page…load done" each time the screen reader returns to the top of the page.

• If you keep text, buttons, and other objects stable, you reduce the chance of causing a screen reader to emit extra chatter that may annoy users.

• For the same reason, avoid the use of looping movies.


71

TipsTips• Remember that sound can be a very important medium for screen

reader users.

• Consider how the sounds in your movie, if any, will interact/distract with the text spoken by screen readers.

• If you have a lot of loud sound, it may be difficult for a screen reader user to hear what the screen reader is saying. On the other hand, some quiet or well-placed sound can greatly enhance the experience.

• Then, on the other hand, again, consider the “viewing” environment. Not all web page viewers use screen readers. Always consider at least TWO different versions of your web page designs.


72

TipsTips

5.5. Consider creating multiple Consider creating multiple versions of your web pages – versions of your web pages – designed for various designed for various environments…environments…


73

TipsTips

Exclusive keyboard environment:

• When creating interactive movies, make sure that users can navigate through your movie effectively using only the keyboard.

• Ensure that users can operate simple buttons and forms with the same keystrokes as in other applications. Consistency between applications, e.g. Ctrl-S (Save).


74

TipsTips

5. Consider creating multiple versions of your web pages – designed for various environments…

6.6. Test on various equipment, Test on various equipment, screen readers, computers, etc.screen readers, computers, etc.


75

TipsTips• If you are using ActionScript to capture keystrokes, be sure to

test the application in a screen reader.

• Different screen readers may process input from the keyboard differently.


76

TipsTips• Try not to present information in your movie that remains on

the screen for only a short time.

• Screen readers may have a difficult time keeping up with quick changes (for example, scenes that change every three seconds) in Macromedia Flash movies.

• You can resolve this type of problem by adding Next buttons that control scene movement, or by including the full string of all of your text as a description for your entire movie.

Accessible Flash

A Web Accessibility Center Presentation

ENDENDRick Fellers

Wednesday, August 18, 2004

Documents

Accessible Flash A Web Accessibility Center Presentation Rick Fellers Presented by Rick Fellers August 18, 2004