Yahoo! Flash (R) Blog

Creating Accessible Components in Flash and Flex (Part 2)

In this article, I’ll go over the steps needed to enable accessibility for a custom component. While it takes a bit of getting used to, I think you’ll find that enabling accessibility for your components is not only beneficial to the many users who would like to interact with your component, but helps you to fine-tune and further enhance your components in general. To enable use with screen readers, follow these three (simple?) steps:

1. Determine object role
2. Create the Accessibility Implementation class for component
3. Add accessibility tie-ins to component class
   a) Create a placeholder for the static createAccessibilityImplementation() method
   b) Override initializeAccessibility() method
   c) (Flex only) Add AccessibilityClass metadata

Continue reading Creating Accessible Components in Flash and Flex (Part 2)…

Find conversations: bloglines | technorati

Share: on Yahoo! My Web | on del.icio.us | digg it! | reddit!

Creating Accessible Components in Flash and Flex

It’s been in the works for a while, but I finally had the chance to focus on making ASTRA components more accessible. Accessibility is not something many developers look at, but it’s slowly gaining ground. For many developers, even figuring out how to enable the built-in accessibility of Flash components is a job. But when you create custom components, implementing accessibility is another job entirely. Accessibility doesn’t come for free.

To begin my assessment of ASTRA components, I first had to learn to use a screen reader. I installed a trial of JAWS for Windows, which is the de facto screen reader technology, especially in regards to Flash. It’s important to note that although I develop on a Mac, I have to use Windows for accessibility testing. This is because Flash accessibility is based on Microsoft’s Active Accessibility standards, and only work on Windows machines. It can be argued that real accessibility is quite limited on the Mac, so this is more of an OS X limitation than a limitation of Flash. I also installed the Flex scripts add-ons, which are touted to provide more fine-grained info for the screen reader when using accessible Flex components.

Using  a screen reader, I quickly discovered, is a more involved process than it might seem. Your natural tendencies and habits have to be thrown out the window. For example, opening a browser window with an embedded swf, my first inclination was to use the mouse to navigate to a text input control and start typing. That didn’t work as planned. For one, a typical user of a screen reader is not going to be grabbing the mouse first thing, but using keyboard navigation to interact with an application, so I’d already cheated. Along with this, because of the way JAWS works, navigating to an input field won’t necessarily allow you to begin editing text–you must enter into “forms mode” in order to even start typing.

Once I got the basics of using JAWS down, I started to test our components. My original assumption was that the components would “mostly work” because many of them are based on lower-level components which have accessibility implementations built.

I was “mostly wrong.” A component is not the sum of its parts, in regards to a screen reader. For a component to be successfully understood by the user, it needs its own accessibility implementation built from scratch.

In the next article I’ll discuss what steps I took to create those implementations.

Find conversations: bloglines | technorati

Share: on Yahoo! My Web | on del.icio.us | digg it! | reddit!

Yahoo! Open Strategy (Y!OS) for the Rest of Us

In the last article, I hinted at Yahoo!’s Open Strategy, and mentioned that there were a few tools available for Flash and Flex developers: http://developer.yahoo.com/flash/yos. We’ve polished it up and it’s ready for release. So head on over and start developing!

To read more about Y!OS, check this out.

Find conversations: bloglines | technorati

Share: on Yahoo! My Web | on del.icio.us | digg it! | reddit!

With a Little App from my Friends

No doubt you’ve heard a little something about Yahoo!’s new open strategy. If you attended Open Hack Day, you would’ve even been able to use the new Social APIs, which allow you to build powerful social applications on our Yahoo! Applications Platform (YAP).

Not to let down the Flash folks, we’ve created some nice AS3 APIs that let you easily integrate social data and create a Flash or Flex application easily in YAP. There’s even a great Yahoo! theme for Flex applications, to give you a standard look and feel right from the start.

If you’re itching to see what this is all about, it’s currently available as a preview release at http://developer.yahoo.com/flash/yos. While you won’t be able to actually use the services (sorry, coming soon), you can get a head start on learning the system and even begin developing your apps, as the code and documentation are all there for the taking. There’s even lots of source code for example applications, so you can be one step ahead of your friends.[Edit: it's now released!]

Find conversations: bloglines | technorati

Share: on Yahoo! My Web | on del.icio.us | digg it! | reddit!

Accessible = true;
Flash and Flex Accessibility Docs

Adobe just released a draft of some new documentation for accessibility in Flash and Flex. While this doesn’t mean that the way accessibility is used has changed, it does show that they’re being more open in its usage. This is big news for component developers like ourselves. Basically, it means that there is now an official recommendation and best practice for implementing accessibility in custom components.

Summary of What’s Changed:

• AccessibilityImplementation is documented for the first time
• The Accessibility class is more fully documented
• Everything under the mx.accessibility.* package is documented
• Examples for accessibility implementations are now available

