アクセシビリティを加速するWAI-ARIA

WAI-ARIA 2010 11 15 Web Directions East W3C

• WAI-ARIA • WAI-ARIA • WAI-ARIA • WAI-ARIA

• • WAI-ARIA • WAI-ARIA • WAI-ARIA • WAI-ARIA • • WAI-ARIA

• R&D • Web 3 • Twitter @kazuhito

• • • NVDA • Twitter @debugon

Blog/Podcast http://accessibility.mitsue.co.jp/

WAI-ARIA

WAI-ARIA • Web Accessibility Initiative • Web W3C World Wide Web Consortium • Web

Web Accessibility Initiative WAI http://www.w3.org/WAI/

WAI-ARIA • Accessible Rich Internet Applications • RIA Flash Silverlight Java Ajax Web • Web

WAI-ARIA • WAI Web Web • Ajax HTML JavaScript

Protocols and Formats Working Group http://www.w3.org/WAI/PF/Overview.html

WAI-ARIA

Web • • Dynamic HTML DHTML • Asynchronous JavaScript + XML Ajax • JavaScript

How many users have JavaScript disabled? http://developer.yahoo.com/blogs/ydn/posts/ 2010/10/how-many-users-have-javascript-disabled/

JavaScript • Yahoo! • 2.06 0.26% • 1.3% • JavaScript

JavaScript • • •

• HTML • •

• …… •

• • API

• • • HTML 4.01 / XHTML 1.X tabindex

WAI-ARIA

WAI-ARIA • WAI-ARIA • WAI-ARIA Primer • WAI-ARIA Authoring Practices • WAI-ARIA User Agent Implemenation Guide • WAI-ARIA Roadmap ※ Working Draft

http://www.hitachi.co.jp/universaldesign/wai-aria/index.html

WAI-ARIA • / / API • / / •

• • role • tree / treeitem / group •

• • aria-* • aria-expanded •

• • aria-* • aria-controls •

element.focus() tabindex 0 1 32767 -1 element.focus()

JavaScript DOM HTML / XHTML role / aria-* / tabindex etc. WAI-ARIA API

WAI-ARIA

Windows XP + IE + PC-Talker Windows XP + Firefox + JAWS

newAlert.setAttribute("role", "alert"); if (invalid) { elem.setAttribute("aria-invalid", "true"); addAlert(aMsg); } else { elem.setAttribute("aria-invalid", "false"); removeOldAlert(); }

Google http://www.google.co.jp/ Windows XP + Firefox + NVDA

search , <form action="/search" id=tsf navigation method=GET name=gs role=search> main <div id=res role=main> <div id=leftnav role=navigation> <div id=foot role=contentinfo> contentinfo

Bruce Lawson’s personal site http://www.brucelawson.co.uk/ iOS + Mobile Safari + VoiceOver

banner search <header role="banner"> <div id=searchbox role=search> <footer role="contentinfo"> contentinfo

Accessible Twitter http://www.accessibletwitter.com/ Ubuntu + Firefox + Orca

Accessible Interface to YouTube http://tube.majestyc.net/ Windows XP + Firefox + NVDA

<div id="details" role="region"> <p><strong>Status:</strong><span id="status" aria-live="assertive">Playing</span></p> ... </div>

WAI-ARIA

HTML 4.01 / XHTML 1.X • JavaScript • role aria-* invalid • tabindex • JavaScript

HTML5 • role aria-* • • footer role contentinfo • tabindex

• Internet • JAWS Explorer • NVDA • Mozilla Firefox • Orca • Opera • Safari • Chrome

JavaScript • jQuery UI • Dojo Toolkit • YUI Library

• WAI-ARIA • / / JavaScript • HTML5 • JavaScript / CSS

http://www.mitsue.co.jp/ Tel 03-3344-7452 k-kidachi@mitsue.co.jp tsuji-katsutoshi@mitsue.co.jp

http://kidachi.kazuhi.to	34
http://news.uxdc.jp	33
http://paper.li	4
http://a0.twimg.com	2
https://twitter.com	1

アクセシビリティを加速するWAI-ARIA

by Mitsue-Links Co.,Ltd. R&D Department Accessibility Team on Nov 17, 2010

Accessibility

Categories

Tags

Upload Details

Usage Rights

5 Embeds 74

Statistics

アクセシビリティを加速するWAI-ARIA — Presentation Transcript