http://atnd.org/events/46458 での資料です。

1. アクセシビリティ部第0回勉強会
2014年1月24日
黒澤剛志

2. 自己紹介
●
黒澤剛志（@Takenspc）
●
都内某Web制作会社でWebアクセシビリティの
仕事をしています
●
ごくまれにブラウザーにパッチを投げたり

3. ごくまれな活動
[chrome] Revision 243522
https://src.chromium.org/viewvc/chrome?view=revision&revision=243522

4. アンケート
1. Webアクセシビリティ初心者です
2. Webアクセシビリティ中級者です
3. むしろ、私にしゃべらせろ

5. Webアクセシビリティとは
●
特定の環境に依存せず、
だれもが情報にアクセスできる・使えること
–
使う人も様々
–
デバイスも様々
–
利用環境も様々

6. 使う人も様々
●
支援技術を使っているユーザー
●
特定の設定を必要とするユーザー
●
キーボードを使っているユーザー

7. 支援技術の例：VoiceOver
アップル – アクセシビリティ – iOS -VoiceOver
http://www.apple.com/jp/accessibility/ios/voiceover/

8. 字幕・キャプション
Captions and Subtitles on Vimeo
http://vimeo.com/help/faq/managing-your-videos/captions-and-subtitles

9. デバイスも様々
●
タッチ・スクリーン
●
キーボードがないデバイス
●
電子ペーパー
●
音声によるインタラクション

10. タッチスクリーン
Slider | jQuery UI
http://jqueryui.com/slider/

11. 扱える色の数
Use Cases and Requirements for Standardizing Responsive Images
http://www.w3.org/TR/respimg-usecases/#matching-media-features-and-media-types

12. 利用環境も様々
●
環境光
●
環境音
●
ネットワーク環境

13. Webアクセシビリティとは
●
特定の環境に依存せず、
だれもが情報にアクセスできる・使えること
●
○○対応というだけではなく、
その基盤となるもの

14. なんで2014年にWebアクセシビリティ？

15. なんで2014年にWebアクセシビリティ？
2014年以前から
アクセシビリティは重要

16. なんで2014年にWebアクセシビリティ？
2014年以前から
アクセシビリティは重要

17. Webを取り巻く状況
●
Webは特定の環境だけのものではない
●
利用者の多様化もデバイスの多様化も
2014年に突然始まったわけではない

18. でも、2014年は節目の年

19. でも、2014年は節目の年

20. HTML5とアクセシビリティ
●
表現できるセマンティックが増える
●
WAI-ARIAなどとの組み合わせ
●
フォームコントロールなどの
インタラクティブな機能
●
画像に対する代替テキストの必要要件
●
テキストトラック

21. 2014年のWeb標準いろいろ
●
HTML5：勧告予定
●
HTML 5.1: Last Call? CR?
●
Canvas 2D Context：勧告予定
●
WAI-ARIA 1.0：勧告予定
●
WebVTT 1.0：勧告予定?
●
Indie UI: Events 1.0: Last Call?

22. 実際のところ、悩みませんか？
●
何をどこまでやればいいの？
●
実装前に考えなきゃいけないこともあるよね？
●
どういう点に注意して実装すればいいの？

23. 何をどこまでやれば良いの？
●
Web Content Accessibility Guidelines (WCAG) 2.0
–
W3C勧告（2008年12月）
–
特定の技術に依存しない
●
WCAG 2.0を単独で読んでも難しい
●
関連文書を参考に

24. WCAG 2.0（日本語訳）
ウェブ・コンテンツ・アクセシビリティ・ガイドライン (WCAG) 2.0 （日本語訳）
http://waic.jp/docs/WCAG20/Overview.html

25. WCAG 2.0 解説書（日本語訳）
WCAG 2.0 解説書（日本語訳）
http://waic.jp/docs/UNDERSTANDING-WCAG20/Overview.html

26. 実装前に考えなきゃいけないこと
Web Accessibility for Designers
http://webaim.org/resources/designers/

27. 実装前に考えなきゃいけないこと Cont.
Colour Accessibility
http://24ways.org/2012/colour-accessibility/

28. どう実装するのがいいの？
●
基本的な考え方は変わらないかもしれない

