Our new URI: http://blogs.adobe.com/accessibility/.

We look forward to your comments on our new blog!

It is and will continue to be very interesting to see how screen readers and web developers handle increasingly dynamic content. The issues that we've dealt with in "traditional" web accessibility have been largely providing equivalents, associations, and structure, but with AJAX content the importance of notification is amplified. When developing content, we need to ask whether a user who is unable to view the entire screen will know if a change has occurred on the page and if so, whether it is reasonable to expect that he will know where on the page that change occurred. You might be able to expect that a screen reader user will run into a piece of changed content if the change takes place immediately downstream of the point of interaction, but changing content at the top of the page with a link halfway down the page, or even right above the interaction point, is problematic for many users.

Whether dynamically changing elements trigger a full, partial, or no screen update for the screen reader is up to the screen reader developers. Some types of page changes make this happen, some don't. A huge problem for AJAX, this is also arguably the toughest challenge in accessible Flash development. If you are interested in what is difficult, possible, or hopeful in accessible AJAX development, take a look at accessible Flash – there are strong parallels.

Being at Macromedia and focused on accessibility, my primary concerns are that the Flash content is available to any browser capable of displaying Flash and that users who interact with the Flash content can do so in an accessible fashion. Validity is nice to have, but not at the expense of the other two concerns.

I created a few test files that represent different approaches to including Flash in a web page and then tested them. Methods, testing criteria, and results at the end of this posting.

Conclusion

I won't make you wait until the end. The main points to convey are:

• If you need a method that works everywhere, and don't mind using IE-specific (but valid) comments, the nested object method is for you (I'd like to thank Ben Curtis for pointing out my error on this one – I originally omitted the IE comments, which affects the performance, and the overall results of the investigation).
• FlashObject and UFO objects work fine with assistive technology, but if access for non-javascript users is a concern then div that is replaced would need an equivalent version of the Flash content in HTML, which is increasingly difficult as the Flash becomes more complex and interactive.
• Flash Satay objects are not properly read by JAWS, rendering the content inaccessible to screen reader users. The satay method is good in every way analyzed in this study, but unfortunately JAWS ignores Flash embedded in this way. The data exists in MSAA, as shown in MSAA inspection tools and by Window-Eyes reading the content correctly.

The best solution? Using a server-side scripting language (ColdFusion, ASP, PHP, etc), a developer could deliver a page that satifies all requirements to individual browsers without too much difficulty. The issue is delivering one version that satisfies all. Short of that, I do think that the UFO method is very useful, but prefer the Flash default and the nested object methods. I'd rather deliver code with small validity issues than shut out a whole class of users, and I am a little wary of proprietary IE comments.

Thoughts, comments, additional data welcomed.

Methods tested

Flash default

This is what is created by the Flash authoring tool.

Flash default, less embed

Same as the Flash default, but with the embed element removed .

Flash Satay

This technique uses a single object element and no embed element, but differs from the Flash default object's code.

UFO / FlashObject

These techniques use javascript to replace a div element with the necessary markup for Flash to be included in the page.

Nested Objects

Uses an object within an object. The general idea is that the first object works in IE-based browsers, and the inner object works in Gecko-based browsers such as Firefox. In this example there are IE-specific comments that prevent IE from displaying both objects.

Criteria

Browser display

Tested whether the Flash content displays in IE, Firefox, and Safari. Not a comprehensive list, but these are baseline requirements.

MSAA

I used Inspect32.exe to view the MSAA data tree to verify whether information is provided to this API for screen readers to use.

Keyboard access (independent of screen reader use)

This is as important as screen reader access.

Acceptance testing in a few screen readers and talking browsers

Agan, not a comprehensive list, but an important selection. If anyone with another tool that isn't list wants to send additional results, we'll post them, once confirmed.

Valid HTML

Is the code valid HTML or XHTML?

Uses embed element

Is the embed element used for some browsers? You can decide if generated HTML needs to be valid or if this is OK...

Requires Javascript

Is javascript required to display the Flash?

Results

In Flash Player 6 and 7, the single biggest technical headache was managing the tab order. You had to test the movie multiple times a day to ensure that the reading order had not gone off the rails. In Flash Player 8, it gets much better.

