アクセシビリティ部第0回勉強会

2014年1月24日
黒澤剛志
自己紹介
●

黒澤剛志(@Takenspc)

●

都内某Web制作会社でWebアクセシビリティの
仕事をしています

●

ごくまれにブラウザーにパッチを投げたり
ごくまれな活動

[chrome] Revision 243522
https://src.chromium.org/viewvc/chrome?view=revision&revision=243522
アンケート
1. Webアクセシビリティ初心者です
2. Webアクセシビリティ中級者です
3. むしろ、私にしゃべらせろ
Webアクセシビリティとは
●

特定の環境に依存せず、
だれもが情報にアクセスできる・使えること
–

使う人も様々

–

デバイスも様々

–

利用環境も様々
使う人も様々
●

支援技術を使っているユーザー

●

特定の設定を必要とするユーザー

●

キーボードを使っているユーザー
支援技術の例:VoiceOver

アップル – アクセシビリティ – iOS -VoiceOver
http://www.apple.com/jp/accessibility/ios/voiceover/
字幕・キャプション

Captions and Subtitles on Vimeo
http://vimeo.com/help/faq/managing-your-videos/captions-and-subtitles
デバイスも様々
●

タッチ・スクリーン

●

キーボードがないデバイス

●

電子ペーパー

●

音声によるインタラクション
タッチスクリーン

Slider | jQuery UI
http://jqueryui.com/slider/
扱える色の数

Use Cases and Requirements for Standardizing Responsive Images
http://www.w3.org/TR/respimg-usecases/#matching-med...
利用環境も様々
●

環境光

●

環境音

●

ネットワーク環境
Webアクセシビリティとは
●

特定の環境に依存せず、
だれもが情報にアクセスできる・使えること

●

○○対応というだけではなく、
その基盤となるもの
なんで2014年にWebアクセシビリティ?
なんで2014年にWebアクセシビリティ?

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

2014年以前から
アクセシビリティは重要
Webを取り巻く状況
●

Webは特定の環境だけのものではない

●

利用者の多様化もデバイスの多様化も
2014年に突然始まったわけではない
でも、2014年は節目の年
でも、2014年は節目の年
HTML5とアクセシビリティ
●

表現できるセマンティックが増える

●

WAI-ARIAなどとの組み合わせ

●

フォームコントロールなどの
インタラクティブな機能

●

画像に対する代替テキストの必要要件

●

テキストトラック
2014年のWeb標準いろいろ
●

HTML5:勧告予定

●

HTML 5.1: Last Call? CR?

●

Canvas 2D Context:勧告予定

●

WAI-ARIA 1.0:勧告予定

●

WebVTT 1.0...
実際のところ、悩みませんか?
●

何をどこまでやればいいの?

●

実装前に考えなきゃいけないこともあるよね?

●

どういう点に注意して実装すればいいの?
何をどこまでやれば良いの?
●

Web Content Accessibility Guidelines (WCAG) 2.0
–

W3C勧告(2008年12月)

–

特定の技術に依存しない
●

WCAG 2.0を単独で読んでも難しい...
WCAG 2.0(日本語訳)

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

WCAG 2.0 解説書(日本語訳)
http://waic.jp/docs/UNDERSTANDING-WCAG20/Overview.html
実装前に考えなきゃいけないこと

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

Colour Accessibility
http://24ways.org/2012/colour-accessibility/
どう実装するのがいいの?
●

基本的な考え方は変わらないかもしれない
HTML4

Introduction to HTML 4 (ja)
http://www.asahi-net.or.jp/~sd5a-ucd/rec-html401j/intro/intro.html#h-2.4.2
どう実装するのがいいの?
●

技術やフレームワーク、ツールは変わりつづけ
る
セマンティックを大切に

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

Mobile Accessibility & jQuery Mobile
http://pauljadam.com/jquerymobilea11y/#sencha
WAI-ARIA

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

Web Accessibility Advent Calendar 2013
http://www.adventar.org/calendars/64
WAI-ARIA Authoring Practices

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

Using WAI-ARIA in HTML
http://www.w3.org/TR/aria-in-html/
アクセシビリティ部
Webアクセシビリティを一緒に考える部活です
矢倉さんのお話
伊原さんのお話
今後の部活動について
●

2か月に1度程度?
–

●

次回は4月ごろ

皆さん、どんな活動に興味がありますか?
活動の例
●

勉強会

●

ハッカソン

●

マークアップ部的活動

●

英語部的活動

●

テスト部的活動

●

その他
勉強会
●

企画/ディレクションより

●

仕様/エンジニアリングより

●

支援技術より
例えば…色の問題

