Web 2.0 Accessibility: Order in Chaos. Aaron Leventhal

Similar documents
Pro HTML5 Accessibility

How IBM is making Web applications more accessible with WAI-ARIA

Voluntary Product Accessibility Template (VPAT)

Backbase Accessibility

Voluntary Product Accessibility Template

Voluntary Product Accessibility Template Blackboard Learn Release 9.1 April 2014 (Published April 30, 2014)

Summary Table Voluntary Product Accessibility Template

How to Develop Accessible Linux Applications

vcenter Operations Manager Administration 5.0 Online Help VPAT

Universal Design. For Web Applications. Wendy Chisholm & Matt May Web 2.0 Expo 17 September 2008

Information and Communications Standard. Making your website more accessible

Mac Built-in Accessibility ( Lion) - Quick Start Guide

A new home page design is being finalized, which will add a new link to material in other languages through the top navigation of the homepage.

VPAT. Voluntary Product Accessibility Template. Version 1.5. Summary Table VPAT. Voluntary Product Accessibility Template. Supporting Features

Serena Software Voluntary Product Accessibility Report. Summary Table

HSU Accessibility Checkpoints Explained

Web Accessibility means that a website is accessible if everyone, regardless of ability, can access the website and retrieve all the information

WCAG 2.0 for Designers: Beyond Screen Readers and Captions

Summary Table for SolarWinds Web Help Desk

Section Software Applications and Operating Systems - Detail Voluntary Product Accessibility VPSX. Level of Support & Supporting Features

Web Accessibility Report

Summary Table for SolarWinds Web Help Desk

Contact for more Information: or

Best Practices for Accessible Flash Design. by Bob Regan

BUILDING MORE ACCESSIBILE SITES. SharePoint 2010

Seven Steps to Creating an Accessible in Outlook

VPAT Voluntary Product Accessibility Template Version 1.3

Avaya Speech Analytics Desktop Client 2.0

VPAT Summary. VPAT Details. Section Web-based Internet information and applications - Detail

Accessibility Guidelines Bell.ca Special Needs. Cesart April 2006

VPAT. Voluntary Product Accessibility Template. Version 1.3

Access to libraries for persons with disabilities - CHECKLIST

Blackboard Web Community Manager WCAG 2.0 Support Statement February 2016

Voluntary Product Accessibility Report

Why make the Web Accessible for People with Disabilities. Ajay Kolhatkar, PhD Future Web Research Lab, SETLabs, Infosys Technologies Limited

DO THE RIGHT THING ACCESSIBILITY AND INCLUSIVE DESIGN (WITH DRUPAL)

SellerDeck 2013 Reviewer's Guide

SECTION 508 COMPLIANCE

Website Accessibility Under Title II of the ADA

Four Types of Disabilities: Their Impact on Online Learning

PISA 2015 MS Online School Questionnaire: User s Manual

Wyse Winterm Thin Clients -- Accessibility Information

Developing accessible portals and portlets with IBM WebSphere Portal

UNIVERSAL DESIGN OF DISTANCE LEARNING

Mobile Web Design with HTML5, CSS3, JavaScript and JQuery Mobile Training BSP-2256 Length: 5 days Price: $ 2,895.00

WBU PowerPoint Guidelines

Mobile Application Accessibility Handbook 2. UNDERSTANDING THE DIFFICULTIES ENCOUNTERED BY PERSONS WITH DISABILITIES 5

Advanced Outlook Tutorials

LETTERS, LABELS &

Boundary Commission for England Website technical development - Statement of Work. Point of Contact for Questions. Project Director.

Web Designing with UI Designing

Nuance PDF Converter Enterprise 8

Creating a website using Voice: Beginners Course. Participant course notes

PDF Accessibility Overview

-ipad 2: Quick Reference Guide-

WCAG 2.0 Checklist. Perceivable Web content is made available to the senses - sight, hearing, and/or touch. Recommendations

Chapter 4: Eligibility Categories

GUIDELINE: DEVELOPING INDIVIDUAL EDUCATIONAL ACCESS PLANS

Documents Eligible to Earn Added Authorizations in Special Education (AASE) UPDATED 6/2012

Collaborative Editing for All: the Google Docs Example

Summary Table Voluntary Product Accessibility Template

Dreamweaver Domain 2: Planning Site Design and Page Layout

Voluntary Product Accessibility Template (VPAT)

Mobile Accessibility. Jan Richards Project Manager Inclusive Design Research Centre OCAD University

AUTOMATED CONFERENCE CD-ROM BUILDER AN OPEN SOURCE APPROACH Stefan Karastanev

