ARIAs with Flash, Flex, and AIR

My overview

Adobe T-Shirt saying "Accessibility: it's not just for HTML anymore."I.e. Accessible Rich Internet Applications with Flash, Flex & Air.

This presentation at Techshare by Andrew Kirkpatrick (Sr. Product Mgr, Accessibility, Adobe) took us through some of the technologies available, with a special eye on the accessibility possibilities and things you need to watch out for. With all the HTML5 buzz/arguments, it is worth remembering that many of the current issues there have already been dealt with in Flash and other technologies.

There were also a couple of announcements here of major improvements to accessibility for two Adobe products.

Andrew had a bit of trouble with PowerPoint and the conference system, I was a little surprised he didn’t PDF the presentation and use Acrobat at full screen? That’s a useful fall-back, but he took it in his stride, and it was of course the demos that people were most interested in anyway.

Quick side question: What’s the most suitable element for interjecting comments into an outline of someone else’s text in HTML 4 or 5? I’m not quoting directly, so it doesn’t fit the usual transcription methods.


Andrew’s Presentation

We define Rich Internet Applications as web based sites with desktop type functionality.
However, it’s a slippery slope definition, as you can have boring desktop apps [e.g. help] and very interactive web applications.

I was involved in the Section 508 at an earlier state, where previously desktop and web guidelines were considered separate, but they are really the same set of issues.

Flash platform History

  • Flash player started support of MSAA with version 6 in 2001. These days, AT users should have an expectation of access to flash content.
  • Flex provides as set of Flash based controls. [Flex is to Flash what jQuery UI is to JavaScript]. 28 accessible control types (compared to 7 in HTML). Flex developer previously needed to turn on accessibility, now in the [upcoming version 4 release] it will be on by default.
  • There are still things that need attending to by the author/developer, e.g. alt text.

Air

Air delivers Flash based apps to the desktop. At the moment, you’ll see a lot of twitter apps, but soon you’ll see things like company HR applications. Allows you to develop in Flash and/or HTML, and deliver cross platform.

Up to now, Air applications have not been accessible. I can announce this week that the next version will have support for accessibility. Uses Webkit, and we can’t yet use that to convey accessibility information yet, so accessibility in HTML isn’t there, but Flash based content is. [Flash more accessible than the HTML, oh the irony!]

Adobe is working with Freedom Scientific and NVDA, plus vendor programme.

Examples

creature discomforts screen shot showing signing in the video

  • Creaturediscomforts.org, a Flash app, interesting because they offer subtitles and sign language. But, it doesn’t have accessible controls.
  • My story. In Jaws you can use Ins-F5, review the control. Can read through the text. When using the screen reader, it didn’t open player automatically. The developer detected AT, and doesn’t run it by default. Then the user can start it when they want to.
  • See other examples at Adobe.com/accessibility/examples.
  • Kingtut.org uses the default flash components, skinned, accessible interface with little additional effort.
  • Easy-Youtube uses an HTML interface to control the flash.
  • CNET TV [sometimes] provides captioning.

Improving the current situation

The User’s role:

  • Let developers know if their application doesn’t work for you. (Expectation is that it should work.) If it’s a train wreck, let them know.
  • Let developers know if their app works well.
  • Don’t turn flash off by default (please!)
  • Let Adobe know what works, and what doesn’t, we can campaign on your behalf.

Developers role:

  • Following WCAG 2 is a great start.
  • Flash authoring tool has panel, but the most powerful flexible way is via Actionscript.

Pertinent WCAG 2 checkpoints

Meaningful sequence

The default order in Flash is determined by the player, often not correctly (depending on the layout). For more complex layouts a human needs to set this order, either in control panel or in actionscript.

aDesigner is an eclipse based tool to help evaluate flash content, including the ordering.

Allow for resizing text

This is not done for you by the player, but you can use CSS to style the text, and then Firefox & Internet Explorer’s browser controls will resize text.

[I asked: what about varying layout?]

If you add a font resizing button, that could also change a ‘state’, which could then change the layout, or do any other change you like.

Contrast
This is really an authoring/design issue, neither helped nor hindered by the technology.
Name, role, value:
Flex and Flash support these automatically, you may not need to do anything. It’s not so easy when you use more complex components (like the accordion in Flex). aDesigner and Inspect 32 can be used to evaluate Flash content.

See the Adobe.com/accessibility site for more, and the blog for the latest things (that haven’t been delayed by the web team).

Tagged with:


2 Contributions to “ARIAs with Flash, Flex, and AIR”

  1. Ben Millard wrote:

    What’s the most suitable element for interjecting comments into an outline of someone else’s text in HTML 4 or 5?

    I would probably use <ins> for this.

    A few of your paragraphs in this and the previous article seem be using <br> instead of </p><p>, by the way.

    Your list in the “Pertinent WCAG 2 checkpoints” section looks like it would suit <dl>. Indeed, this seems a closer match than any other structure I know of, including the <p><strong> approach it currently takes.

    How come you wrote ins-f5 instead of Ins+F5? (Both the casing and the punctuation you used are contrary to convention, at least on Windows.)

    Finally, I’m pretty sure the forward slashes to should not have spaces on either side when punctuating prose. “Name/role/value” should probably be “Name, role and value” since it is a list of features, not a list of interchangeable options.

    Nothing significant, just a few bits and bobs I noticed.

  2. AlastairC wrote:

    <ins> is possible, although now I try it, you’ll see I have setup styles that are more suited to the normal (such as it is) use as edited text.

    Well, it kinda works?

    Most of the other stuff is basically down to me not doing enough to the raw notes. Although the <br> tags are either intended, or it’s how WordPress is interpreting single breaks, but I don’t see many of them.