Accessibility in Flash508 is the Law, Accessibility is the Goal

Background on ‘508’

• Section 508 of the Rehabilitation Act • Written in 1998• Applies to technologies delivered, procured, maintained, or used by federal

agencies.• Addresses access of people with physical, sensory, or cognitive disabilities.• A list of guidelines and standards can be found at: http

://www.access-board.gov/guidelines-and-standards/communications-and-it/about-the-section-508-standards/section-508-standards

‘Refresh’ of Section 508

• Proposed in 2008, released for public comment in 2010. • Revised and released for final public comment Feb 18th 2015.• Refresh of Section 508 will adopt the WCAG 2.0 standards.

WCAG 2.0

• Presents accessibility as a set of four principles with associated guidelines• http://www.w3.org/TR/WCAG20/• The website provides a list of success criteria for each guideline. Each

success criteria is also given a level: A (lowest), AA, and AAA (highest)• Each level adds additional features to increase accessibility. For example

an AAA success criteria would be to provide sign language interpretation for all audio. While an A success criteria would be to provide captions.• Links to help developers understand and achieve each success criteria are

included on the site.

What does Your Client Mean by “508”• Each client has a different opinion on what it means to be 508 compliant

as the current standards were written for the technologies that were common in 1998, and don’t address how we develop eLearning today.• Some will be satisfied with a “Text Only” version of the course, as that is

given as an option of last resort in the law.• Others have accessibility experts on staff that will be reviewing the

course and want an ‘equal experience’.• Courses for government agencies, the only group that the law applies to,

will have a complete review by very experienced reviewers, though they may apply for an exception.

When accessibility is the goal use WCAG 2.0• When your client wants to comply with the intent of the law, you’ll

need to comply with the WCAG 2.0 standards.• WCAG 2.0 standards are written for more recent technologies and are

more relevant to the rich internet interaction we create in our eLearning.• It is only a matter of time before ‘508’ means WCAG 2.0.

Flash is not HTML

• The accessibility experience you get with Flash is not the same as the accessibility experience you get with a standard HTML page.• Many accessibility tool have been optimized to read and interpret

HTML, providing multiple shortcuts and tricks to help the user navigate and understand the web. This are not practical or impossible to duplicate in a Flash movie.• However many of the same troubles you will have in Flash you will

also encounter in a JavaScript single page application.• Flash, however, can be unreliable because it has an extra layer

between the interaction and the accessibility tool.

Flash and Accessibility

Many of the WCAG 2.0 success criteria can be achieved in your normal design and development processes.• Don’t design images or text to flash or pulse more than three times.• Use high contrast between background and foreground objects.• Don’t use color as the only way to convey meaning.• etc.

The most difficult criteria to meet in Flash deal with keyboard navigation and screen reader support.

Keyboard Equivalence in Flash

The primary way to achieve keyboard equivalence with flash is to control the tabIndex, tabEnabled, and tabChildren properties.

• tabIndex determines the order that your components will have in the tabbing cycle. Lower indexed values appear earlier in the cycle. Objects with the same number will appear next to each other in the cycle, but should not be used.

• tabEnabled allows you to remove an object from the tab cycle without setting its tabIndex to null.

• tabChildren is a fast way to remove all objects within a parent movieclip from the tab cycle.

Remember just because you can’t see an object, or you can’t click on it with a mouse, if it has a tabIndex and is tabEnabled, you will be able to access it within the tab cycle.

Screen Reader (JAWS) support with FlashFlash provides screen reader support through a set of accessibility classes that were first created for their Flash MX Components.• The most recent versions of the classes are written in standard AS3

package notation and can be found in your CS6 Program Files.• Program Files (x86)\Adobe\Adobe Flash CS6\Common\Configuration\

Component Source\ActionScript 3.0\User Interface\fl

• The older version were written in AS2 format and can be used with AS3 or AS2 coding and can be found in your CS6 Program Files.• Program Files (x86)\Adobe\Adobe Flash CS6\Common\First Run\Classes\mx

Key Classes in Flash Accessibility

All UIComponents have a property named ‘accessibilityProperties’.• To use this you need to create an instance of the object with the same name,