I built out some test cases similar to a set I did about a year ago to help developers understand the new feature. Try these out with a screen reader or download the source files and check them out for yourself.

Reading Order Cases

The following is a list of scenarios illustrating how .tabindex can be used to control reading order in Macromedia Flash Player 8.

Default Behavior
Case 1
Three pieces of static text on the stage. Red from left to right, “Third, Second, First”. No ActionScript is defined.

Download .fla file

Basic Reading Order
Case 2
Three pieces of dynamic text on the stage. Each has an instance name specified. The tab order is specified using ActionScript to read from right to left, “First, Second, Third”.

_root.first_txt.tabIndex = 1;
_root.second_txt.tabIndex = 2;
_root.third_txt.tabIndex = 3;

Download .fla file

Partial Reading Order
Case 3
Four pieces of dynamic text on the stage. Each has an instance name specified. The third text object is not listed in the tab order. The tab order is specified using ActionScript to read from right to left, “First, Second, Fourth”. The third object is placed at the end of the reading order.

_root.first_txt.tabIndex = 1;
_root.second_txt.tabIndex = 2;
_root.fourth_txt.tabIndex = 4;

Download .fla file

Case 4
This is the same as Case 3, but with a circle drawn on the stage. This does not affect the reading order.

Download .fla file

Case 5
This is the same as Case three, but the circle has now been saved as a graphic symbol. This does not affect the reading order.

Download .fla file

Case 6
This is the same as Case 4, but this time the circle has been saved as a movie clip symbol. No instance name is specified and the symbol is left out of the tab order in the ActionScript. This does not affect the reading order.

Download .fla file

Scoping
Case 7
This is the same as Case 2. This time, the static text element is saved as a movie clip, given an instance name and the movie clip is placed in the tab order. The reading order reverts to the default.

_root.first_mc.tabIndex = 1;
_root.second_mc.tabIndex = 2;
_root.third_mc.tabIndex = 3;

Download .fla file

Case 8
This is the same as Case 2. This time, the path for each object is relative, not absolute. This does not affect the reading order.

this.first_txt.tabIndex = 1;
this.second_txt.tabIndex = 2;
this.third_txt.tabIndex = 3;

Download .fla file

Use of .silent and ._visible
Case 9
Four pieces of dynamic text on the stage. Each has an instance name specified and listed in the tab order. The third text object has the .silent property set to true. The third object is not read.

_root.first_txt.tabIndex = 1;
_root.second_txt.tabIndex = 2;
_root.third_txt.tabIndex = 3;
_root.fourth_txt.tabIndex = 4;

_root.third_txt._accProps = new Object();
_root.third_txt._accProps.silent = true;
Accessibility.updateProperties;

Download .fla file

Case 10
Four pieces of dynamic text on the stage. Each has an instance name specified and listed in the tab order. The third text object has the ._visible property set to false. The third object is not shown or read.

_root.first_txt.tabIndex = 1;
_root.second_txt.tabIndex = 2;
_root.third_txt.tabIndex = 3;
_root.fourth_txt.tabIndex = 4;

_root.third_txt._visible = false;

Download .fla file

Loading movies into a parent swf
Case 11
This movie loads three child movies into the parent shell. The tab order is specified in each of the child .swfs. The tabIndex values for each of the child .swfs are unique. The text reads in alphabetical order.

Download .fla files

One of the concerns that he expresses is that Flash can be accessible, but only with a panel of experts that includes me, the RNIB, and the RNID. The long list of names on the press release might convey that sense and I am sorry that it did.

The JKRowling.com site was really done primarily by Lightmaker. When they first started looking at it, I spent an hour on the phone with the developer. Most of what he did was taken straight from my whitepaper on Best Practices for Flash Accessibility. I got a couple of questions via email but that was it. A couple of months later I got a message reading ‘we’re done’. The work they did to that point was really impressive and very close to what you see today.

A natural step in the process here was to find people with disabilities to review and comment on the site. There are a number of ways to accomplish this informally. However, this is a high profile project and reflects a number of firsts. Thus, we really needed to get the RNIB and the RNID involved. The RNIB made a list of suggestions. The list was extensive, but relatively simple to implement. About a month later, the site was finished. I don't think you would see much more involvement from the experts on a high profile HTML site.

