Techniques for WCAG 2.0

Skip to Content (Press Enter)

-

FLASH33: Using relative values for Flash object dimensions

Applicability

This technique relates to:

User Agent and Assistive Technology Support Notes

See User Agent Support for Flash for general information on user agent support.

Description

The objective of this technique is to specify the width and/or height of an embedded Flash object using relative units such as em values. The size of the Flash object is allowed to expand to fill the size of its container (a parent element) by setting the movie width and height to 100%. The container's width and height is set with relative units. This will allow user agents that support text resizing to resize the Flash object in line with changes in text size settings. When the Flash object's dimensions are adjusted its contents will be scaled, making it easier to read for low vision users.

Note: This technique is not necessary to support users who use zoom functionality in their browsers.

Examples

Example 1: Scaling text while keeping a minimum size

In this example, a Flash object is loaded into an HTML document using SWFObject's dynamic publishing method. The Flash object's container element is given a class name of "flashPlaceHolder". This class name is then targeted using CSS to set its width and height using relative em values. When the user increases or decreases the browser's text size, the Flash object will scale accordingly. To ensure that the object does not become too small when text size is decreased, the min-width and min-height properties are set to the default dimensions.

Example Code:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" 
  "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
  <head>
    <meta content="text/html; charset=UTF-8" http-equiv="Content-Type"/>
    <title>Flash Resize example</title>
    <script src="swfobject/swfobject.js" type="text/javascript"/>
    <script type="text/javascript">
    swfobject.embedSWF("scale_movie_dimensions_on_text_resize_as3.swf", 
    "flashPlaceHolder", "100%", "100%", "8")      
</script>

    <style type="text/css">
  #flashPlaceHolder {
    width: 20em;
    height: 15em;
    min-width: 320px;
    min-height: 240px;
  }
</style>
  </head>
  <body id="header">
    <h1>Flash Resize Demonstration</h1>
    <p>When the browser's text size is changed, the Flash movie will be
      resized accordingly.</p>
    <p id="flashPlaceHolder">Flash needs to be installed for this
      example to work</p>
  </body>
</html>

The result of this technique can be viewed in the working version of Scaling text while keeping a minimum size. The source of Scaling text while keeping a minimum size is available.

Editorial Note: The test zip contained a "swfobject" folder, which contained a number of files that looked redundant. Not sure if it needs to be packaged with the above .fla file, for the moment it's omitted.

Tests

Procedure

  1. Open a web page containing an embedded flash objects

  2. View the HTML to confirm that the width and height dimensions for the object containing the Flash object are specified using relative units such as em or percent (%).

Expected Results