Overview Part #2

In this two-part blog post i will cover the technical, as well as overall aspects of implementing accessibility into the EventManager Project. And not just any form of accessibility – the Game has earned the AA+ Certification from Access For All (their highest certification grade conform to WCAG 2.0).

Go here for the first blog post on accessibility. This second part will cover all the technically nitty-gritty, blood and tears that went into implementing accessibility for this project. :)

Some Resources First

Throughout my research and while developing the accessiblity implementation for EventManager i’ve collected useful resources on the web which i’m glad i can share with you via my delicious. There are notes for all the links available that will tell you what type of information you will find behind the click.

Accessibility Introduction

If you haven’t worked with accessiblity in Flash or Flex yet, here’s a short introduction on how it all works.

Flash has it’s own package responsible for all the accessibility features. This package is situated under flash.accessibility.*

Within this package (as of this writing) you will find three classes:

• Accessibility
• AccessibilityProperties
• AccessibilityImplementation

The Accessibility class is a static class that allows you to do three important things. From that class you can check if the user is actually using a screenreader and if it is available or not (Accessibility.active). It also allows you to make sure that all accessibility properties are updated if you change any of their values (Accessibility.updateProperties()). The third and in my opinion most important bit of this class is the capability to manually submit an Event to the MSAA API (Accessibility.sendEvent()).

The AccessibilityProperties class is the place where you define the properties, such as name, description and shortcut that are being presented to accessibility aids. You can also set some properties that control the behaviour of your object towards screenreaders. AcessibilityProperties can be attached to any type of DisplayObject.

The AccessibilityImplementation class, is a bit of a special one. It is the base class in Flash that allows for the implementation of accessibility. This class you will never really use directly, since Adobe advices us not to instantiate it but instead extends AccImpl (which again extends from AccessibilityImplementation) in order to create our own implementation for any custom component we might create. The AccImpl class exists in two versions, one for flash and one for flex.

More Than a Million Words

Instead of boring you any further with details and long paragraphs of information, i figured it’s easier to understand how this all works by actually showing you. Enjoy the videos, if the quality is a bit low and you would like them to be sharper, make sure to head over to the vimeo site itself to download the original videos directly from there.

A Basic Example

_{WATCH IN 800 x 600 | DOWNLOAD EXAMPLE SOURCE CODE}

A Basic AccessibilityImplementation Example

_{WATCH IN 800 x 600 | DOWNLOAD EXAMPLE SOURCE CODE}

The Final EventManager Accessibility Approach

_{WATCH IN 800 x 600 | DOWNLOAD EXAMPLE SOURCE CODE}

Preamble

The greater part of last year i was heads-down-busy developing the EventManager Game which i had the pleasure to build at Liip for Postfinance. EventManager is an educational but fun game, that approaches topics such as budgeting, financing and investing in a modern way (read: not boring you to death).

Today i want to talk to you about the new iteration of the game that we just released a couple of weeks ago. What is new you ask? How about: Accessibility! And not just any form of accessibility – the Game has earned the AA+ Certification from Access For All (their highest certification grade conform to WCAG 2.0).

Overview Part #1

In this two-part blog post i will cover the technical, as well as overall aspects of this endeavour. This first part will cover a brief history of accessibility within the Flash Platform and its current state and hopefully useful insight if you are considering to add accessibility to one of your projects.

Accessibility History in Flash

Thanks to Adobe (and of course Macromedia back then), the Flash Platform has been sporting accessibility features since Macromedia released Flash MX back in 2002. For those that remember, this used to be Flash Player in version 6 and just introduced the Vector Drawing API (ahh, nostalgia.. but i digress).

Over the years obviously the feature set has vastly improved and Adobe (rightly so) can be proud of the level of accessibility that the Platform has today, since it allows you to:

• Create your own tab order
• Set alternative text (naming & description text)
• Set shortcuts
• Set element focus (also visually if needed)
• Communicate statuses to screenreaders.

As you see, there is really not much to wish for left here. In fact, if you use the Flex Framework, all these functionalities and features are just a step away from you. But that’s not all, Adobe has made it quite simple to build your own components within the flex framework, that can with little work, implement the accessibility layer. If that wasn’t enough you even have the capability to manually trigger an event to tell attached screenreaders that something has changed within your application.

For us developers, this means that we have the tools and capabilities to fully fullfill the guidelines proposed by WCAG 2.0.

Dark Side of the Accessible Moon

One of the “limitations” when it comes to the Flash Platform and accessibility, is that it’s only available for the Windows Platform.

There have been many voices that critisized Adobe for “only” implementing the Microsoft Active Accessibility (MSAA) API, yet to this day it seems that it is the only documented and standardized API out there. Also it is to be said, that the most popular and wide used screenreader applications have their home only on the Windows Platform.

