Agenda

1. About Mitsue-Links
2. About Flash Technology
3. What to Consider in order to Comply with WCAG 2.0
4. Case Study 1: Accessible Podcast Player
5. Workflow for Creating Accessible Flash Content
6. Case Study 2: Visualsorter
7. Summary

About Mitsue-Links: Company Profile

• Founded in July of 1990
• Information integrator that guides the sustainable development of our clients’ businesses
• Have obtained ISO9001 (Quality Management System) and ISO14001 (Environmental Management)
• Currently as of March of 2009, 275 employees (including 3 accessibility-specific staff)
• One of the largest Web design / development companies in Japan
• http://www.mitsue.co.jp/english/

About Mitsue-Links: Web Accessibility Solution

• Web Accessibility Evaluation Service
  • Screen Reader Testing
• Accessibility User Testing Service
• Web Construction Accessibility Support Service
  • WCAG Compliance Service
  • JIS Guideline Compliance Service
  • Accessible Flash Content Development Service
• Web Operations Accessibility Support Service
• Web Accessibility Consulting

About Mitsue-Links: Activities for Improving Accessibility

• Accessibility Blog
• Accessibility Podcast
• Screen reader explanatory video
• Participation in the W3C / WAI
  • Reported about WCAG 2.0 implementation
• Participation in the UAI Research Group
  • Publishing of the Japanese version of “Web Accessibility: Web Standards and Regulatory Compliance”
  • Localizing the NVDA into Japanese

About Flash Technology: Overview

• Macromedia (Adobe) Released 1st ver. of Flash in Nov. 1996 (Originally FutureSplash Animator developed by FutureWave Software)
• Can contain Vector / Raster Graphics, Sound and Movie
• Good for adding Interactivity / Animation with Multimedia Content
• Very common way to provide movies (YouTube, Google Video, Vimeo, etc.)

About Flash Technology: Usage Trend

Became popular with the spread of Flash Player

• Content with Aesthetic Value
  • Splash Screen
  • Art Work
• Content with Functional Value
  • Navigation
  • Player

What to Consider in order to Comply with WCAG 2.0: Creating/Browsing Requirements

• Creating Environment
  • Flash MX or above
• Browsing Environment
  • Flash Player 6 or above
  • Voice Reading Environment
    • Windows 98, 2000, XP or above
    • Microsoft Internet Explorer 5 or above
    • Window-Eyes 4.2 or above
    • JAWS 4.5 or above
    • IBM Homepage Reader 3.04 or above
    • etc.

What to Consider in order to Comply with WCAG 2.0: About WCAG 2.0

• Officially published as a Recommendation in Dec. 2008
• More Testable
• Technology-Independent
• 4 Principles, 12 Guidelines, 3 Levels of Conformance, 61 Success Criteria

What to Consider in order to Comply with WCAG 2.0: Flash Content and WCAG 2.0

• Principle 1: Perceivable
• Principle 2: Operable
• Principle 3: Understandable
• Principle 4: Robust

What to Consider in order to Comply with WCAG 2.0: Principle 1: Perceivable

• 1.1 Provide text alternatives for any non-text content so that it can be changed into other forms people need, such as large print, braille, speech, symbols or simpler language.
• 1.2 Provide alternatives for time-based media.
• 1.3 Create content that can be presented in different ways (for example simpler layout) without losing information or structure.
• 1.4 Make it easier for users to see and hear content including separating foreground from background.

What to Consider in order to Comply with WCAG 2.0: Principle 2: Operable

• 2.1 Make all functionality available from a keyboard.
• 2.2 Provide users enough time to read and use content.
• 2.3 Do not design content in a way that is known to cause seizures.
• 2.4 Provide ways to help users navigate, find content, and determine where they are.

What to Consider in order to Comply with WCAG 2.0: Principle 3: Understandable

• 3.1 Make text content readable and understandable.
• 3.2 Make Web pages appear and operate in predictable ways.
• 3.3 Help users avoid and correct mistakes.

What to Consider in order to Comply with WCAG 2.0: Principle 4: Robust

• 4.1 Maximize compatibility with current and future user agents, including assistive technologies.

