Designing Accessible Skins for Windows Media Player 9 Series

by Tom Woolums
Microsoft Corporation
May 2003

Applies to:

Microsoft Windows Media Player 9 Series

Summary

This article describes the best practices for developing Windows Media Player skins that are accessible to people with disabilities. It presents the key principles to keep in mind when designing accessible skins and describes the programming elements exposed by the Player to facilitate accessible skins.

Introduction

Microsoft® Windows Media® Player 9 Series includes a variety of accessibility features for individuals who are blind or have low vision, who are deaf or hard-of-hearing, or who have limited dexterity or motion disabilities. Unfortunately, most of the skins that are developed for digital media players lack even the most basic accessibility features, making them difficult to use and inaccessible to many people with disabilities. However, with a little planning and a few extra lines of code, skin developers can ensure that the skins they design for Windows Media Player are more accessible.

This article contains the following topics:

• Design Considerations for Accessible Skins. Describes the features exposed to developers for making Player skins more accessible.
• Building an Accessible Skin. Walks through the process of creating the Sample Accessibility Skin and explains the process for creating an accessible skin.
• For More Information. Provides additional resources.

Design Considerations for Accessible Skins

The Windows Media Player Software Development Kit (SDK) exposes a number of programming elements that skin developers can use to incorporate accessibility features into skins. This section describes the capabilities of those programming elements and some things to keep in mind when designing a skin.

Keyboard Access

By offering the flexibility of using more than one method to navigate and access the features of your skin, you can make the skin more accessible to all users. Although most skins are designed to be used with a mouse or other pointing device, you can also design skins that provide keyboard access. For example, you can allow users to navigate through the elements of your skin in a useful and consistent manner by using the TAB key. You can also support keyboard shortcuts for common tasks.

Keyboard Navigation

You can easily add support for keyboard navigation to your Windows Media Player skin. Users can navigate through the elements on your skin by using the TAB key to move the focus from button to button and then pressing the ENTER key or the SPACEBAR to select the button. The sequence (also called the tab order) in which the TAB key moves the focus is determined by the order in which the elements are defined in the skin script file.

To facilitate TAB key navigation for your skin, arrange the skin's buttons in a way that makes sense to your users. For example, you can arrange the buttons in a pattern that is familiar and consistent with hardware that has similar functionality, such as a VCR, CD player, or radio. The tab order of the buttons should generally be from left to right and from top to bottom and should not force the user to move back and forth between different groups of buttons to perform common functions.

The Player exposes ambient attributes that can be used to set and retrieve the properties of skin elements. You can use the tabStop attribute to help determine the tab order of your skin. When the tabStop attribute is set to true for a given user interface (UI) element, that element becomes part of the tab order, and the user can access it by using the TAB key. By default, the tabStop attribute is set to true for all UI elements in a skin. You may, however, want to remove some of the UI elements from the tab order by setting their tabStop attributes to false. For example, you may want to remove the VIDEO element from the tab order because the user cannot interact with the window. Therefore, including the window in the sequence of elements that can be accessed by the TAB key will serve no purpose and may confuse or distract the user.

Keyboard Shortcuts

Keyboard shortcuts include function keys and key combinations that users can press to perform a task that would otherwise require a mouse or other pointing device. Windows Media Player skins support a number of useful keyboard shortcut combinations that enable keyboard users to access Player functionality directly. The following table contains some of the useful keyboard shortcuts available by default when Windows Media Player is in skin mode.

Support for Assistive Technology

Assistive technology is hardware or software that enables users to operate computers through alternative input, processing, and output methods. The Windows Media Player SDK exposes a number of attributes that enable assistive technology software—for example, screen readers such as Microsoft Narrator—to retrieve information about the UI elements of skins. Screen readers can use the values of these attributes to read the contents of the screen, such as the names and descriptions of control buttons and menus, aloud thus transforming the graphic user interface (GUI) of the skin into an audio interface.

Windows Media Player skins support ambient attributes that enable you to specify the name, description, and keyboard shortcut for a UI element. These attributes apply only to button elements inside a BUTTONGROUP element. They include:

• accName. The accName attribute specifies the name of the button. The name should clearly identify the button's purpose. Use names that are easily understood even when taken out of context. The text you choose for the accName should be descriptive and unique for each button.
• accDescription. The accDescription attribute specifies the description of the button. Specify a value for this attribute when the function of the button might not be obvious to users. Do not specify a value when the description of the button is the same as the button's name (as specified by the accName attribute). Use the accName attribute to describe the purpose of the button, and use the accDescription attribute to describe less obvious information such as the button's size, shape, or color.
• accKeyboardShortcut. The accKeyboardShortcut attribute specifies the keyboard shortcut for the button. Note that specifying the accKeyboardShortcut attribute for a button does not implement the keyboard shortcut functionality for the button. Specifying a value provides screen readers only with a description of existing keyboard shortcuts.

Captions

Captions are text transcripts of the audio track of a presentation that are synchronized with the video and audio tracks. Windows Media Player can render captions that have been encoded into an Advanced Systems Format (ASF) file or stream and captions that have been embedded into a DVD. The Player also supports the Microsoft Synchronized Accessible Media Interchange (SAMI) specification. The SAMI specification enables content developers to add captions to their content by using simple text files that accompany the presentation. These text files can then be modified, maintained, customized, and translated into different languages.

Media player Skins do not inherently support captions. However, there is a plug-in for rendering captions available as a free download from the wmplugins.com Web site. After you download and install the captions plug-in it opens a separate window with options for setting the language (if more than one language is specified in the SAMI file) and choosing from the font styles available in the SAMI file. Figure 1 illustrates a sample skin with a caption plug-in.

Figure 1. Sample Skin with Caption Plug-in

User Interface Graphics

Because Windows Media Player skins use customized graphics, they cannot easily support Microsoft Windows® font, color, and size settings. In addition, skins cannot use the High Contrast accessibility setting in Control Panel, which improves screen contrast by using specified colors and font sizes. The colors, fonts, backgrounds, and sizes you choose for your UI elements can make a big difference in the accessibility of your skin. Consider the following when designing the graphics for an accessible skin.

Colors

• Use high-contrast colors for all the UI elements in your skin. The colors you choose for foreground and background objects should have a noticeable difference in intensity as well as in color. Additionally, avoid using colors of similar intensity for UI elements that are adjacent to one another. Some users may have difficulty perceiving differences in color even when those colors differ greatly in saturation or hue.
• Avoid using color as the only means of conveying information or indicating that an action took place. It is appropriate to use color to enhance interaction with the UI. However, use color only to reinforce information conveyed by other means such as text or audio labels.

Text and Fonts

• Use text to enhance user interface graphics and icons whenever possible. Using clear, precise text labels for UI elements can be effective for people who have low vision and for users with different learning styles.
• When using text with UI elements, use a large, simple, and well-spaced typeface. Text size should be a minimum of 16 points. However, keep in mind that the font style you choose may affect readability, regardless of the size. Avoid using decorative or cursive fonts unless you need to use them for emphasis. Whenever possible, use standard fonts with easily recognizable characters that are familiar to most users. Keep the spacing wide between the letters of each word and avoid crowding words together. In addition, use white space between lines of text.

Backgrounds

• Avoid using patterned backgrounds for graphic elements. Text and icons on top of patterned backgrounds may be illegible for some users because the pattern appears to "bleed" into the text and might obscure icons.

Size

• With regard to the size of UI elements, bigger is almost always better. When possible, provide your users with a big target that they can easily find and click by using a pointing device. At a minimum, the buttons and controls you design should be bigger than the largest pointer setting. Test your skin with the largest pointer setting to ensure that the pointer does not obscure any of the skin's UI elements.
• The overall size of the skin should render well at all screen resolutions. Many people with low vision set their screen resolutions to 640 X 480 pixels to increase the size and visibility of objects on the screen. You should test your skin at a minimum of 800 X 600 pixel resolution to ensure that all of the UI elements on your skin can be accessed easily without having to move the skin around on the screen.

Building an Accessible Skin