Misconceptions & Half Truths

Question: So, since the Flash Platform supports accessibility so well, how come there are only a few accessible flash sites out there?

This question is usually met with one of the following answers:

ANSWER: Costs for implementation too high

There is no denying that implementing accessibility into a flash application is a high cost investment, if you do not already have a developer with prior such knowledge.

This has multiple reasons. Depending on your application it will require an entire different approach than just the straight forward making «Your-Standard-RIA App» or «Form-based GUI App» accessible. Which obviously, unless you have done it before will require tinkering, information gathering, experimenting and lots of testing. Hence, it will take time and thereby cost money.

ANSWER: Too difficult & lack of documentation

I have good and bad news. The good news is if you are considering making your RIA accessible, rejoice! Most of the information / documentation on accessibility for the Flash Platform is actually directly aimed at the Flex Framework and at RIA development.

And here is the bad news: if you want to make something completely custom – like a game – accessbile, make sure you have enough time at your hands, you will need it :). But since you are reading this, hopefully i’ll be able to provide you with enough information to ease your pain :).

The main problem lies not in the fact that implementing is difficult or complicated, it’s the fact that real in-depth documentation is either missing, hard to come by and that examples usually only cover little ground. So the difficulty of implementing accessbility really only comes from the fact that you will have to invest lots of time into testing and debugging.

ANSWER: No time / No money within the project

This really is a convergence of the previous two points. Lack of knowledge and the possible cost of implementation, compared to the percentage of users who actually will benefit from that step, leads often – and here we have to be honest to ourselves – to the quick dismissal of accessibility within projects.

ANSWER: What? Flash is accessible?

Yes genius, have you missed the memo? In fact a few years back when i took Macromedia’s Certified Flash Developer exams there was already a huge part dedicated to accessibility within the exam. Go read up, right now!

Adobe followed in Macromedia’s footsteps and continued to improve accessibility, updating the accessibility features once more in their latest Flex 4.0 Framework and implementing their entire accessibility layer into the freshly released AIR 2.0.

The Challenge

Coming back to our topic at hand, for EventManager i was confronted with a game that had many requirements.

The game’s flow for example, does not allow a regular tab order, it just wouldn’t work. There were also many interactions that would take place without any prior user action and those had to inform the player obviously about what is happening.

Depending on where you were in the game or what you wanted to do, the keyboard had to apply a different layout/scheme that is tailored to the task at hand. For example, when you are on the eventgrounds, you need to be able to place/manipulate constructions, which obviously has an entire different control scheme than for example having to bid on an artist in the auction part of the game.

To make the matter worse, the game has a strong mix of pure flash elements and flex components. Oh, and everything had to be multilingual of course :)

Finding a Solution

Keyboard accessibility was pretty clear from the start. We needed a class that allows us to set a specified keyboard layout/scheme to be active when we needed it.

For user-interactions, it was generally agreed that a context-menu would make most sense and thereby should be used for building constructions and general interaction with the eventgrounds in the game.

When it came to implementing screenreader accessibility the concept had to change a couple times, obviously here the lack of knowledge was a problem and forced me to try out various things until finally finding a working and valiable solution.

At this point i would like to extend my most grateful thanks to Adobe’s Accessibility Evangelist (congrats on the new position!) Matt May , he was of incredible help and was able to give me just the right hints, that helped me resolve some key issues that were plaguing me during my quest for accessibility.

The Final Solution

The final solution can be broken down into three essential parts:

• A global Keyboard Controller that allows applying different control schemes at will.
• A single class from which we can communicate with a screenreader to manipulate its focus, send text to be read via speech synthesizer or displayed on a braille device.
• Last but not least a custom context menu component, that allows us to display a menu of possible actions the user can undertake depending on the situation.

I’ll be covering all the technical details and attempted approaches in the second blog post: Flash & the Quest for Accessibility – Part #2.

The Information Hunt

I’ve invested countless hours in information gathering and hunting down resources concering accessibility and possible ways of implementation so that most screenreaders are supported.

Sadly, as it turns out, supporting all available Windows screenreaders seems to be impossible (see these tests). Thereby i concentrated on JAWS and ZoomText since these two applications seem to be the most widely used, when it comes to assistive technologies.

The resources gathered throughout the project that were useful are publicly available via my delicious account. They have notes as to what information was useful and/or if parts of the information was incorrect or not valid anymore.

Conclusion

All in all, getting the chance to implement accessibility in such a big flex application was an incredibly rewarding experience in multiple aspects.

Getting the chance to actually implement accessibility was a great, allbeit, at times nerve-wracking experience that gave me new and invaluable knowledge.

