Accessibility in Adobe Flex

The common thoughts about why not to use Flex is that it is not accessible to all users. But this is in fact a myth as Adobe Flex claims to be able to create the most accessible rich internet applications (RIAs). It has 28 components that can be used which are all accessible and create a consistent and usable experience for users with disabilities. Components such as: Button, Accordion, List, Slider, ToolTipManager, Tree, ColorPicker and DateField.

With some sites claiming at as much as 97% of websites are still inaccessible to all users, it has never been more important to concentrate on ensuring users with all disabilities can navigate and enjoy the site.

Why is Accessibility Important?

For people who live in the United States, it is the law to make websites accessible. But for most other countries, it is an important standard in place to improve usability to disabled users. These standards are based on the Web Content Accessibility Guidelines (WCAG) of the World Wide Web Consortium (W3C).

Microsoft Active Accessibility

Flex has support for Microsoft Active Accessibility (MSAA). This technology was built to improve the way accessibility aids work on Windows based computers. These aids are things such as screen readers for visually impaired, captions for people with hearing loss and software for people with motion disabilities.

Screen Readers

Screen readers are designed mainly for visually impaired users and work by navigating through the content in the site and reading it out loud. Integrating useful keyboard shortcuts into your application will help users navigate through the site in a logical way using a screen reader.

It is worth remembering that you have no control over how the screen reader behaves, but the best way to ensure it works well in all is to mark up the content in a sensible way.

Keep the End User in Mind

The main thing to keep in mind when building accessible sites is obviously how the end user will perceive the site. It is worth thinking of what kind of impairments someone may have and to design and build the sites around that.

Visually Impaired Users

For visually impaired users, keep in mind the following design recommendations:

• Tabs must have a logical progression both visually and when tabbing from one input to the next.
• Audio should have captions, but be aware of any audio that may interfere with screen readers.
• Use percentage sizing so that your applications scale properly at smaller screen sizes.
• Ensure that foreground and background colours contrast sufficiently to make text readable for people with low vision.
• Ensure that components do not rely on a mouse.
• Ensure that components are accessible by the keyboard.

Colourblind Users

Colour must never be the main way of showing information as colour blind users may have trouble viewing this.

Users With Mobility Impairment

For users with mobility impairment, keep in mind the following design recommendations:

• Ensure that controls don’t depend on the use of a specific pointer device.
• Ensure that components are accessible by keyboard. All Flex components defined as accessible include keyboard navigation.

Hearing-Impaired Users

Content with audio must have captions, so that there is a visual representation of any information displayed too.

Users With Cognitive Impairment

For users with cognitive impairments, such as dyslexia, keep in mind the following design recommendations:

• Ensure an uncluttered, easy-to-navigate design.
• Provide graphical imagery that helps convey the purpose and message of the application. These graphics should enhance, not replace, textual or audio content.
• Provide more than one method to accomplish common tasks.

Testing Accessible Content

It is important when creating sites that they are tested to ensure they are accessible. Here are some guidelines to follow when testing:

• Ensure that you have enabled accessibility in the Flex application.
• Check the navigation of the site by using just the keyboard.
• Check for tool tips on all images.
• Ensure content is resizeable and display fine with screen magnifiers.
• Make sure all audio has captions. Try using the application with low sound or no sound to check usability.
• Test the application with a screen reader or by users who use a screen reader.

For more information on how to make Flex applications accessible, check out Adobe’s help section on the topic.

Click here for some examples that are accessible Flex applications.