United States Department of Veterans Affairs
VHA Office of Health Information

Creating Accessible Flash Course

Page 6 of 13

Creating Accessible Flash Course – Ensuring Keyboard Accessibility

Back Next

Functionality that Must Be Keyboard Accessible

The VHA Section 508 checkpoints that specify functionality that must be keyboard accessible are available in a separate window by selecting the link that follows:

Related Checkpoint(s)

These can be summarized as follows.

Ease and Speed of Response

Keyboard accessibility should provide the same ease and speed of response as the mouse does. Add keyboard shortcuts to control media playback and to activate any functionality that would require more than five presses of the Tab key.

Remember to indicate somewhere on the screen what the shortcuts are, for sighted keyboard-only users and for users of screen readers that do not announce the MSAA-provided shortcuts that you can enter through the Accessibility Panel.

You can put the shortcuts list directly on the screen, provide a button for a popup window with them or use underscores in menu items and button names for mnemonics. If this is not possible, provide the shortcuts in user support documentation such as online help.

Visual Indication of Focus

Keyboard users with some sight need to know where their tabbing takes them. Do not turn off the yellow rectangular outline used for this purpose (called the focus rectangle) unless you add a substitute that meets the visual requirements for accessibility such as use of color. See the lesson on Maintaining Focus for details on how to create an acceptable substitute.

Focus Changes

Avoid forcibly moving the focus when the keyboard user did not issue an action that warrants one. This is confusing to all keyboard users including users of screen readers. If an unexpected but not forced focus change is made (e.g., when tabbing out of a text input field), notify the user where focus will be placed. The Maintaining Focus lesson covers focus changes in depth.

One place where a focus change is generally needed to improve keyboard access is when a form's submit button is activated. The focus should move to the top of the next screen or to an error message at the top of the current one. This assists keyboard-only users in quickly interacting with the new content and provides a clear indication of where keyboard focus is.

Keyboard Access to Pause, Stop or Hide Dynamically-Changing Content

When text dynamically changes continually (e.g., a stock ticker), provide keyboard accessible user controls to pause, hide or stop the updates. This topic is covered in detail in the Providing Audio/Visual Controls lesson. Providing keyboard access to these controls allows users with cognitive impairments, visual impairments and other disabilities to access the content at their own pace.

Screen shot of a control that allows the user to pause, rewind and play dynamically changing content.

Rollover Content

Meaningful content that appears as the mouse rolls over an element must also be accessible via the keyboard. For buttons with brief rollover content, like those below, you can reveal the popup when focus moves to the button and hide it when focus moves away. To make the content available via the screen reader, treat the popup as you would a label: keep it out of the reading order and add its text to the button's Accessible Name.

Screenshot shows rollover content from the New Employee Orientation. A star appears beside each of the four listed training courses that the user is required to take. When the user rolls the mouse over or tabs to the first course button, a popup hint appears stating "This security training requires A1 clearance."

More extensive rollover content, such as a panel of details about a location as the user rolls over a map location or an animation launched by a rollover, requires a way to activate or skip the rollover content and to tab in and out of it.

Context Menus

Context menus are those that change depending on the item selected. They open with a right-click (Windows) or a Control-click (Mac) of the mouse. This functionality should also be available from the keyboard. Consider a shortcut key such as Shift+F10 or an alternative accessible from the keyboard, such as a small button next to the item.

Combo Boxes and Dropdown Lists

Dropdown lists should work with arrow keys, as well as with a mouse. Watch that activating a selection occurs only when the user presses the Enter key, presses the space bar or when focus leaves the combo box or dropdown but not as combo box or dropdown items are being selected.

A screen shot from the New Employee Orientation showing an open Combo box labeled Group Number with several items in it.

Toolbar Functionality

If a toolbar cannot be made keyboard accessible, add shortcut keys or menu items to perform the same actions. Anytime keyboard shortcuts are used, clearly document the shortcuts for the user in an accessible format. The documentation should be in the Flash file or in the page displaying it but may also be provided in user support documentation.

Screen shot of a toolbar showing four toolbar icons, start session, pause, refresh and a mouse icon.

Scrolling Text

When text can be scrolled with the mouse, it must also be scrollable from the keyboard.

Selectable Text

If the user can select, copy or paste text with the mouse, a method for doing the same from the keyboard must be included. In Flash, when text fields are set to allow copying, this functionality automatically works with either the mouse or keyboard.

Navigation between Components and Non-components

Flash components (radio buttons, checkboxes, data grids, etc.) use a different focus manager than standard Flash objects (movie clips, simple buttons) to manage keyboard focus. Because of this, tabbing between components and other controls (movie clips and simple buttons) sometimes fails. Text Input components generally provide smooth navigation among either components or movie clips. See the topic How to Make a Movie Clip Button Keyboard Accessible for a solution.

Screenshot of sample training material from the New Employee Orientation where there are a mixture of components (checkboxes) and movie clips. Three checkboxes representing departments of the organization appear between movie clip buttons for Skipping this training and for Previous, Pause and Next.

Navigation between Panes or Simulated Page Tabs

Simulated page tabs must provide keyboard access to switch from one tab to the next. For applications with two or more panes, keyboard navigation between panes is required. It can be provided with the Tab key, menu or shortcut keys. An example of a shortcut key for pane navigation is the F6 key in Windows Explorer.

A screen shot shows drawn rectangles indicating how an application with multiple panes might look. The left half of the page is comprised of a rectangle that takes up the entire height of the page. The right half contains two rectangles stacked vertically and taking up the remaining space on the page.

Window Resizing, Moving and Closing

A context menu from a Windows application shows an option to "move" the window.

If windows within a Flash application can be resized, moved or closed with the mouse, it must be possible to do the same from the keyboard. Create controls that are keyboard accessible and can be operated with the Tab, Enter and arrow keys. For example, if an object can be moved with the mouse after activating a menu item, ensure that the menu and menu item are keyboard accessible and that the arrow keys can then be used to move the object around.

This Windows context menu is an example of keyboard accessible window manipulation. Once this move menu item is activated, a thick gray border appears around the window indicating that it can be moved. The arrow keys then move this thick gray border representing the window. Pressing Enter completes the move. Escape cancels it.

As an example from the Windows environment, a screenshot of the Object Inspector window being moved is shown. A thick gray rectangle is overlayed over the Object Inspector window up and to the right indicating where the window will be moved when the user presses Enter.

Select Next to learn more about keyboard shortcuts.

Glossary in new window Resources in new window   Back Next