The most rewarding aspect of the entire project though, to me personally, was to receive the excited feedback from our targeted end-users audience. A big thanks also here to Access4All, the entire team at LIIP and everyone else involved in this big effort and of course to Postfinance for giving us this great opportunity.

Feel free to leave comments or get in touch with me if you have any further questions about flash, flex or accessibility.

I’m proud to announce a major update to Tweetr – the AS3 Twitter API Library. We are now very close to reaching the infamous v1.0!

Eventhough i have tested out most of the features, i am not entirely confident in calling this new release v1.0 and am thereby releasing it as v1.0 beta and hope all of you will provide me with feedback as to how well it works out and if you encounter any bugs.

The new version is available as of right now and can be downloaded from to shiney new Project Home at: http://tweetr.swfjunkie.com .

What’s new

As of now, the library integrates all twitter API features and is supporting Basic Authentication aswell as the much requested OAuth!

• AS: added OAuth Support
• AS: added getHomeTimeLine
• AS: added getRetweetsByMe
• AS: added getRetweetsToMe
• AS: added getRetweetsOfMe
• AS: added retweetStatus
• AS: added statusRetweets
• AS: added Geo Tagging feature to updateStatus
• AS: added searchUser
• AS: added description property to ListData
• AS: updated StatusData to include Retweeted Statuses and Geo Information
• AS: refactored GET Request argument passing
• AS: fixed a bug when parsing SavedSearchData (thx Ken)
• AS: removed deprecated methods, sendTweet, destroyTweet, getSingleTweet, getReplies

• PROXY: Fixed an Image Upload Bug (thx Bhargava)
• PROXY: OAuth Support

Known Issues

As of right now there is one known issue with OAuth and DELETE Methods for Lists. This is a official Issue within the Twitter API thereby we all have to wait for Twitter to come out with a fix for it :)

What’s next

Next i will be doing some Tutorials on OAuth usage and in general on how to use the Library. These will then be posted over at the new Project Homepage. Also i really hope you – dear users – will provide me with feedback on how things work. For that i have setup a Issue Tracker which you will also be able to find from the new Project Homepage.

Whom i’d like to thank

There is one person in particular i would like to thank and that person is Dan Petitt aka Coderanger . I was able to base my OAuth implementation on his great OAuth Class, which really helped me getting started. Thanks mate!

Also i would like to thank you all for the continuous feedback you are giving me and please keep it coming :)

As always, if you build something cool with the library, drop me a line!

What is this all about

Since we are not living in an ideal world, where everyone can get all the information they want or speak out their mind freely, i have a simple proposition to make.

Twitter is more than just a simple outlet of peoples thoughts anymore. The recent events in Iran have demonstrated that. That’s why i’ve packaged up my Twitter Proxy from the Tweetr AS3 Library, so that pratically anyone who has a webserver/webspace could create an instance of it and contribute to those who can’t freely access twitter.

What i want you to do

1. Download the TweetrProxy – Freedom of Speech Edition
2. Extract the Archive
3. Move the content into a directory on your server from where you want to serve the proxy.
4. Call that URL and follow the installation procedure
5. Tweet about this and your proxy using any or all of these hashtags: #free #speech #twitter #proxy
6. Pat yourself on the shoulder for doing something good :)

Why i’m doing this

Yesterday i received a bug report on my twitter library, stating that the proxy doesn’t work from iPhone clients.

At first i was confused, since i didn’t really build the proxy for such a purpose. After learning that the person asking for this came from china, i suddenly realized that my recent changes to the proxy wouldn’t allow anyone to use the proxy unless they used it in conjunction with my library.

Since the proxy acts just the same way as if you would call twitter.com usually any client that allows to set a proxy was able to use it, but since i removed Basic Authentication from the newest version, it wouldn’t work anymore.

Upon realizing this, i figured – why not package the older version up with a simple installer so anyone could install a proxy and help people out. And so here it is.

I’m happy to announce a new version of the AS3 Twitter API Library, now in version 0.95!

What’s New:

So let’s get to the juice part, here is a condensed overview of the changes:

NEW: Added Twitter List Methods.
NEW: Added missing Profile Methods, including Profile Image/Background Upload.
NEW: Added friendships/show Methods.
NEW: Added blocks/exists, blocks/blocking and blocks/blocking/ids Methods.
NEW: Added trends/current, trends/daily and trends/weekly Methods.
NEW: Added report_spam Method.
NEW: Added URL Unshortener Class using the public service provided by http://untiny.me/
NEW: TweetrProxy has Installer/Configurator Script now.

FIXED: Authentication Issues are a thing of the past now!

MORE: Tons of small changes and bugfixes. Read full ChangeLog for more details.

Also since i’ve noticed that it’s starting to become difficult to keep track on what is new and what is not within the Documentation, i have clearly marked which Methods are new and which ones are going to deprecate in the near future.