Case Study 1: Accessible Podcast Player: About Accessible Podcast Player

• Audio player for providing our Accessibility Podcast
• Simple media player at the begining
  • Minimum accessibility features

Case Study 1: Accessible Podcast Player: Demonstration of Inaccessible Podcast Player

• Inaccessible Podcast Player Demo

Case Study 1: Accessible Podcast Player: Demonstration of Accessible Podcast Player

• Accessible Podcast Player Demo 1
• Accessible Podcast Player Demo 2
• Accessible Podcast Player Demo 3

Case Study 1: Accessible Podcast Player: Problems with Inaccessible Podcast Player

Screen Reader users

Impossible (or not easy) to identify which button has what function because the buttons aren't labeled properly

People who are hard of hearing

Cannot gain any information from this content because no alternate information is provided for audio content

Cannot notice if audio content starts immediately after opening a content

Users who use keyboard only

Cannot use effects or features only for pointing devices such as clicks, double clicks, and mouseover

Case Study 1: Accessible Podcast Player: Points for how to meet WCAG 2.0

SC 1.1.1 Non-text Content

All non-text content that is presented to the user has a text alternative that serves the equivalent purpose

SC 1.2.2 Captions (Prerecorded)

Captions are provided for all prerecorded audio content in synchronized media

SC 1.2.3 Audio Description or Media Alternative (Prerecorded)

An alternative for time-based media or audio description of the prerecorded video content is provided for synchronized media

SC 2.1.1 Keyboard

All functionality of the content is operable through a keyboard interface without requiring specific timings for individual keystrokes

Workflow for Creating Accessible Flash Content: Workflow Overview

1. Consultation
2. Planning
3. Design
4. Authoring
5. Implementation
6. Validation

Workflow for Creating Accessible Flash Content: 1. Consultation

• Target User
• Communication / Interaction to be Accomplished
  • Communication with Client
    • Accessibility Conformance Level

Workflow for Creating Accessible Flash Content: 2. Planning

• Technology
• Browsing Environment
• Creating Environment
• Accessibility Guidelines

Workflow for Creating Accessible Flash Content: 3. Design

• Presentation
  • Avoid expression that depends on color / shape / position
  • Maintain contrast between foreground and background colors / sound
• Behavior
  • Be careful when using permanent movement
  • Be careful when using flashes of light

Workflow for Creating Accessible Flash Content: 4. Authoring

• Name / Description
  • Auto Label
• Tab / Reading Order
• Keyboard Shortcut
• Hide objects that are not necessary to access
• Assign alternative way to control (e.g. button) interface that is difficult / impossible to operate with keyboard
• Reduce file size as much as possible

Workflow for Creating Accessible Flash Content: 5. Implementation

• Embedding Flash content into a Web page
  • object / embed element
  • Be careful when using JavaScript
  • wmode parameter issue
    • opaque value causes serious problems for keyboard navigation

Workflow for Creating Accessible Flash Content: 6. Validation

• Validation with Browsing Environments
  • Display
  • Behavior
  • Operability
  • Alternate Content

Case Study 2: Visualsorter: About Visualsorter

• Interface using Flash technology applicable to Product / Service Searches
• One Step to Refine Search and Show Detail
• Provides Fun and Comfort
• Easy to Update Content
• http://www.mitsue.co.jp/english/service/produce/visualsorter.html

Case Study 2: Visualsorter: Demonstration of Visualsorter

• Visualsorter Demo

Summary

• Keep Accessibility in Mind throughout the Workflow, based on 4 Principles of WCAG 2.0
  • What kind of communication / interaction is necessary for content to accomplish your goal?
  • Why is Flash technology necessary for content?
• Designer / Developer should know what Flash CS4 can do in terms of accessibility
  • Accessibility Panel / ActionScript
  • Validate with Assistive Technology User (if possible)
• Let's create Flash content that isn't disliked / ignored by users
  • Screen Reader Survey of WebAIM shows that about 72% of screen reader users have some difficulties with Flash content

Thank you!

We All Welcome Your Comments / Feedbacks
k-kidachi@mitsue.co.jp
tsuji-katsutoshi@mitsue.co.jp