Windows Media Player skins consist of three types of files:

• Art files that contain the graphic elements for the UI of the skin. The sample skin in this article uses bitmap (.bmp) files. However, you can also use .gif, .png, .jpeg, or .jpg files.
• The skin definition file, which is a text file that contains the Extensible Markup Language (XML) code that specifies how the skin will look and function.
• Microsoft JScript® files that contain code that responds to events and provides low-level functionality for your skin. These files are optional.

After you have created all of the art files and written the code for the skin definition file and any accompanying JScript files, you need to package the files into a single compressed file by using a file-compression program. When you have compressed the files into a single file, change that file's extension to .wmz. When the user double-clicks the .wmz file, Windows Media Player automatically adds your skin to the list of available skins.

The following section describes creating the art files and the skin definition file for the sample skin and discusses the accessibility features incorporated into the sample skin. Because this is a simple example of a Media Player skin it does not require any JScript. The sample skin files have been compressed into the file Accessible.wmz and can be viewed by uncompressing the file.

Designing the Skin User Interface

The first step of creating a skin is designing the primary art file, which acts as the base of your skin. The primary art file specifies the appearance and layout of the UI. The sample skin uses a fairly simple primary art file (illustrated in Figure 2) that includes enough functionality to be useful.

Figure 2. Sample skin primary art file

The primary art file is 510 pixels in width and 570 pixels in height, which means that the entire skin should be completely visible even at a screen resolution of 800 X 600 pixels. The video display area of the sample skin is 480 X 360 pixels. However, if you are creating content and your audience includes people with low vision, the video content should be encoded for playback at sizes much larger than 480 X 360 pixels, and you may want to consider making the video area of your skin larger. The sample skin features high-contrast grayscale graphics and control buttons with large, bold text. The buttons themselves contain both an icon that represents the button action and text that describes the action. The UI is arranged to display the most frequently used buttons (Play, Pause, and Stop) prominently on top. The less frequently used buttons (Rewind, Fast Forward, Previous, and Next) are slightly smaller and are located below the other buttons.

The skin also includes buttons standard for all Windows applications, Minimize and Close, in the upper-right corner. In the upper-left corner, the skin features two Player-specific buttons: a Return to Full Mode button and an Open Access Panel button for accessing playlists and selecting content.

Adding the Mapping Image

When you finish the primary art file, the next step in developing a skin is creating a mapping image file. In the mapping image, you use distinct colors values to specify the areas of the Player that respond to user input. Figure 3 shows Buttons_mask.bmp, the mapping file for the sample accessibility skin.

Figure 3. Mapping image art file

The mapping image has the same dimensions as the primary image. Each of the UI elements in the primary image has a corresponding area on the mapping image that is indicated by a unique color. These colors are not visible to the people using your skin. They are only used to map out the UI elements of the skin. You must use unique colors for each UI element, and you must know the numeric value associated with each color.

The XML script in the skin file uses the numeric values of the colors in the mapping image to specify the size and shape of each UI element on the final skin. Therefore, the areas on the mapping image must exactly match the placement of the corresponding elements on the primary art image. For example, the sample accessibility skin uses a green area on the mapping file to represent the Play button. The green rectangle on the mapping image exactly corresponds to the size, shape, and placement of the Play button on the primary art image. In the script file, the mapping color for the PLAYELEMENT element is set to the numeric value of green, which is #009966. When there is any user input on the location in the skin that corresponds to the green rectangle in the mapping file, the Player responds by running the script associated with the PLAYELEMENT element.

Using Altered State Images

You can add optional altered state images files to your skin to provide users with visual cues about the states of your skin's UI elements. The sample accessibility skin includes additional graphics that depict the buttons when they are inactive and when the user hovers over them with a mouse pointer (called the hover state).

Figure 4 shows the appearance of the control buttons when they are inactive. This image uses the standard Windows convention of graying out the text and icon on the button to indicate that the button is unusable. You might want to provide users with a different cue that the button is inactive. For example, you might want to show the unusable buttons with a red circle with slash through it over the text and icon.

Figure 4. Inactive control buttons image