The main class to look at for Flash development is flash.accessibility.AccessibilityImplementation.

For Flex, the main point of reference would be mx.accessibility.AccImpl (which, in turn, uses AccessibilityImplementation). Flex component developers can look at the documentation or source code for the accessibility implementations of the standard Flex components, which all extend this AccImpl class. (For instance, mx.controls.Button uses a class called mx.accessibility.ButtonAccImpl, while mx.containers.Panel uses mx.accessibility.PanelAccImpl to enable its accessibility.)

If you’ve been browsing the source code for Flex components, you may already be familiar with these classes. You may have also noticed the lack of documentation in the source code. That should change in an upcoming release. As for now, you can stay ahead of the curve by checking out this draft.

Find conversations: bloglines | technorati

Share: on Yahoo! My Web | on del.icio.us | digg it! | reddit!

ASTRA Aquarium: A Fun and Instructive Example Application

We just completed the ASTRA Aquarium, a new example that uses all ASTRA 1.0 components (Tree, Menu, TabBar, AutoComplete, and Charts) in one fun application.

Aquarium shows how to integrate these components in a real application and how to customize them for special use. Definite highlights are the custom skins for TabBar and Tree, a custom CellRenderer for Tree featuring interaction and animation, and the integration of AutoComplete with Tree via ActionScript. Oh, and yes, we also put in the Charts component to display current statistics. Check out the details at developer.yahoo.com/flash (”Featured App” box on the top right), and we hope you’ll have fun with it!

Find conversations: bloglines | technorati

Share: on Yahoo! My Web | on del.icio.us | digg it! | reddit!

Yahoo! Pipes + Flash: Smokin’ Good

You’ve probably heard the buzz about Yahoo! Pipes, a powerful and easy tool for mashing up data from across the Internet. But did you know that Pipes is one of Yahoo!’s Flash-friendly properties? Our buddies at Pipes have generously deployed an open crossdomain policy file, giving all Flash and Flex developers access to the raw Pipes output. Just like with Flickr (see Allen’s post), there are no security worries, no roadblocks, and no limits to what you can do with the Pipes data. Pipes can even be your proxy for grabbing data from places that aren’t themselves accessible using Flash (although some sources may prevent Pipes from accessing their data—you’ll want to make sure a particular data source works with Pipes before using it.)

If you haven’t tried Pipes, definitely check it out. It has an intuitive visual interface that allows you to import and manipulate data from across the web, with zero coding skills necessary! Want to mash up all your favorite RSS feeds into a single super-feed? How about checking Flickr images against recent news articles? Whatever you create, you can export to your preferred format, ready to view in a reader or, as shown below, in your own interface built with Flash or Flex.

Once you create a pipe or try one of the many already available, you are just a couple of steps away from using that data in Flash. In the example below, we are using a simple pipe that aggregates some news feeds. First, let’s run the pipe and choose More Options > Get as RSS.

Notice that the URL you get is of the form http://pipes.yahoo.com/pipes/pipe.run?somepipe&_render=rss. That’s almost the URL you’ll use to retrieve the XML data, but not quite. For security purposes, most of Yahoo! APIs use *.yahooapis.com as the API entrypoint. So once you replace pipes.yahoo.com with pipes.yahooapis.com in that URL, you’re in business (note that there’s no crossdomain on pipes.yahoo.com, but there is one on pipes.yahooapis.com—that’s what’s working the magic.) Now, if your pipe has any parameters you need to include, just build out the URL as needed and send it along.

Here’s a really simple example in Flex that uses the pipe described above.

Please install Flash 9 to see this example.

Check out the source here.

Find conversations: bloglines | technorati

Share: on Yahoo! My Web | on del.icio.us | digg it! | reddit!

Developing with the Display List in ActionScript 3

If you’re migrating from AS2 to AS3, or you’re just getting started with Flash development, you may be interested in an article I wrote for the Yahoo! Flash Developer Center entitled Developing with the Display List in ActionScript 3. It focuses on the basics of display list manipulation, important changes you may encounter if you’re migrating from ActionScript 2, and best practices for communicating between MovieClips and other DisplayObjects.

As many new developers moving to ActionScript 3 discover, the new language is stricter and many of the shortcuts one may have taken in the past with AS2 will have certain roadblocks that must be crossed in AS3. The article tries to outline the best ways to understand the changes, work around them as needed, and most importantly, how to develop applications and websites in AS3 so that you don’t need to use these workarounds. I included several source code examples, including the progression of a simple application as I try to update it with best practices.

If you’re looking to write more flexible and maintainable AS3 code, or you’d like to help a fellow developer who is struggling with the changes from AS2 to AS3, I hope the article will be helpful.

Find conversations: bloglines | technorati

Share: on Yahoo! My Web | on del.icio.us | digg it! | reddit!