For those who wonder, the examples over at the Googlecode Site for the Library have aswell been updated to reflect the changes to the Library and the sources can still be retrieved by clicking on “View Source” from the Flash Contextmenu.

What Next:

Since i’ve gotten quite a lot of requests for examples, i have decided to create a couple tutorials in the upcoming weeks, which i will post here on this blog, so stayed tuned for that.

I’m also going to start integrating API Methods which yet are not publicly available so that they can be released as soon as they become active, so hopefully we will see more regular releases of the Library.

On the subject of OAuth, i would like to ask you, dear readers, to participate in a little Poll to establish what your needs and demands are. So make sure to fill it out:

Downloads

• Tweetr Library 0.95 Documentation
• Tweetr Library 0.95 Source Code
• Tweetr Library 0.95 SWC
• Tweetr PHP Proxy 0.95

In Conclusion

So there you have it! As always i’ll be glad if you report any problems you encounter over at the Googlegroups Discussion for the Library or create an issue on googlecode.

I want to take this opportunity to also thank everyone who submitted bug reports and sent in feedback, so a big thanks to all of you aswell. Please remember if you build something cool, drop me a line, since i’m always curious to see what you guys and girls build with the Library.

And of course if you appreciate the work going into this Library and it’s continued support, consider making a small donation. ;)

Only 4 days left till the first Swiss Flash User Group Conference opens its doors to the public. Have you gotten your tickets already ? If not, this might give you an overview of what you can expect, besides a beautiful view at the lake:

The SwissFlashUserGroup will be inviting all Flash designers and developers, project managers, illustrators, and developers of all other programming languages to get together in Zurich to share knowledge and enthusiasm about Flash at the conference Flash At The Lake. The conference will be held at the Rote Fabrik right by the lake of Zurich from 26. to 27. June 2009.
During the two days participants will be able to attend presentations and workshops to learn everything they want to know about the development and management of Flash platform projects. Several workshops will give insight into established workflow concepts and the manifold opportunities that have become possible through the application of Flash, Flex, AIR, Open Source, Video and Wii in Flash projects.

Flash At The Lake is an event organised by the community for the community. Next to international speakers of the Flash scene such as Aral Balkan (UK), Peter Elst (BE), Mario Klingemann (DE), Serge Jespers (BE), James Ward (USA) and DeMonsters (NL), there will also be several presentations by local Flash professionals, sharing their experiences with Flash and enriching the conference proceedings.

Tickets and further information can be found at: www.flashatthelake.ch

I also will have the chance to hold a presentation about Phidgets – a nice way for the Flash Platform to phiscally interact with it’s surrounding and user. If you are in Switzerland and close to Zürich, make sure to drop by!

UPDATED: Tweetr has gotten an Update since this blog post. See this blog post for more infos.

While i was developing  Twidget , i started building up a AS3 Library for using the Twitter API, since the only other library i found seemed a bit painful to use.

So after taking some additional time to generate all the needed methods, data objects and inline documentations, i am happy to announce that “Tweetr” is available for public consumption over Googlecode :).

Features:

• includes practically all twitter api methods
• includes twitter search api
• includes a URLShortener Class which utilizes http://is.gd

Since twitter has a very restricted crossdomain policy, at the moment, tweetr can only be used for AIR/Zinc or Launcher Applications since they have ways to circumvent the Crossdomain problem.

I will be working on a simple php wrapper class that i can include with tweetr so you could use it for website integration. If you are interested in Tweetr’s future, there is also a small Roadmap up on the Wiki pages.

Nothing left to say than go and grab it while it’s hot:

http://code.google.com/p/tweetr/

A while ago, i ordered myself some Phidgets since i was wanting to get some for quite some time and love the idea of beeing able to manipulate hardware through actionscript. I also couldn’t deny my love for everything that emits lights, so my choice of getting the Phidget LCD Interface was close at hand ;).

Well, i found some time and actually built a small Twitter Client that grabs your Friends Timeline (includes your tweets aswell) and it displays it on the Interface. Here a short video of it. Please disregard the quality since it’s been taken with the Iphone ;)

The Application comes as a Windows Desktop Application built around “Launcher” – a Desktop Application Framework that is not yet public but i will open up to the public soon.

Under the Hood it’s all  Flex 3 / Actionscript 3 using the native Phidget API Library and my open sourced Twitter API Library “Tweetr“.

If anyone is interested in the Source Code let me know and i will gladly put it online. It will in any case be available when i make “Launcher” publicly available since it made a nice use-case.

It’s been sitting around forever on my todo list but it’s finally done.

I have the pleasure to announce to you that my Actionscript 2 Coverflow Clone which is loaded with tons of features has gone open source!

Find out more by reading the whole blog entry over at blog.liip.ch.