Interactive Markets - The use of Macromedia Flash on the Biz/ed Web site

Authors

Andrew Ashwin, Content Developer, Institute for Learning and Research Technology, University of Bristol

Kieren Pitts, Senior Technical Researcher, Institute for Learning and Research Technology, University of Bristol

Andy Ramsden, Learning Technology Adviser, Learning Technology Support Service, University of Bristol

Key technology

E-learning Websites; animation; Macromedia Flash; XML; SVG.

Specific Issues/Key Terms

non-visual accessibility; Flash accessibility, keyboard accessibility.

Introduction

Biz/ed is a Joint Information Systems Committee (JISC) funded service for students and educators on economics and business related subjects. A large number of online educational resources appear to be electronic versions of textbooks; they are 'text heavy' and 'static'. Biz/ed is committed to the development of engaging resources that take advantage of the Web in its own right rather than just using it as a medium for delivering static resources. An example of one of these resources would be the Biz/ed Virtual Economy - an online, interactive model of the UK economy developed in conjunction with the Institute for Fiscal Studies and Oxford Economic Forecasting.

Currently, Biz/ed's focus is to develop dynamic, interactive and educational resources that can be used within the classroom setting and by self-paced learners alike. Wherever possible, Biz/ed develops resources that are platform independent and rely on server architecture and CGI (Common Gateway Interface) scripting rather than producing materials that require particular plug-ins to be present on the client machine. However, in some instances the type of interactivity required means that this is not possible and we then use a proprietary technology.

Project Aim

The aim behind the resource was to examine the concepts of supply and demand through a series of Web pages each featuring a number of interactive mini-simulations. The activity was designed to develop understanding of how markets work in the real world and how 'market forces' influence resource allocation.

The interactive nature of the resource means that it suits learners who favour a more active learning style. In addition the extensive notes leading learners between mini-simulations mean that the resource is also suitable for learners who prefer a more reflective and/or linear approach.

Technology Used

The technology used is Macromedia Flash 6. Macromedia Flash was chosen as it provided the best way to present interactive content of the type required by the resource - in essence the ability to manipulate graphs using mouse and/or keyboard and have the results of these manipulations represented by dynamically drawn lines or animations.

Flash is a proprietary format and consequently a plug-in is required in order to view the resource. It is recognised that not all users of the resource will have the correct plug-in but [Macromedia's usage statistics](http://www.macromedia.com/software/player_census/flashplayer/version_penetration.html"MAcromedia statistics on Flash Player availability) suggest that 96% of European users are able to view Flash 6 content.

Accessibility Design Objectives

Biz/ed strives to make its resources as accessible as possible, in addition to social and moral obligations we also have a legal obligation to produce accessible content under the Disability Discrimination Act (1995).

In practice this means our Web pages have been produced to satisfy a minimum of the W3C Web Content Accessibility Guidelines Priority 1 and 2 checkpoints (also known as the 'Double-A' conformance level). In addition, the W3C Web Content Accessibility Guidelines also apply to online Flash content and we again adhered to these guidelines. The Flash files were also developed followng accessibility techniques produced by the WebAIM project.

Project success

We feel the Flash movies met the accessibility design objectives outlined above. The movies themselves were modified to be 'open' to screen readers; this was achieved by providing names and descriptions for the various elements of the movies using the Flash authoring software. Elements that were solely presentational were not exposed to screen readers. We provided keyboard controls for the movies to ensure that they could be used without a mouse (see Example 1) and also made sure the movies could be scaled.

The example shows the Internactive Markets diagram described in the case study - and how a user can select an element using the keyboard rather than the mouse. The item currently selected is indicated by the yellow box.

Example 1: An example of manipulating the Flash resource using the keyboard rather than the mouse (The item currently selected is indicated by the yellow box.)

The Flash authoring tool produces HTML code which can be used to embed Flash content within a Web page. However, this HTML code does not adhere to valid HTML syntax and results in the pages failing checkpoint 3.2 of the Web Content Accessibility Guidelines (WCAG). Consequently, and to ensure our pages met the 'Double-A' conformance level, we embedded the Flash content in our XHTML pages using the 'twice cooked' method first described in A List Apart online magazine (see Related Sites). Using this method also allowed us to provide alternative content should a Flash plug-in be unavailable. In these situations an annotated GIF image is displayed instead of the Flash movie. If the user agent does not display images (for whatever reason) then ALT text is presented instead.

An example of the XHTML code used to embed the Flash content and provide two accessible alternatives:

<object type="application/x-shockwave-flash"
    data="contain.swf?path=demand_and_supply.swf"
    width="500" height="400">
    <param name="movie" 
    value="contain.swf?path=demand_and_supply.swf" />
    <img src="demandandsupply.gif" width="742" height="394" 
    alt="No Flash plugin detected: Demand and Supply
    1. As demand for a good increases there is a temporary
    shortage, when demand decreases there is a temporary
    surplus." />
</object>

Feedback:

  • "I find the interactive areas very good and helpful"
  • "I like the idea of these interactive simulations that have now become part of the website"

Reflections

On reflection we feel we have developed an accessible, educational and highly interactive resource. However, using Flash is not without its problems. Although our resources were adapted to provide support for screen readers the ability for these readers to access this information is dependent on a range of factors.

One of the most serious issues is that the text content within Flash content is passed to screen reading software by Microsoft Active Accessibility (MSAA). Unfortunately this means that the text alternative within the Flash content is only accessible if the user is using a Windows operating system and Microsoft Internet Explorer. It is also possible that the 'twice cooked' method of presentation (used to ensure WCAG compliance) adds an additional layer of complexity that may result in problems when a screen reader accesses the content.

A further consideration is the time required to add additional information to the Flash movie to make it accessible. Whilst this should not be underestimated we feel that the benefits of making these changes outweighs the additional time. Furthermore, as is the case with many accessibility techniques the benefits are felt by all users not just those with a disability.

Other Comments

At the time of writing (December 2004) Macromedia Flash represented the best way to present interactive content on the Web. The plug-in penetration is high and it is likely that most of our users will already have the plug-in installed irrespective of the institution in which they work or study. However, it is possible to deliver similar content in the form of Scalable Vector Graphics (SVG). SVG is an open format written using an XML-based language. Presentation can be controlled using Cascading Style Sheets and because of the open nature of SVGs fewer accessibility barriers exist. At the moment a plug-in is required in order to view SVG (penetration is roughly 14% in Europe) but the next generation of Web browsers will provide native support for SVGs and consequently a plug-in will not be required.

A further benefit of SVG's XML roots is that files can be edited using a basic text editor.

The full Interactive Markets resource is available online at the Biz/ed web site


Related Sites

Accessibility and Flash MX 2004 (Macromedia)
An overview of the accessibility features of Flash MX 2004.
Creating Accessible Macromedia Flash Content (WebAIM)
WebAIM's tutorial on creating accessible Flash.
Flash Satay: Embedding Flash While Supporting Standards (A List Apart)
Drew McLellan's innovative technique for providing Flash content in a web page while still supporting HTML standards, and used in the Biz/ed project.
ILRT (University of Bristol)
Home page of the ILRT (Institute for Learning and Research Technology).
Web Content Accessibility Guidelines (W3C)
The WCAG are the de facto standard against which web accessiblity should be measured.