What makes the site so amazing, from my humble perspective, is that it is a great teaching tool. The techniques are easy to understand and simple to implement. I went over the most complex issue yesterday. My hope is that designers will take from this that accessibility in Flash does not require a huge amount of extra effort, but even implementing a limited number of steps, a site can be made much better.

So to answer the original question…at least a couple. Whether you are working in Flash, HTML or C++, you should:

• Get some advice before you start, it'll save you time and effort
• Follow best practices along the way
• Get feedback from people with disabilities, it makes a huge difference

Progressive disclosure

As I mentioned yesterday, one of the things I really love about the site is the simplicity of it. Perhaps my favorite aspect of the site is the way it handles complex elements. One of the key usability challenges for screen reader users is getting to the information you want on a page. There are a number of places on the site where there are a lot of little elements grouped together. In these cases, the screen reader user has to listen to these elements on the page before they can get to the info they want.

As one example, take the phone. In the upper left hand corner of the site is a mobile phone. It allows you to dial numbers and even receive calls. The problem with the phone is that it has 13 buttons. For someone viewing the site using a screen reader, reading the site in it unmodified form would mean listening to all of the buttons on the phone, one by one until they got to the next section of the site, the scrapbook. This is a very tedious way of navigating the site.

To address this issue, the developer grouped these buttons together into one button. When the screen reader comes to the phone, they hear, “Mobile phone, click here to pick up the phone button.” By default, the .silent property of all of the buttons is set to true. When the user picks up the phone, the buttons are exposed and the rest of the site is hidden. The only other addition is that the developer added a button to ‘hang up’ the phone and restore the default state.

This is a very simple shell game called progressive disclosure. It is analogous to rollover menus in JavaScript we see visually all the time. It provides the user with a limited set of information and then provides more only when the user asks for it. Technically, it is not difficult to implement. It only requires the author to group items logically and then use the .silent property to show and hide objects as needed.

First, why Flash? The primary reason for this is to create a playful, immersive environment. The original site included a visual representation of JK Rowling’s desk, audio of the sounds of her neighborhood, and an interactive game built into the site. It was a unique site that won the MAX 2004 award for the best Media, Entertainment, and Gaming Experience. The use of Flash allowed Lightmaker to provide a layer of richness to the experience that was not possible in HTML alone.

When thinking about accessibility in the context of this site, the question became how to create the same type of experience for a variety of users with disabilities. Using HTML, the same information conveyed using Flash, can be provided to the user. In fact, the site already included a ‘text only’ version available at: http://www.jkrowling.com/textonly/welcome.cfm. If you check it out, it provides information but does not have the same richness or feel as the Flash version. Thus, Lightmaker and JK Rowling started looking at ways to make the Flash experience accessible to people with disabilities. The goal became to create a site that provided the same immersive experience as the original site, but that was accessible to people with disabilities. The only way to do that, was to use Flash. The result is pretty compelling.

I wrote a paper a while back about accessibility and design titled, ‘Web Accessibility and Design: A Failure of the Imagination’. In it, I describe the fact that we have too few sites that are both great examples of design and accessibility. Sites tend to be either one or the other, not both. The projects are either staffed by design experts or accessibility experts, rarely both. What I love about this project is that it clearly shows what can happen when the two groups combine. The guys at Lightmaker that did the design work here are truly great designers. Their work is unique and compelling without parallel. For this project, they partnered with the RNIB to get a sense of how to make a site that was not only accessible, but truly usable for people with disabilities.

What I love about this site is its simplicity. In the process of developing the site, the developer at Lightmaker came up with a number of nifty little tricks. Most of them are not technical in their implementation and thus, infinitely replicable. I think this site will serve as a great model for developers of accessible sites in Flash.

Check it out (and be sure to select the accessible version) at: www.jkrowling.com.

Second, we recently updated our accessibility portal at: www.macromedia.com/accessibility. Please check it out for the latest information on accessible design and macromedia tools. It includes an updated whitepaper on accessible Flash design, product info and a list of sample sites. We will be updating the site frequently in the months to come, please visit often.

The first covered Captivate and accessibility. The files can be found at:
http://macromedia.breezecentral.com/p78355859/