Colour Accessibility
http://24ways.org/2012/colour-accessibility/
例えば…jQuery UI

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

jquery.ui.dialog.js
https://github.com/jquery/jquery-ui/blob/master/ui/jquery.ui.dialog.js
例えば…Web Components

Introducing Brick: Minimal-markup Web Components for Faster App Development
https://hacks.mozilla.org/...
例えば…Web Components

Introducing Brick: Minimal-markup Web Components for Faster App Development
https://hacks.mozilla.org/...
例えば…Web Components

Introducing Brick: Minimal-markup Web Components for Faster App Development
https://hacks.mozilla.org/...
ハッカソン

Accessibility Hackathon
http://accessibilityhack.com/
マークアップ部的活動
●

特定のコンテンツにアクセシブルな実装を検討
参考:MarkupCafe

続・よくある3つのデザインから考える、マークアップの最適解
http://html5experts.jp/nakajmg/3225/
例えば…画像

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
英語部的活動
●

例えばこんな文書
–

WAI-ARIA 1.0 Authoring Practices

–

Using ARIA in HTML

–

Web Platform Docs
例えば…WAI-ARIA 1.0 Authoring Practices

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

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

ARIA reference
http://docs.webplatform.org/wiki/aria
テスト部的活動
●

アクセシビリティ機能のテストは
プラットフォーム・実装依存になりがち

●

テストのフレームワークを考えるところから?
参考:Test the Web Forward

Test the Web Forward
http://testthewebforward.org/
その他
●

アイディアがあればぜひ
最後にお知らせ
●

スタッフ募集中です!
html5jアクセシビリティ部第0回勉強会
Upcoming SlideShare
Loading in …5
×

html5jアクセシビリティ部第0回勉強会

1,223 views

Published on

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

Published in: Technology