AccessibilityProperties, and set it to the property • AccessiblityProperties has two properties of ‘name’ and ‘description’• Once you have defined the name and description you want to pass to the

screen reader for the UIComponent, you need to use the singleton class of Accessibility to update the Flash/screen reader interface: Accessibility.updateProperties().

Now when you code (or the learner tabs) to give focus to the UIComponent, the screen reader will read the name and description you have defined.Example at: https://vimeo.com/12672524

Custom Accessibility Classes

You can change the way that your custom UIComponent classes deal with accessibility by changing the way your class creates its accessibility implementation (createAccessibilityImplementation function).By doing this you can have your custom Accessibility Implementation (AccImp) define its ‘name’ and ‘description’ by calling methods on your custom UIComponent. In this way I was able to create a dialog UIComponent which would return it’s title for ‘name’ and body content for ‘description’.However remember you must always remember to call Accessiblity.updateProperties once all changes to UIComponents are done, to sync the Flash/screen reader interface with your UIComponents.https://vimeo.com/12673524 and https://vimeo.com/12674937 College Board Calculus Simulations: https://svn.alleni.com/COLC_CollegeBoard/02_Calculus/Dev

Modifying Functionality for Accessibility Flash provides you with a simple way to determine if your learner is using accessibility tools to view your Flash movie (Accessiblity.active).You can used this property to determine if you need to update the Accessibility properties. This property can also be used to change your course functionality, but remember that it will not be true for learners who just need keyboard equivalence, only screen readers.

Design with Accessibility in Mind

Start off your course by detecting if your learner is using a screen reader, if so, start with a dialog explaining how the learner will need to experience the course:• Flash does not work with the Virtual PC Cursor and this will need to

be turned off by using Insert + z.• The course is a rich internet activity, and will not read as a set of

HTML pages. The learner will need to tab through the content to experience it. You will be able to make this experience a good one by manipulating the tab order and giving focus to the appropriate UIComponents.

An Accessible Click-Tell

A click tell can be made accessible by defining its functionality as follows:When the learner selects a button:

• Remove the button from the tab order • Interject the displayed content into the tab order where the button was removed. Make sure

that the learner can tell that the content is related to the selected button as it will no longer be in the tab order.

• Give the displayed content focus so it is read by the screen reader.• If you are using visited states for your buttons make sure this it translated to the button

description.This will:

• Preserve the logic of the tab order. Tabbing forward will take you to the next button and tabbing back will take you the previous button.

• Makes the interaction reactive. The learner is not required to tab to see/hear the content you want to show them.

Accessible Complex Courses

The majority of courses that I’ve seen developed all have an instructional flow, even through their complex interactions. Use this flow to help you determine your tab order and what item to give focus after a learner triggered event.Start with the goal or problem to solve, let them tab to their choices, tell them how to interact to make a choice, give them a response to the choice, and a way to move on.

Flash Issues to Workaround

Problem: Flash does not do well at the primary reading of the movie. It is inconsistent and may read all, some, or none of your components in the tab order.Solution: Don’t rely on the primary read, hijack the read by setting focus to an accessibility dialog.Problem: Flash will not read the description of a component when tabbing quickly through interaction.Solution: None. Backing up or going forward and tabbing again results in the component being read correctly.

Flash Issues to Workaround

Problem: If you update the name/description of the component that has focus, the screen reader will may not read the update.Solution: Once you have updated the name/description, set the stage focus to null. Delay the call to set the stage focus back to the component for 100 milliSeconds to prevent the screen reader from reading the component twice.

Flash Issues to Workaround

Problem: Flash will add “Press spacebar to activate.” to any component that broadcasts mouse events. This is not an issue for normal buttons as the spacebar acts as a mouse click, but for the thumb of a slider it has no meaning.Solution: Wrap your button component inside another component without mouse events, then remove the thumb from the tab order. In this case the left/right key press listeners could be moved to a “slider” component definition, and the focus appearance could be changed to highlight only the thumb of the slider.

WAI-ARIA

Accessible Rich Internet Application (HTML5)http://www.w3.org/WAI/intro/aria.php