Xerox DocuMate 3125 Document Scanner

Vision Impairment and Computing

HTML Form Widgets. Review: HTML Forms. Review: CGI Programs

Responsive Web Design for Teachers. Exercise: Building a Responsive Page with the Fluid Grid Layout Feature

WESTERN KENTUCKY UNIVERSITY. Web Accessibility. Objective

Making it clear. Guidelines to producing printed material for people who are blind or partially sighted.

Outlook Web Access (OWA) User Guide

Introduction to ATI Concepts. California State University Fullerton Campus Information Technology Timothy Benbow

icohere Products and Section 508 Standards Voluntary Product Accessibility Template (VPAT )

Training Resource for Small Businesses and Organizations:

Assistive Technology Considerations for Students: Math

Chapter 14: Links. Types of Links. 1 Chapter 14: Links

Creating Accessible Forms in Microsoft Word and Adobe PDF

Transcription:

Web 2.0 Accessibility: Order in Chaos Aaron Leventhal

Living in Germany Based around rules & structure - Correct beer brewing, etc. - Project structure planned first

But born in the United States America likes to break rules & change the game Structure comes as it becomes necessary Sometimes bad, sometimes good

What is Accessibility? Is it engineering compassion?

Visual impairments People who are blind or deaf-blind use screen reading software with speech or soft Braille Stevie Wonder (blindness) Partially sighted people may use font/contrast settings or screen magnification software. Aldous Huxley (low vision)

Print disabilities People with dyslexia use text to speech software combined with word highlighting Helen Keller, writer (deaf and blind) Alexander Graham Bell inventor of the telephone (dyslexia)

Physical disabilities Quadriplegics use the keyboard with a on screen keyboards and speech input software, with special pointing devices (head/eye tracking mice or mouth sticks) One handed typists use sticky key software People with ALS or cerebral palsy may use filter keys, word prediction software and single switch devices Stephen Hawking (ALS)

Other disabilities Hearing impaired people need software that does not rely on sound for cues Color blind people need software that does not rely on color alone, This includes 8-10% of males who see both red and green as brown! Beethoven (hearing impaired) Persons with cognitive and learning disabilities need software with simple layout and messages also useful for young, elderly and newbie users Persons with epilepsy need software with no flashing or blinking: (2-55 Hz can cause seizures) Nobel (epilepsy)

Just Tell Us What To Do! Images and colors: don t rely on them Keyboard navigation must be available Structure with semantic HTML Be a good rule follower! http://www.ibm.com/able/guidelines (based on WCAG 1)

Can we use JavaScript? WCAG 1.0, 508, EU say no -- must work with script off

Split Personality: Web Developers Good citizen Semantics Static HTML Accessible Traditional

The Dark (but Exciting) Side Rule breaker Dynamic JavaScript Not accessible Cutting edge!

Use WAI-ARIA!

Embracing Change WAI-ARIA: W3C working draft Describes the structure of Dynamic Content New attributes are used, like role= slider Allows both innovation and accessibility Doesn t break existing content

What is WAI-ARIA? Describes dynamic content: 1. Visual 2. Informational 3. Interactive

Visual Eye Candy 1. Animation/transitions 2. Keep quiet: aria-live= off 3. Please allow them to be turned off!

Informational Content 00:12 1. Built-in role types: role= alert log timer progressbar 2. Generic live content, e.g. stock quotes Set the interruption/politeness: aria-live= off polite assertive rude

Interactive Widgets 1. Usually have onclicks 2. Keyboard navigation! Important to use Style Guide 3. ARIA roles and properties: <div role= slider aria-valuenow= 50 4. Also, more complex widgets, tree, grid, etc. 5. ARIA drag and drop

Sampling of ARIA Semantics alert grid application tree slider menu & more description tabpanel progressbar valuenow invalid labelledby multiselectable required selected & more checked haspopup describedby expanded

ARIA even improves HTML 1. Enhancing forms * aria-invalid, aria-required * role= alert * aria-describedby 2. Tables for layout * <table role= presentation > 3. Landmarks * role= main, navigation, etc.

Validation? WAI-ARIA breaks HTML 4.01 validation But, accessibility is more important Use Validator.nu experimental service

Where is ARIA supported? Browser support Assistive Tech (screen readers, magnifiers,...)

Build your own components? Building ARIA components is a challenge Docs - codetalks.org Specs - w3.org

Or borrow them? Use a JavaScript library to save effort Most accessible

Resources Docs & samples http://codetalks.org Mailing list Google groups free-aria