html5jアクセシビリティ部第0回勉強会

  1. 1. アクセシビリティ部第0回勉強会 2014年1月24日 黒澤剛志
  2. 2. 自己紹介 ● 黒澤剛志(@Takenspc) ● 都内某Web制作会社でWebアクセシビリティの 仕事をしています ● ごくまれにブラウザーにパッチを投げたり
  3. 3. ごくまれな活動 [chrome] Revision 243522 https://src.chromium.org/viewvc/chrome?view=revision&revision=243522
  4. 4. アンケート 1. Webアクセシビリティ初心者です 2. Webアクセシビリティ中級者です 3. むしろ、私にしゃべらせろ
  5. 5. Webアクセシビリティとは ● 特定の環境に依存せず、 だれもが情報にアクセスできる・使えること – 使う人も様々 – デバイスも様々 – 利用環境も様々
  6. 6. 使う人も様々 ● 支援技術を使っているユーザー ● 特定の設定を必要とするユーザー ● キーボードを使っているユーザー
  7. 7. 支援技術の例:VoiceOver アップル – アクセシビリティ – iOS -VoiceOver http://www.apple.com/jp/accessibility/ios/voiceover/
  8. 8. 字幕・キャプション Captions and Subtitles on Vimeo http://vimeo.com/help/faq/managing-your-videos/captions-and-subtitles
  9. 9. デバイスも様々 ● タッチ・スクリーン ● キーボードがないデバイス ● 電子ペーパー ● 音声によるインタラクション
  10. 10. タッチスクリーン Slider | jQuery UI http://jqueryui.com/slider/
  11. 11. 扱える色の数 Use Cases and Requirements for Standardizing Responsive Images http://www.w3.org/TR/respimg-usecases/#matching-media-features-and-media-types
  12. 12. 利用環境も様々 ● 環境光 ● 環境音 ● ネットワーク環境
  13. 13. Webアクセシビリティとは ● 特定の環境に依存せず、 だれもが情報にアクセスできる・使えること ● ○○対応というだけではなく、 その基盤となるもの
  14. 14. なんで2014年にWebアクセシビリティ?
  15. 15. なんで2014年にWebアクセシビリティ? 2014年以前から アクセシビリティは重要
  16. 16. なんで2014年にWebアクセシビリティ? 2014年以前から アクセシビリティは重要
  17. 17. Webを取り巻く状況 ● Webは特定の環境だけのものではない ● 利用者の多様化もデバイスの多様化も 2014年に突然始まったわけではない
  18. 18. でも、2014年は節目の年
  19. 19. でも、2014年は節目の年
  20. 20. HTML5とアクセシビリティ ● 表現できるセマンティックが増える ● WAI-ARIAなどとの組み合わせ ● フォームコントロールなどの インタラクティブな機能 ● 画像に対する代替テキストの必要要件 ● テキストトラック
  21. 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. 22. 実際のところ、悩みませんか? ● 何をどこまでやればいいの? ● 実装前に考えなきゃいけないこともあるよね? ● どういう点に注意して実装すればいいの?
  23. 23. 何をどこまでやれば良いの? ● Web Content Accessibility Guidelines (WCAG) 2.0 – W3C勧告(2008年12月) – 特定の技術に依存しない ● WCAG 2.0を単独で読んでも難しい ● 関連文書を参考に
  24. 24. WCAG 2.0(日本語訳) ウェブ・コンテンツ・アクセシビリティ・ガイドライン (WCAG) 2.0 (日本語訳) http://waic.jp/docs/WCAG20/Overview.html
  25. 25. WCAG 2.0 解説書(日本語訳) WCAG 2.0 解説書(日本語訳) http://waic.jp/docs/UNDERSTANDING-WCAG20/Overview.html
  26. 26. 実装前に考えなきゃいけないこと Web Accessibility for Designers http://webaim.org/resources/designers/
  27. 27. 実装前に考えなきゃいけないこと Cont. Colour Accessibility http://24ways.org/2012/colour-accessibility/
  28. 28. どう実装するのがいいの? ● 基本的な考え方は変わらないかもしれない
  29. 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. 30. どう実装するのがいいの? ● 技術やフレームワーク、ツールは変わりつづけ る
  31. 31. セマンティックを大切に Mobile Accessibility & jQuery Mobile http://pauljadam.com/jquerymobilea11y/#sencha
  32. 32. セマンティックを大切に Mobile Accessibility & jQuery Mobile http://pauljadam.com/jquerymobilea11y/#sencha
  33. 33. WAI-ARIA Accessible Rich Internet Applications (WAI-ARIA) 1.0 http://www.w3.org/TR/wai-aria/
  34. 34. WAI-ARIAへの注目 Web Accessibility Advent Calendar 2013 http://www.adventar.org/calendars/64
  35. 35. WAI-ARIA Authoring Practices WAI-ARIA 1.0 Authoring Practices http://www.w3.org/TR/wai-aria-practices/
  36. 36. Using WAI-ARIA in HTML Using WAI-ARIA in HTML http://www.w3.org/TR/aria-in-html/
  37. 37. アクセシビリティ部 Webアクセシビリティを一緒に考える部活です
  38. 38. 矢倉さんのお話
  39. 39. 伊原さんのお話
  40. 40. 今後の部活動について ● 2か月に1度程度? – ● 次回は4月ごろ 皆さん、どんな活動に興味がありますか?
  41. 41. 活動の例 ● 勉強会 ● ハッカソン ● マークアップ部的活動 ● 英語部的活動 ● テスト部的活動 ● その他
  42. 42. 勉強会 ● 企画/ディレクションより ● 仕様/エンジニアリングより ● 支援技術より
  43. 43. 例えば…色の問題 Colour Accessibility http://24ways.org/2012/colour-accessibility/
  44. 44. 例えば…jQuery UI jQuery UI http://jqueryui.com/
  45. 45. 例えば…jQuery UI jquery.ui.dialog.js https://github.com/jquery/jquery-ui/blob/master/ui/jquery.ui.dialog.js
  46. 46. 例えば…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/
  47. 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. 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. 49. ハッカソン Accessibility Hackathon http://accessibilityhack.com/
  50. 50. マークアップ部的活動 ● 特定のコンテンツにアクセシブルな実装を検討
  51. 51. 参考:MarkupCafe 続・よくある3つのデザインから考える、マークアップの最適解 http://html5experts.jp/nakajmg/3225/
  52. 52. 例えば…画像 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
  53. 53. 英語部的活動 ● 例えばこんな文書 – WAI-ARIA 1.0 Authoring Practices – Using ARIA in HTML – Web Platform Docs
  54. 54. 例えば…WAI-ARIA 1.0 Authoring Practices WAI-ARIA 1.0 Authoring Practices http://www.w3.org/TR/wai-aria-practices/
  55. 55. 例えば…Using WAI-ARIA in HTML Using WAI-ARIA in HTML http://www.w3.org/TR/aria-in-html/
  56. 56. 例えば…Web Platform Docs ARIA reference http://docs.webplatform.org/wiki/aria
  57. 57. テスト部的活動 ● アクセシビリティ機能のテストは プラットフォーム・実装依存になりがち ● テストのフレームワークを考えるところから?
  58. 58. 参考:Test the Web Forward Test the Web Forward http://testthewebforward.org/
  59. 59. その他 ● アイディアがあればぜひ
  60. 60. 最後にお知らせ ● スタッフ募集中です!

×