Flash Accessibility Design Guidelines

The state of a control answers the question, “Can I turn the music off (or back on)?” or “At level 1, 2 or 3?” and so on. Many controls have multiple settings. Think of a dial that sets a skill level in a game using the control described below.

In this case, there are three possible settings: level 1, level 2 and level 3. The position of the red arrow lets us know visually that level 2 is selected. However, screen readers have no way of knowing anything about the red arrow or how many possible levels there are. In controls with multiple settings, designers need to let the user know how many possible states there are for a control and what state is selected. In the example above, we might use a text object or even the name property to read, “Level 2 of 3 is selected.”

Below are some state of change examples, starting with text resize, sound button control, and keypress shortcut. Keep in mind, there are many ways to change the state, as well as state the change, these are just a few. Give it a try!

Back to the Top

Text Resize

For those with low vision, you can create the text adjustments to allow users to enlarge font if needed. All the text in the box below is resizable, to accommodate visually impaired users. They can enlarge the font to a more readable size. When using this technique, you have to make sure that you have enough screen real estate to allow for the text to expand.

Try it out!

1. Download an example: textResize.zip
2. Create a new layer, name it 'text'.
3. Create a button, name it btn_font, and place it on the stage.
4. Duplicate it 3 times.
5. Shrink the left btn to 80%, and the large btn to 120%.
6. Give instance name to each button: font01, font02, font03.
7. Make text boxes dynamic and give instance names: myTextBox, myTextBox2, myTextBox3.
8. Add new layer, name it 'actions', add the following ActionScript to the main timeline:
   

   // change text sizes
   var myTextFormat12:TextFormat = new TextFormat();
   myTextFormat12.size = 12;
   var myTextFormat14:TextFormat = new TextFormat();
   myTextFormat14.size = 14;
   var myTextFormat16:TextFormat = new TextFormat();
   myTextFormat16.size = 16;
   var myTextFormat18:TextFormat = new TextFormat();
   myTextFormat18.size = 18;
   var myTextFormat23:TextFormat = new TextFormat();
   myTextFormat23.size = 23;
   var myTextFormat25:TextFormat = new TextFormat();
   myTextFormat25.size = 25;
   var myTextFormat27:TextFormat = new TextFormat();
   myTextFormat27.size = 27;
   
   font01.onRelease = function() {
   myTextBox.setTextFormat(myTextFormat16);
   myTextBox2.setTextFormat(myTextFormat12);
   myTextBox3.setTextFormat(myTextFormat23);
   }
   font02.onRelease = function() {
   myTextBox.setTextFormat(myTextFormat18);
   myTextBox2.setTextFormat(myTextFormat14);
   myTextBox3.setTextFormat(myTextFormat25);
   }
   font03.onRelease = function() {
   myTextBox.setTextFormat(myTextFormat23);
   myTextBox2.setTextFormat(myTextFormat16);
   myTextBox3.setTextFormat(myTextFormat27);
   }

9. Test movie.
   

Back to the Top

Control Sound Buttons

How many times have you entered a site and wondered how to turn off the music or audio? The audio that plays as the site loads presents a serious challenge to screen reader users. The audio from a Flash movie can interfere with the users ability to hear the contents of a movie using a screen reader. As a general rule, it is important to remember to give audio control to the user and the simplest way is to give the end user a play and pause button.

A more advanced strategy for controlling playback relies on the use of keyboard shortcuts for audio playback. Providing global keystrokes that allow the user to control the audio can greatly enhance the experience for end users. Here are several controls to consider. * Play / Pause * Mute * Volume Play and Pause is typically controlled using a single keystroke, such as the letter P, as a toggle. The first time the button is pressed, the audio starts to play. The second time the button is pressed, the audio is paused. A mute button, such as the letter m or the number 0, silences but does not stop the audio. This provides the screen reader user the opportunity to listen to the screen reader temporarily without stopping the audio.

Finally, volume controls allow the user to quietly play the audio in the background while still listening to the screen reader. This is most appropriate in cases where the audio does not require the focused attention of the user, as in the case of a music stream. Shown below is a simple example.

Try it out!

1. Download the practice files: FlashDemo.zip. The download includes final files to check your work.
2. Select the frame layer, from the library drag and drop the following onto the stage:
   1. 'btn_play_pause' movie clip, give it an instance name 'button1'
   2. 'btn_sound' (music on/off button), give it an instance name 'button2'
   3. 'btn_access' button, give it an instance name 'access'.
3. Give them a tabIndex accordingly and descriptive name.
4. Then drag and drop the '_ sound loader' movie clip onto the stage. The upper left corner is a good spot. Give it the instance name 'sound'.
5. Select the actions layer, add the following ActionScript:
   
   

   // sets sound to start zero volume
   var soundON = false;
   stopAllSounds();
   mySound = new Sound("sound");
   mySound.attachSound("dream_sauda.mp3");
   mySound.setVolume(0);
   mySound.start(0,999);
   
   