29. HTML4
Introduction to HTML 4 (ja)
http://www.asahi-net.or.jp/~sd5a-ucd/rec-html401j/intro/intro.html#h-2.4.2

30. どう実装するのがいいの？
●
技術やフレームワーク、ツールは変わりつづけ
る

31. セマンティックを大切に
Mobile Accessibility & jQuery Mobile
http://pauljadam.com/jquerymobilea11y/#sencha

32. セマンティックを大切に
Mobile Accessibility & jQuery Mobile
http://pauljadam.com/jquerymobilea11y/#sencha

33. WAI-ARIA
Accessible Rich Internet Applications (WAI-ARIA) 1.0
http://www.w3.org/TR/wai-aria/

34. WAI-ARIAへの注目
Web Accessibility Advent Calendar 2013
http://www.adventar.org/calendars/64

35. WAI-ARIA Authoring Practices
WAI-ARIA 1.0 Authoring Practices
http://www.w3.org/TR/wai-aria-practices/

36. Using WAI-ARIA in HTML
Using WAI-ARIA in HTML
http://www.w3.org/TR/aria-in-html/

37. アクセシビリティ部
Webアクセシビリティを一緒に考える部活です

38. 矢倉さんのお話

39. 伊原さんのお話

41. 今後の部活動について
●
2か月に1度程度？
–
●
次回は4月ごろ
皆さん、どんな活動に興味がありますか？

42. 活動の例
●
勉強会
●
ハッカソン
●
マークアップ部的活動
●
英語部的活動
●
テスト部的活動
●
その他

43. 勉強会
●
企画/ディレクションより
●
仕様/エンジニアリングより
●
支援技術より

44. 例えば…色の問題
Colour Accessibility
http://24ways.org/2012/colour-accessibility/

45. 例えば…jQuery UI
jQuery UI
http://jqueryui.com/

46. 例えば…jQuery UI
jquery.ui.dialog.js
https://github.com/jquery/jquery-ui/blob/master/ui/jquery.ui.dialog.js

47. 例えば…Web Components
Introducing Brick: Minimal-markup Web Components for Faster App Development
https://hacks.mozilla.org/2013/08/introducing-brick-minimal-markup-web-components-for-faster-app-development/

48. 例えば…Web Components
Introducing Brick: Minimal-markup Web Components for Faster App Development
https://hacks.mozilla.org/2013/08/introducing-brick-minimal-markup-web-components-for-faster-app-development/

49. 例えば…Web Components
Introducing Brick: Minimal-markup Web Components for Faster App Development
https://hacks.mozilla.org/2013/08/introducing-brick-minimal-markup-web-components-for-faster-app-development/

50. ハッカソン
Accessibility Hackathon
http://accessibilityhack.com/

51. マークアップ部的活動
●
特定のコンテンツにアクセシブルな実装を検討

52. 参考：MarkupCafe
続・よくある3つのデザインから考える、マークアップの最適解
http://html5experts.jp/nakajmg/3225/

53. 例えば…画像
Google画像検索で「人物相関図」を検索
https://www.google.co.jp/search?q=%E4%BA%BA%E7%89%A9%E7%9B%B8%E9%96%A2%E5%9B%B3&tbm=isch

54. 英語部的活動
●
例えばこんな文書
–
WAI-ARIA 1.0 Authoring Practices
–
Using ARIA in HTML
–
Web Platform Docs

55. 例えば…WAI-ARIA 1.0 Authoring Practices
WAI-ARIA 1.0 Authoring Practices
http://www.w3.org/TR/wai-aria-practices/

56. 例えば…Using WAI-ARIA in HTML
Using WAI-ARIA in HTML
http://www.w3.org/TR/aria-in-html/

57. 例えば…Web Platform Docs
ARIA reference
http://docs.webplatform.org/wiki/aria

58. テスト部的活動
●
アクセシビリティ機能のテストは
プラットフォーム・実装依存になりがち
●
テストのフレームワークを考えるところから？

59. 参考：Test the Web Forward
Test the Web Forward
http://testthewebforward.org/

60. その他
●
アイディアがあればぜひ

61. 最後にお知らせ
●
スタッフ募集中です！