Figure 5 shows the appearance of the control buttons when the pointer is resting on them (the hover state). The sample skin uses a high-contrast scheme for the hover state to indicate that the button is available for user input and that the pointing device's pointer is resting on that button.

Figure 5. Control buttons hover state image

Adding Script to Make the Buttons Work

After you finish designing all the graphics for your UI elements and mapping the elements in the mapping image file, you must write the script for the skin definition file so the buttons will respond to user input. The following code shows an example of the XML script that displays the skin and makes the Play button respond to user input.

<THEME>
    <VIEW
        clippingColor = "#FFCCCC"
        backgroundImage = "SkinBase.bmp"
        titleBar = "false">
       <BUTTONGROUP
            mappingImage = "Buttons_Mask.bmp"
            hoverImage = "Buttons_Hover.bmp" 
            disabledImage = "Buttons_Inactive.bmp" 
            cursor = "hand" >
            <PLAYELEMENT
                mappingColor = "#009966"
                accKeyboardShortcut = "CTRL+P"
                accName = "Play Button" />
               </BUTTONGROUP>
    </VIEW>
</THEME>

For specific information about the Player elements and attributes, see the Windows Media Player Software Development Kit (SDK).

The previous script example specifies SkinBase.bmp as the base image for the skin and a BUTTONGROUP element containing all of the user input elements of the skin. The script contained within the BUTTONGROUP element specifies the image files that represent the different states of the buttons in the group. It also contains a PLAYELEMENT child element that defines the location of the Play button on the skin. Notice that the script includes accName and accKeyboardShortcut attributes. Values for these attributes were added to provide screen reader software with a description of the button and the corresponding keyboard shortcut.

The example illustrates the script for the Play button. The code for the sample skin contains child elements for each of the buttons within the button group. Remember that the order of the child elements within the script determines the tab order of the buttons. The code for the sample skin lists the control buttons first. Because the focus should move from left to right and from top to bottom when the user presses TAB, the child elements in the script are defined in the following order: Play, Pause, Stop, Rewind, Fast Forward, Previous, and Next.

Adding the Video Element

After you add script for all of the buttons, the next step is adding script that defines the video window. The following is an example of the code that can be used to create the video window.

        <VIDEO
            tabStop = "false"
            top = "45"
            left = "15"
            width = "480"
            height = "360" />

The script specifies that the video window will be positioned in the video display area of the skin base graphic and have a size of 480 X 360 pixels. Because the VIDEO element cannot accept user input, you should exclude this element from the tab order. The default tabStop value for this element is true, so you must set the tabStop attribute to false to prevent the video window from being included in the tab order.

Viewing the Sample Skin Files

All of the files mentioned in this article are contained within the sample skin file, Accessible.wmz, which is available for download from the Microsoft Download Center. As with all skins, you can double-click the Accessible.wmz file to make the skin available in Windows Media Player. You can also access the art files, skin definition file, and JScript files by uncompressing the .wmz file.

Using Additional Accessibility Features

This article includes only some of the accessibility features that you can incorporate into your skin design. The sample skin is a starting point for demonstration purposes only. The following list contains some ideas for making your skin more accessible:

• Provide users with volume controls and a mute button. All skins should include easy methods for adjusting the volume.
• Include a progress bar that indicates that content is playing, displays the timeline of the content, and enables users to move quickly to a particular point in the presentation.
• Enable users to adjust the equalizer of the Player. By adjusting the equalizer, users can determine the mix of treble and bass that is appropriate for them and for the content.
• Create your graphics in different sizes and colors, and provide users with an option to select the size or color scheme that best fits their needs.
• Add an option that lets users play content at faster or slower speeds than normal without significantly affecting audio and video fidelity. The ability to slow down a presentation without affecting the pitch or tone of the audio is a good way to enhance the clarity of spoken presentations for people who have cognitive disabilities.

For More Information

For complete information about creating player skins, you can download the Windows Media Player 9 Series SDK.

The following articles contain additional information about many of the concepts discussed in this article:

• Enabling Users to Personalize Your Skin
• Adding Closed Captions to Digital Media