6. Also, right click on song in the library, select Linkage, check the boxes:
   1. Export for ActionScript (checked)
   2. Export in first frame (checked)
7. To add control to the sound buttons add the following ActionScript.
   1. This sets the sound to off on default when a screen reader is detected.

      // sound setting zero volume when screen reader detected
      if (Accessibility.isActive()){
      mySound.setVolume(0);
      soundON = false;
      }

   2. Add the following ActionScript to the actions panel for button2 control:

      // sound controls button2
      var soundON = false;
      

      button2.onRelease = function() {
      if (soundON) {
      mySound.setVolume(0);
      soundON = false;
      } else {
      mySound.setVolume(100);
      soundON = true;
      }
      }

8. Also, lets add a play/stop button so we can see the difference in two types of buttons.
9. Add the following ActionScript to the actions panel for button1 control:

   // sound controls button1
   button1.onRelease = function() {
   if (soundON) {
   this.gotoAndStop("out1");
   mySound.setVolume(0);
   soundON = false;
   } else {
   this.gotoAndStop("out2");
   mySound.setVolume(80);
   soundON = true;
   }
   }
   button1.onRollOver = function() {
   if (soundON) {
   this.gotoAndStop("over2");
   } else {
   this.gotoAndStop("over1");
   }
   }
   button1.onRollOut = function() {
   if (soundON) {
   this.gotoAndStop("out2");
   } else {
   this.gotoAndStop("out1");
   }
   }

10. Now test your movie before moving on. Everything should work except the keypress shortcuts.
11. Continue to the next section to finish up with the keypress shortcuts.

Back to the Top

Keypress Shortcuts

Assign Keyboard Shortcuts for Most Essential Controls

As mentioned previously, for users with mobility impairments, pressing keys may be very difficult. Therefore it is extremely helpful for users to navigate the application using keyboard shortcuts therefore reducing the number of keystrokes required to perform important tasks.

Using the shortcut field on the Accessibility panel or the .shortcut property in ActionScript is not enough. Creating a keyboard shortcut requires that a listener event be defined and a script associated with that listener. Note: the shortcut field does not create the listener.

Keypress Shortcuts Overlay - It is nice to have a keypress overlay, that clearly shows the shortcuts available for the buttons on the screen. Tip - Place the accessibility button in the bottom right hand corner of the screen.

1. Next create a new layer for your keypress shortcuts, name it keypress.
2. While in the keypress layer, drag and drop the the 'keypress_overlay' movie clip onto the middle of the stage. Give it an instance name 'keypress'.
3. To check positioning, double click keypress_overlay on stage, then on layer 1 select keyframe two. This enables you to scroll and position the entire keypress_overlay appropriately.
4. Then select the actions layer and add the following ActionScript near the bottom (designated areas have notes to assist in placement).:

   // keypress overlay
   var keypressON = false;

   access.tabIndex = 13;
   keypress._accProps = new Object();
   keypress._accProps.silent = true;

   access.onRelease = function() {
   if (keypressON) {
   keypressON = false;
   keypress.gotoAndStop(1);
   } else {
   keypressON = true;
   keypress.gotoAndStop(2);
   }
   }

5. Then add the following ActionScript directly below it:
   

   function down( ) {
   //trace(Key.getCode()); // use this to find ASCII codes
   
   if (x = Key.isDown(49)) { // font button small shortcut 1
   Selection.setFocus(font01);
   // what button does
   myTextBox.setTextFormat(myTextFormat14);
   myTextBox2.setTextFormat(myTextFormat14);
   myTextBox3.setTextFormat(myTextFormat23);
   }
   if (x = Key.isDown(50)) { // font button medium shortcut 2
   Selection.setFocus(font02);
   // what button does
   myTextBox.setTextFormat(myTextFormat16);
   myTextBox2.setTextFormat(myTextFormat16);
   myTextBox3.setTextFormat(myTextFormat25);
   }
   if (x = Key.isDown(51)) { // font button large shortcut 3
   Selection.setFocus(font03);
   // what button does
   myTextBox.setTextFormat(myTextFormat18);
   myTextBox2.setTextFormat(myTextFormat18);
   myTextBox3.setTextFormat(myTextFormat27);
   }
   
   if (x = Key.isDown(52)) { // play/pause button shortcut 4
   Selection.setFocus(button1);
   // what button does
   if (soundON) {
   this.gotoAndStop("out1");
   mySound.setVolume(0);
   soundON = false;
   } else {
   this.gotoAndStop("out2");
   mySound.setVolume(80);
   soundON = true;
   }
   }
   if (x = Key.isDown(53)) { // access button shortcut 5
   Selection.setFocus(access);
   // what button does
   if (keypressON) {
   keypressON = false;
   keypress.gotoAndStop(1);
   } else {
   keypressON = true;
   keypress.gotoAndStop(2);
   }
   }
   

6. This should get you going, now publish and check your results against the completed version.

Please note this demo used Flash 9 ActionScript 2.0.