While it may seem that only a tiny fraction of our community is disabled, many citizens have less obvious difficulties such as poor vision, which makes reading information on screen difficult, or mobility impairments that make a computer mouse difficult to use. As users get older, more of them will struggle with these and other age-related challenges.
Designing Web content (including e-Learning) so that it is accessible not only welcomes the totally disabled, but makes information access easier for the growing number of citizens with less severe, yet significant, physical challenges.
Web accessibility means Web-based materials designed so that people with physical impairments or cognitive disabilities can use the content easily. E-Learning that lacks simple features such as alternate text for images and keyboard-accessible navigation can be difficult or impossible for the disabled to use effectively. Designing an accessible application enables citizens with significant handicaps, such as blindness or paralysis, to have equal access to skills, knowledge, and information.
Here’s another factor to consider. An accessible e-Learning module opens the door for people using new technologies. More and more people will be using PDAs or cell phones to access information online. These devices typically do not have pointing devices, such as a computer mouse. They also have much smaller displays and limited color capability. An accessible application greatly enhances the user experience for people using mobile devices. Accessible design goes hand in hand with usable design. Some fundamental practices of accessible design, such as clear and con sistent navigation, improve usability for all patrons.
So, in short, everyone benefits from accessible design! In this article, I discuss the various types of disability, the assistive technology that supports affected users, and the basics of designing multimedia training using Flash in ways that make it accessible and usable to people with disabilities.
Types of disabilities and assistive technology
People with severe disabilities must rely on assistive technologies in order to obtain information from computers. Here is a quick overview of the different disability categories and the assistive technologies that support each of them.
Vision impairment
The largest category of disabled users
is the vision- impaired. In 2002, the World Health Organization estimated that
there were 161 million visually impaired people in the world, or just over 2.5
percent of the total population (see http://www.who.int/mediacentre/factsheets/fs282/en/). Of these individuals, 124 million had
“low vision” and 36 million were blind. Although 90 percent of vision-impaired impaired people live in developing nations
(Southeast Asia, the Western Pacific, and
Individuals with severe vision impairments must use a screen reader to access electronic information. Screen readers use text-to-synthesized speech technology to read the contents of a document. The blind cannot use a mouse at all, so only the keyboard can control these screen reader programs.
Users with less severe vision problems may use a magnifying tool to enlarge the computer screen. Or they may simply use the largest font setting in their browser, or even a customized style sheet when browsing. Since browser font settings do not affect fonts in Flash, I recommend providing users with a tool in the Flash player that enables them to choose their desired font size.
Flash has several features that can make information accessible for vision-impaired users. One of these is audio capability. Rather than rely on a screen reader to narrate text, developers can add narration themselves. This ensures that the text will render consistently, regardless of which screen reading device is used. It can also ensure that words are pronounced as the course author intends.
In addition to narration, you can easily incorporate any type of sound that may have instructional value into Flash. For example, imagine any household appliance that emits warning sounds to indicate potential problems. You can add a clip of these sounds to a Flash training, accompanied by a verbal and visual explanation. While you could do this in HTML, Flash does not require a separate media player. Also, Flash allows sounds to be easily synchronized with the supporting narration.
Users with limited vision can also benefit from the enhanced scalability of Flash content. Graphics designed in Flash are vector-based, which means a user can magnify them greatly without distortion. Bitmap images, when greatly magnified, distort too much to be of any value.
Motor impairment
Another large category of disabled users is those who have motor impairments. Motor impairments are conditions that make body movement difficult or impossible. Major causes are spinal cord injuries and diseases such as cerebral palsy or muscular dystrophy. Motor impairments are a challenge to computer use when a person cannot use a mouse or keyboard.
Individuals with less severe motor disabilities may be able to use a normal keyboard. However, most will find controlling a standard mouse difficult or impossible. People who cannot use their hands at all may use assistive technologies such as mouth sticks or head wands. These technologies allow the user to input keystrokes. They are very laborious however, and can be fatiguing to use for a long stretch of time.
The key concern in developing content for the motor-disabled is to enable keyboard accessibility. One advantage of Flash is the relative ease of adding keyboard shortcuts for tasks.
Hearing impairment
For the hearing-impaired, the graphical nature of Flash presentations can be an advantage. Obviously, the key guideline is to include text equivalents for any spoken narration. Our practice in most cases is to precisely match the audio and the on-screen text equivalent.
Cognitive impairment
Flash can also be very helpful to users with cognitive disabilities. Cognitive disabilities make up the broadest, and least well-defined, category of disability. It includes those with various learning disabilities as well as those who have suffered brain injuries. If designed carefully, the combination of text, graphics, animation, and audio can make information more clear than any of those modalities alone.
The same standards that apply to static Web pages apply to Flash content as well. It is especially crucial to make navigation and controls as simple as possible. It is also critical to use animation wisely. Animation is a powerful tool for directing the viewer’s attention. When used to clarify a major point or illustrate an important step, animation can help the user focus on the critical information being conveyed. However, animations that do not add instructional value can be very distracting to users with cognitive disabilities.
Flash basics and accessibility
There are two concepts in Flash authoring that are critical in understanding the challenges of designing accessible Flash. They are the “Stage” and the “Timeline.”
The “Stage”
In Flash, the elements that are visible on the screen are those that are currently “on stage.” The stage is like a canvas where the visible elements in the Flash movie are drawn and assembled. Elements on stage can be made invisible, either by making them transparent, or by hiding them behind an object stacked above them. Then the element can be faded into view, or revealed visually, by moving the elements that were masking them. The inherent accessibility problem with the stage concept is that screen readers cannot always determine if an object is off-stage, and so they sometimes read elements intended to be invisible. Also, because objects can be made invisible through either transparency or masking, the screen reader can still read an object that is intended to be hidden.
The “Timeline”
One builds a Flash presentation using a timeline. Designers add actions, introduce new elements, move elements on or off stage, incorporate audio clips or animations, and do much more by associating the objects with frames on the timeline.
The basic timeline elements shown in Figure 1, include the timeline header, layers, and keyframes.
Figure 1 Basic Flash timeline elements
The timeline header
The timeline header is numbered. Each line represents a frame. By default, there are 12 frames per second in a Flash movie.
You control the action by placing objects or events on the timeline The red rectangle you see in Figure 1 is called the playhead. The playhead indicates where in the timeline the movie is playing. For example, the playhead is on frame 21, so the events on frame 21 will occur. In this case a movie clip called “sect02” (which I placed on frame 21) will play. If the playhead moves to frame 31, the movie clip called “sect03” on frame 31 will play.
Figure 1 is from a Flash presentation which has “Back” and “Next” buttons among the controls (not visible in the figure). Clicking “Back” moves the playhead back ten frames, which will play the movie clip placed there. Clicking forward moves the playhead forward ten frames, playing the movie placed there.
Layers
Another key concept is layers. A Flash timeline can have numerous layers. The example in Figure 1 shows only five layers, but some of my projects have had over 70 layers. Objects in higher layers conceal objects that are in lower layers.
Keyframes
Keyframes allow you to place events on the timeline, and determine when (and if) they occur. In Figure 1, you can see three keyframes on frame 21. The dark circle indicates there is an object on the stage, in the Content layer.
Motion and other changes
Let’s look at a timeline with more action on it. The timeline in Figure 2 illustrates three concepts. These are motion, masking, and use of audio.
Figure 2 Motion, masking, and audio on the timeline: Applying a “motion tween”
Motion
Let’s look at an example of motion. It is very easy to create movement in Flash. To make an element move across the stage, you place it in a keyframe on the timeline, then place it in another keyframe, later in the timeline, in a different place on the stage. You then apply a “motion tween” to make it move as the timeline progresses. In Figure 2, we are applying a “motion tween” to an object on the welcome layer. But there could be a problem.
Accessibility Concern: This type of motion can potentially cause major accessibility issues. A standard Web page will, once loaded, remain static, allowing the screen reader to proceed through the page until it reads all of the content, or until the user clicks a link to navigate elsewhere. Flash, however is inherently dynamic, with content changing frequently as the movie progresses through the timeline. Screen readers are not well equipped to deal with this constant change. So when actions occur on screen, the screen reader will sense that the page has reloaded and begin reading from the beginning.
Masking
Another important concept is masking. When an object is masked, another object covers it on stage. In Figure 2, the “Logo Mask” layer is masking the logo. At the first keyframe, the mask completely covers the logo. At the end of the tween, the logo is completely visible. We apply a tween where we gradually shrink the mask, revealing the logo. Again, the designer and the developer must think about accessibility.
Accessibility Concern: Masking can also present problems for screen readers. The screen reader cannot tell if an object is masked. If it is on stage, then the screen reader will sense it. You must be careful when using masks to ensure the screen reader does not read the hidden object until the right time.
Audio
The final point to mention is the Audio layer. In Figure 2, you can see the audio signature rise and fall across the timeline. This helps the developer to synchronize events, such as motion, unmasking, or the appearance or disappearance of objects on the stage, to the audio narration.
This is one of the key advantages of Flash, provided you have the means to record audio narration. Including the narration as an audio file, instead of relying on the screen reader to narrate your movie, can solve some major accessibility hurdles, and increase the instructional value of your training.
Key challenges
As we’ve learned, making Web content navigable using the keyboard alone is a major challenge in Web accessibility. This is particularly true in Flash, and I’d like to turn your attention now to two particular areas.
Keyboard navigation and control
In many applications (not just Flash), users may choose to move from one object — a menu item, a fill-in text field, a hot spot in a graphic, a check box, or a button, to name a few examples — to another by using the tab key rather than the mouse. Each time the user presses the tab key, the active selection changes. The order in which the tab key advances selection from one object to the next is called the “tab order” The first complication is that the tab order of Flash presentations can be very different from the visual layout of the page. When the developer sets up a screen in Flash, he or she will specify the order in which the tab key will select the various choices on screen, or the developer can choose to default to the tab order that Flash chooses.
In HTML, the linear structure of the source code determines the tab order (and reading order). In Flash however, unless carefully specified by the designer, the tab order can be unpredictable and confusing.
Another point of confusion is that, depending on how the tab order is specified, the reading order of the page can differ from the tab order. If developers assign a tab order using ActionScript, the speaking order and tab order will be consistent. However, ActionScript is not easy for beginning developers to use correctly. An easier method for less experienced developers is to specify the tab order using the Accessibility Panel in the Flash interface. This is much easier, but then the developers must use a screen reader to verify that the reading order is correct.
Finally, if your Flash training contains multimedia such as videos or long animations, you must provide player controls that the keyboard can activate. This is not only important for disabled users, but provides a convenience for anyone using the training.
Text equivalents
The second main challenge is to ensure that your training has text equivalents for all important non-textual items. This includes any image or animation that conveys meaning. Purely decorative graphics do not need text equivalents.
A real world example
I am a developer in eService Productions, a multimedia production group that primarily provides training support to the Xerox Corporation. We are currently developing training materials that will demonstrate techniques for using and maintaining Xerox copiers, for employees of chain print shops. This example comes from one of our productions.
The interface
Figure 3 is an illustration of one screen of one training module. This screen includes an area for visual media, a text area box, and a toolbar, which includes a print button, a volume control, and player controls.
Figure 3 An accessible training module does not necessarily look different from other e-Learning
Meeting specific challenges — audio
As mentioned above, a key challenge in accessible Flash design is ensuring that the screen reader reads the content in the proper sequence.
One way of avoiding or minimizing this hurdle is to narrate the spoken text. Since we frequently include narration and other audio in our presentations, this is the easiest and most attractive option for us. Plus, the text is somewhat technical, and includes many unusual part names and the frequent use of acronyms. Doing the narration ourselves insures that unusual terms are pronounced correctly and that acronyms are read properly.
In this case, it is important to ensure that the screen reader does not read the procedure text. If it did, the screen reader user could hear both the author’s narration and the synthesized voice at the same time. To avoid this confusion, we will “hide” the text from the screen reader, or, in Flash terminology, “silence” the object.
”Silencing” an object
First, it is important to note that there are other reasons why you might want to silence an object in your Flash movie. For example, objects that are merely cosmetic, and do not convey any important information, should be silenced. Think about designing an HTML page. If an image conveys no meaning, you add a “null” alt tag. In Flash, silencing an object is the same concept.
The easiest way to silence an object is simply by using the Accessibility panel in the Flash authoring program. To open the Accessibility panel, open the Window menu, and select Other Panels. Accessibility is the first option.
However, before you can assign any properties with the Accessibility panel, you must convert the text into a button or movie clip. Once the text object is converted, open the Accessibility panel. You will see a checkbox with the label “Make object accessible.” Deselect this checkbox to silence the object.
Exposing buttons to screen reader
By default, the screen reader reads buttons. Flash has an “Auto Label” feature that will automatically associate the nearest text field as the button’s label. While this may often be desirable, there may be times when you want add a little more to the label. And, more importantly, buttons that don’t have associated text, like our player controls, need to be labeled. Without labels, the screen reader could only say, “Button,” and the user would not know the button will do. Luckily, adding a label is very simple using the Accessibility panel. (See Figure 4)
Figure 4 How to add an accessible label, using the Accessibility panel
Therefore, to assign a label that screen readers can use to identify the “Pause” button, all you need to do is:
- Select the Pause button.
- Check “Make object accessible.”
- Enter a descriptive name in the name field. Now, instead of hearing “Button,” users will hear “Pause Button.”
You can also add more text in the “Description” field. It is usually better not to add a lengthy description. Screen readers read both the name and description fields each time the button is selected, so a long description may be tedious to listen to. However, if the button does something like opening another window, it may be advisable to include text stating this in the Description field.
We’ll look at the remaining options in the Accessibility panel in the following sections.
Keyboard access
Ensuring that a Flash application is keyboard accessible is a critical task. For simple controls, it can be very easy, but it may be difficult or impossible for more complicated controls. Our player controls provide good examples of both. In this tutorial, I will address the Control Buttons, which you can make accessible using the Accessibility panel and the Actions panel. (See Figure 5)
Figure 5 You can add these control buttons to your Flash movie by using the Accessibility panel and the Actions panel.
The control buttons, specifically the rewind, pause, and play buttons, and the print button, are all simple to make keyboard accessible. You can expose the control buttons to the keyboard in two ways. For one, users can tab to them, and press
or to trigger
the action. I have also added keyboard shortcuts to activate them directly.
Labeling a button using the Accessibility panel
First, because the play and rewind buttons do not have labels, you must assign one to each button by using the Accessibility panel, just as we did with the Pause button. (See Figure 6)
Figure 6 Labelling a button is simple
Next, because “rewind” might mean either backing up a few frames, or rewinding to the beginning, I’ll add a short Description that will clarify the button’s function.
We will leave the Shortcut field blank. No screen readers support this feature, and they are not expected to in the foreseeable future.
Setting Tab Index
Finally, let’s talk about Tab Index. Assigning a tab index in the Accessibility panel will control the tabbing order of your buttons. (See the discussion of tab order earlier in this article, under “Key challenges.”) A button’s tab index is its position in the tab order: the button with tab index 4 will be active before the button with tab index 7. You can skip numbers in the tab index (1, 2, 4, 7, 10, 20) — the index numbers do not have to be an unbroken sequence. The tab index will not necessarily control the reading order. But if you want to ensure that users tab through your actionable elements in a specific order, setting tab index is a good idea. Notice that I arbitrarily set the tab index to 20. This gives me the flexibility to either add a button or move an existing button to a position earlier in the tab order.
Assigning keyboard shortcuts
Assigning a keyboard shortcut is a simple task, even for someone who is a novice. I will show you the simplest method, using the Actions panel with “Script Assist” enabled.
The first step is to click the “Rewind” button on the stage. This selects the button. Then, add an “On event” handler by selecting Global Functions, Movie Clip Control, On. The action panel will now have On (Release). (See Figure 7)
Figure 7 The action panel
Next, you will check the “Key Press” box. This will enable the Key Press text field. Press the keys you want to use. For this example, I’ll press the PageDown key.
Now, to complete the ActionScript, we need to add the command to replay the module from the beginning. You can do this easily using the Actions Panel.
First, select the “+” sign to add a line of script. Next, select Global Functions; Timeline Control; and finally “goto” (see Figure 8).
Then, ensure “Go to and play” is selected, and Frame is set to 1. (See Figure 9) Your ActionScript code should read:
on (release, keyPress “”) { gotoAndPlay(1); }
Figure 9 Assigning a keyboard shortcut by using the Action panel
Conclusion
In this article, I have reviewed the categories of disability and the chief types of assistive devices. I discussed some of the fundamental issues involved in designing Flash for accessibility. I also presented some basics about the authoring environment, namely the two concepts in Flash that designers and developers must understand and use in order to create accessible Flash content.
- The stage can confuse screen readers and cause them to present elements intended to be invisible or hidden;
- The timeline presents a number of challenges, particularly with respect to motion, masking, and audio.
Flash has capabilities that can enable either a very rewarding, or a very frustrating, experience for users with different disabilities. I showed you how to deal with the two basic concepts (stage and timeline) and how to improve accessibility through keyboard navigation and control, and through text equivalents.
In a “real world” example, you learned how to deal with audio challenges, how to expose buttons to screen readers, and how to make a Flash application keyboard accessible.
These are the basic steps for making a Flash training module accessible. By applying them, you will not only make your e-Learning available to virtually every learner, but you will also make your e-Learning available on a wider range of devices.
