Accessibility with yFiles FLEX

Tips & Tricks

Summary

This article explains how to enable accessibility for the yFiles FLEX diagramming component.

Description

Accessibility with FLEX

Although the Adobe Flash Player supports accessibility through the Microsoft Active Accessibility (MSAA) interface, the contents of the yFiles FLEX GraphCanvasComponent will not be visible to screen readers out-of-the-box. However, accessibility can be enabled by providing a custom accessibility implementation, as explained in the Adobe Flex documentation. An example accessibility implementation for the yFiles FLEX GraphCanvasComponent is provided below.

In order to create accessible Flex applications, the "accessible" compiler flag has to be set to "true". Otherwise, no accessibility support will be available for custom or standard Flex components.

When using Flex Builder for compilation, the flag can be turned on using the "Generate accessible SWF file" checkbox in the project's compiler settings.

Enabling accessibility for the yFiles FLEX GraphCanvasComponent

In order to enable accessibility for Flex UIComponents, an implementation of flash.accessibility.AccessibilityImplementation has to be provided. For an example acessibility implementation, please see the resources attached to this article. The details of the accessibility implementation mechanism are explained below.

In the component implementation, the AccessibilityClass meta tag is used for including the accessibility implementation when the application is compiled: [AccessibilityClass(implementation="demo.accessible.GraphCanvasComponentAccImpl")] public class AccessibleGraphCanvasComponent extends GraphCanvasComponent { .. } In order to register the accessibility implementation with each instance of the accessible component, initializeAccessibility is overriden in the component: [AccessibilityClass(implementation="demo.accessible.GraphCanvasComponentAccImpl")] public class AccessibleGraphCanvasComponent extends GraphCanvasComponent { yworks_internal static var createAccessibilityImplementation:Function; override protected function initializeAccessibility():void { if( AccessibleGraphCanvasComponent.createAccessibilityImplementation != null ) { AccessibleGraphCanvasComponent.createAccessibilityImplementation( this ); } } The accessibility implementation registers itself with the accessible component using the component's static createAccessibilityImplementation property: public class GraphCanvasComponentAccImpl extends AccImpl { private static var accessibilityHooked:Boolean = hookAccessibility(); private static function hookAccessibility():Boolean { AccessibleGraphCanvasComponent.createAccessibilityImplementation = createAccessibilityImplementation; return true; } .. }

Now, the accessibility implementation will be queried by screen readers for the properties defined by the MSAA specification.

The resources attached to this article contain an example accessibility implementation that will expose all nodes and edges as its children to MSAA applications, report their bounding boxes and create names based on their labels.

Related Documentation

Resources

Categories this article belongs to:
yFiles FLEX > Other
Applies to:
yFiles FLEX: 1.4, 1.5, 1.6, 1.7, 1.8
Keywords:
Accessibility - Flex - Screen Reader - Jaws - MSAA - Inspect - 508 Complicance - 508 Standard - Section 508