For more information on Captivate and accessibility, see:
http://www.macromedia.com/macromedia/accessibility/features/captivate/

The second was an overview of accessibility. The files can be found at:
http://macromedia.breezecentral.com/p53657656/

Screen Reader Accessible Examples

Dignubia - EDC
http://www.dignubia.org/
A simple example of making complex visual nav metaphors accessible.

Zoot Suit Riots - WGBH Television
http://www.pbs.org/wgbh/amex/zoot/eng_sfeature/mx/pop_zoot_mx.html
The first example of accessible Flash, still relevant. Simple means of handling navigation.

The Professionals – Macromedia
http://www.macromedia.com/resources/student/campaign/bts_fall2004/theprofessionals/
An example of an accessible comic book created as part of ‘The Professionals’ campaign.

Bank One Demos
http://www2.bankone.com/presents/banking/demonew/consumer/index2.html
This is a simple slide based demonstration.

GeoNet - Houghton Mifflin
http://www.eduplace.com/geonet/splash.html
A simple game with very clever attention to accessibility

How Your Ear Understands What Your Ears Hear – National Institute for Health
http://science.education.nih.gov/supplements/nih3/hearing/activities/activities_toc.htm
An excellent example of learning content accessible to screen reader users and other users with disabilities.

Newport Unlimited – Newport, UK
http://newportunlimited.co.uk/flash/
A web based tour of Newport written with accessibility in mind. A terrific example of how to handle structured navigation in Flash.

Crossword Puzzles - Houghton Mifflin
http://www.eduplace.com/tacklereading/puzzles.html
Be sure to choose one of the crossword puzzles. A terrific example of a complex game that is accessible to screen reader users.

Flex Samples - Macromedia
http://www.macromedia.com/macromedia/accessibility/features/flex/example_apps.html
Two examples of Flash Content using the macromedia flex server.

Self Voicing Examples

When You Meet Someone Who Can’t See – Lighthouse International
http://www.visionconnection.org/Content/Community/FamilyandFriendsCorner/WhaDoYouDoWhenYouMeetSomeoneWhoCantSee/default.htm
An early but effective self voicing demo. It was designed to run independent of screen reader software in contexts such as a kiosk.

Pin The Tail – Guppy Graphics
http://www.guppygraphics.com/games/pinthetail.html
A small self voicing application written for young children. An excellent example of how to use self voicing applications

Captioning / Sign Language Examples

America OnLine - Princess Natasha
http://www.aol.com/accessibility/press/sample.html
Simple captioning example

Bristol City Council - Services for the Deaf
http://www.bristol-city.gov.uk/Fuguri/frame.html?S+SSM01700+BG+F+BMM00107+SSM00105+SSM01002
A terrific example of captioning delivered via Flash

Play School Stories - Australia Broadcasting Company
http://www.abc.net.au/children/play/stories/
An example that relies on sign language instead of captioning to deliver equivalents to young children with hearing impairments.

Keyboard Accessibility Examples

Your Potential, Our Passion - Microsoft
http://www.microsoft.com/mscorp/innovation/yourpotential/main.html
This animation is not accessible to screen reader users but does have a unique means of exposing access keys.

Word Search – Houghton Mifflin
http://www.eduplace.com/cgi-bin/schtemplate.cgi?template=/tacklereading/puzzles/wwf/wordfind.thtml&dataurl=/tacklereading/puzzles/wwf/tr_wwf_1.txt&printurl=/tacklereading/puzzles/wwf/graphics/fun_football_find_1.pdf
A unique word search puzzle designed to serve children with mobility impairments. It is also screen reader accessible, though this is intended to serve students who rely on screen magnifiers who can see the layout of the screen.

Download file

http://www.comm.twcu.ac.jp/~nabe/data/CSUN2005/

http://macromedia.breezecentral.com/p55507347/

Michael and I will try to record to the audio this week.

I will post more thoughtful notes later. SxSW is always a great place to chat and generate new ideas. Thanks to all involved for making it a terrific event.

Before posting this on the accessibility portal, I thought I might post it on this blog for feedback. At the time I am posting this, there is not a transcript available. It is in process now and should be available in the next few days.

Flash Accessibility Part 1 – Introduction to the Accessibility
http://macromedia.breezecentral.com/p29082639/