Accessible Flash in a Flash

446 views

Published on

Simple tips and tricks to create accessible Flash in your learning programs.

Published in: Education
0 Comments
0 Likes
Statistics
Notes
  • Be the first to comment

  • Be the first to like this

No Downloads
Views
Total views
446
On SlideShare
0
From Embeds
0
Number of Embeds
9
Actions
Shares
0
Downloads
5
Comments
0
Likes
0
Embeds 0
No embeds

No notes for slide
  • The Rehabilitation Act was signed in to law 1973. Two important sections of the Act affect agencies when they are purchasing or distributing electronic information to their workforce. They are sections 501 and 508 of the Rehabilitation Act. Section 501: Section 501 of the Rehabilitation Act protects Federal employees with disabilities from discrimination on the basis of their disability in Federal employment. Section 508 (As Amended): In 1998, Section 508 of this Act was amended to require access to electronic and information technology provided by the Federal government. The law applies to all Federal agencies when they develop, procure, maintain, or use electronic and information technology. Section 508 deals specifically with the methods of distributing or disseminating electronic information via computers. This includes but is not limited to websites, web based learning solutions and documentation. Section 508 is very different from Section 501. Section 508 is only enforceable with respect to newly-procured (after June 21, 2001). Section 508 also has much more specific standards that are designed to meet the needs of a broad cross-section of users with disabilities--- but generally still favors the sight impaired. Guidelines were developed to prevent agencies from developing materials that were not consistent with other agencies. An agency must consider the Section 508 standards, even if there are no employees with disabilities who can currently use that technology. From the Section 508 web site: “Section 508 was enacted to eliminate barriers in information technology, to make available new opportunities for people with disabilities, and to encourage development of technologies that will help achieve these goals.”   Subpart b) of Section 508 is composed of 6 standards: 1194.21-1194.26. The only standard applicable to PDF documents is Standard 1194.22 (Web-based intranet and internet information and applications.) This standard is composed of 16 checkpoints:   (a) Text Tags (b) Multimedia Presentations (c) Color (d) Readability (e) Server-Side Image Maps (f) Client-Side Image Maps (g)&(h) Data Table (i) Frames (j) Flicker Rate (k) Text-Only Alternative (l) Scripts (m) Applets and Plug-Ins (n) Electronic Forms (o) Navigation Links (p) Time Delays   The checkpoints are based on the World Wide Web Consortium (W3C) Web Content Accessibility Group (WCAG) Priority 1 checkpoints. W3C Priority 1 ensures that it is possible for all groups of people to access the document. However, Priority 1 does not ensure that the document is highly accessible or very easy to use. You can think of it as “basic accessibility”.   WCAG’s checkpoints were originally written for HTML, but their wording and goals are generic enough to apply to other technologies.   Each checkpoint has a priority level assigned by the Working Group based on the checkpoint's impact on accessibility.   [Priority 1] A Web content developer must satisfy this checkpoint. Otherwise, one or more groups will find it impossible to access information in the document. Satisfying this checkpoint is a basic requirement for some groups to be able to use Web documents. An example would be alternative text. [Priority 2] A Web content developer should satisfy this checkpoint. Otherwise, one or more groups will find it difficult to access information in the document. Satisfying this checkpoint will remove significant barriers to accessing Web documents. An example would be a heading. [Priority 3] A Web content developer may address this checkpoint. Otherwise, one or more groups will find it somewhat difficult to access information in the document. Satisfying this checkpoint will improve access to Web documents. An example would be a table summary.  
  • Ensure that the Alt-text conveys the true meaning of the non-textual element that is relevant to the learning experience. If you are limited in the alt-text field in html by the number of characters you can use make sure to use the descriptive text field for more detailed information.
  • Ensure captioning is used on multi-media elements and that the captioning is of sufficient size and style to be easily and quickly read. Also make sure that the text (if using scrolling text) moves at a speed for even the slowest reader. But balance that with the need for the text to keep pace with the information in the video. There are also animated sign language characters you can program and use not to replace captioning, but to supplement it.
  • Make sure any information that is conveyed in color does not loose meaning when you remove color.
  • Use sufficient contrast to make the colored information meaningful.
  • Make sure any information that is conveyed in color does not loose meaning when you remove color from the equation.
  • Use sufficient contrast to make the colored information meaningful.
  • If you remove all formatting and structure from the document or module, does the information still flow in a “readable” manner and make sense. Tables are a good example. If you took all the formatting out of the table (no column or row headers and no data cells) – does the information still flow logically and make sense?
  • If you choose to use graphics with hotspots to provide information to the user, make sure you additionally provide text links to the same information.
  • Tables need to be formatted with the appropriate labels such as column and row headers and data cells so a screenreader will associate the appropriate header with the correct data cell. Try to use html tables where possible and not graphics of tables with text descriptions. This can be challenging to do with off the shelf e-learning authoring tools.
  • If you use frames (Typically menus are housed in frames in elearning) in your learning, make sure that the learner can easily and quickly navigate with keystrokes from one frame to the other and back. Additional note: If you use popup windows make sure the focus transfers back and forth to the appropriate window when one opens or closes.
  • If you use flashing elements, test to verify that they flash between 2 and 55 hz.
  • If you use scripts or macros in your training, (even those built in to off the shelf authoring tools) make sure that the information used in script is available to all your users. If you do this with a form, and the script validates that the learner has either incorrectly or correctly entered information you can add a verbal signal (bell or buzzer) to provide auditory feedback. You may also need to add feedback text to the screen for validation for those with hearing impairments. Scripts are used for a variety of functions in learning programs such as the user typing in their name and then the program references them through the training by name, etc.
  • If your users need to download a plug in or applet, make sure there is an easily accessible link for your users to download the application.
  • The same rules that one would use for tables applies to forms. If they are designed and structured properly, the assistive technology will detect that and read the information appropriately for the user to complete the form.
  • If there are duplicate links to the same location, allow the user to disable repetitive links and limit the amount of information they are required to review.
  • If there is a need for the user to complete a test or activity in a certain period of time, give them the option of extending that time because assistive technologies are not always as efficient as ordinary access to electronic information.
  • [Priority 1] A Web content developer must satisfy this checkpoint. Otherwise, one or more groups will find it impossible to access information in the document. Satisfying this checkpoint is a basic requirement for some groups to be able to use Web documents. An example would be alternative text. The 16 checkpoints in Section 1194 fall in to the priority one category. Example: If you do not provide alt text, users will find it impossible to access information in your document or module.
  • [Priority 2] A Web content developer should satisfy this checkpoint. Otherwise, one or more groups will find it difficult to access information in the document. Satisfying this checkpoint will remove significant barriers to accessing Web documents. An example would be a heading. Example: Properly formatting headings allow a learner to easily scan at a high level the information in a document or module, the same as you and I would if we were only looking for specific information.
  • [Priority 3] A Web content developer may address this checkpoint. Otherwise, one or more groups will find it somewhat difficult to access information in the document. Satisfying this checkpoint will improve access to Web documents. An example would be a table summary. Example: Table summaries allow the learner to get a high level review of the information in the table and determine if they need to review the information in detail.
  • Accessibility is a general term used to describe the degree to which a product is accessible. Not just by those with a disability, but to anyone. The term accessibility is generally associated with the disabled and their ability to access various forms of assistive technology. Or in other words, technology that was adapted so that a person with a disability could use the technology. Screen readers and voice recognition software are the two most commonly used forms of assistive technology. Screen readers enable a person with a sight impairment to hear information (using text to speech) that is presented on a computer screen. Voice recognition allows persons with mobility impairments to access a computer without the use of a keyboard or mouse. Voice commands and dictation are articulated (speech to text) in order to control the computer. Keep in mind that accessibility does not necessarily equate to usability. Usability relates more to the ability of one to use a product efficiently. For many years, accessibility did not equal usability. But the devices now available to end users such as JAWS, Window-Eyes, Hal (made by Dolphin), Dragon Naturally Speaking, VoicePower, MAGic (magnification software), WYNN (software used to assist those with cognitive disabilities) and a whole host of other technologies are leading the way in making accessibility = usability.            
  • Components and accessibility The set of accessible components available with Flash CS4 Professional includes:   Button Checkbox Radio button Label TextInput TextArea ComboBox ListBox DataGrid Window Alert Understanding how assistive technologies handle animation When a movie is loaded, it will notify the user that “it is loading”, “done”. Once it has “read” that, it moves on to the next element in the “tabbing order”. And it continues on that way until it has read all of the elements in the tabbing order. Keep your content (elements) “static” so that it does not repeat. Rotating Banner Example. Halt Flash Events keystroke (Alt+Shift+M) for the Window-Eyes screen reader. This keystroke allows a screen reader user to suspend Flash notifications on the page. Pressing the keystroke again allows the user to resume Flash notifications.
  • Demos
  • Components and accessibility Text is available via the alt-text dialogue box   Accessible movie elements   Providing text equivalents for entire movies Keyboard access It is important that all controls that can be manipulated via the mouse also be accessible via the keyboard. This is intended to support users with mobility impairments as well as screen reader users. Assign keyboard shortcuts for most essential controls Captions Standards support Adobe Flash CS4 Professional software provides a component that allows developers to easily add captions to either FLV or H.264 video in Flash. New captioning component You use the FLVPlaybackCaptioning component with one or more FLVPlayback components. Accessible interface The captioning support in Flash is complemented by support for keyboard and screen reader interaction with the video playback controls, making Flash the most accessible way to deliver video on the web. Control over audio playback Music and audio that plays as the site loads presents a serious challenge to screen reader users. Accessible interaction Users who rely on keyboard access can utilize a variety of familiar shortcuts to interact with the video controls. Buttons such as Play/Pause, Stop, Rewind, Mute, and Closed Captions can be tabbed to and activated with the spacebar key. Slider controls such as the volume and playhead position controls can be accessed via the arrow keys, and the Home and End keys can be used to go directly to the beginning or end of the range. The volume slider also accepts numeric keys to set the playback audio levels in one quick step. Users who use screen readers will find appropriate names for the video player controls that ensure that each control's purpose is clear. Some controls require that the screen reader is in form interaction mode (which is Forms mode in JAWS or Browse Off mode in Window-Eyes) because screen readers often utilize arrow keys and other shortcuts for other purposes. For example, many screen readers use right and left arrow keys to read individual letters in text and control labels, so these keys are not available outside of form interaction mode, as expected by users.  
  • There is no magic bullet for creating accessible learning. It takes brainstorming and creativity to find solutions that reach beyond “compliant” to truly usable and meaningful. Think outside of the box to generate ideas and then test their validity by putting yourself in the shoes of the person using assistive technology. Understand the technology!
  • Tabbing order is a very important issue when making information “usable”. Does the information and the elements on the screen flow through the tabbing order in an order that is meaningful.
  • As each element is highlighted and read, you can provide descriptive text and instructions regarding the purpose of that element and what you want the learner to decipher or do with it. Example: If this were a safety module and you wanted the learner to do a “what’s wrong in this picture” type activity you could attach an alt-text to each individual graphic in the background with descriptive text, if necessary and explain that if you want them to select this particular graphic as having a “safety issue”, then press enter or something.
  • Once again, make sure the user can quickly navigate back and forth between the menu and the information on the screen. Possibly assign a special hotkey combination to access the menu from anywhere on the screen.
  • Feel free to use Flash movies if you take the time to narrate (and caption) them properly so that the movie has meaning if you either cannot see or hear it.
  • Feel free to create your own navigation rules or suggestions as long as you outline them in the Instructions so the learner can easily remember them and use them. It is a good idea to have a simple link on each page (accessible by one keystroke) where the learner can go to when they want to refresh their memory of the instructions. You can work with people who know the technology to design instructions and find out what features their technology already has built in to navigate and use in your product. You can always have macros built in to your module to accommodate their needs, outside traditional functionality.
  • Be Creative! Although a visually impaired user can tab through each block on the actual crossword puzzle, it is not very “usable” for them to complete this puzzle. By adding text boxes under the clues, the user can enter their answers in the box and for each successive clue the completed letters will autofill. It is also set up so that the screenreader will read the clue and then say “text box with xxxx number of letters” so the person will know how many letters, and on successive clues, what autofilled.
  • Once again – this is a modified example of a frame. The words you need to find are in essence the “menu” or “frame” and then all the letters on the other side are individual text letters that can be read as one tabs through each of them. Although cumbersome all the learner has to do – sighted or not – is select a letter in the word and then press the ctrl+arrow key to continue selecting until the word is complete- then hit enter. I use this example because I want to demonstrate how important keystrokes and tabbing order are for accessibility, not because I feel this would be a good game for someone with a disability to play.
  • Matching – Drag and Drop These can pose problems with Flash. Mostly because they require a mouse and people who use assistive technology typically do not use a mouse. So – change it to a “Drop Down” format, for them. It’s the same concept and is accessible. Use sounds to indicate whether or not they got the answer correct. (i.e., ding or buzz) Mutiple Choice are typically accessible, if built correctly. Fill in the blank and short answer are also accessible, if built correctly.
  • Accessible Flash in a Flash

    1. 3. Man sitting at computer stapling his finger and crying out in pain
    2. 4. Captioning
    3. 7. Click Me
    4. 9. <ul><ul><li>(d) Readability </li></ul></ul><ul><ul><ul><li>Definition: “ (d) Documents shall be organized so they are readable without requiring an associated style sheet .” </li></ul></ul></ul>
    5. 21. <ul><li>Schedule X tax table for those whose filing status is Single. </li></ul>
    6. 23. <ul><li>It helps to understand the technology. </li></ul><ul><li>What can it do? </li></ul><ul><li>How does it do it? </li></ul><ul><li>How does that affect my design? </li></ul>
    7. 24. <ul><li>It helps to understand the technology. </li></ul><ul><li>What can it do? </li></ul><ul><li>How does it do it? </li></ul><ul><li>How does that affect my design? </li></ul>What can it do?
    8. 25. How does it do it? Demos
    9. 26. How does it do it? Components
    10. 28. Tabbing Order
    11. 31. What about Flash?
    12. 32. Provide Instructions
    13. 33. Text vs. Graphics
    14. 37. ? ? ? Questions Drop Down (w/o Sound) Drop Down (w/Sound)
    15. 38. Adobe Acrobat Examples Sign Language IRS Forms 6 Awesome PDF Examples Other Examples
    16. 39. Page  Thank you! Do You Have Any Questions? ? ? ?
    17. 40. Download the Design Document  
    18. 41. www.readwritetechnology.com 703 380 1094

    ×