Successfully reported this slideshow.
We use your LinkedIn profile and activity data to personalize ads and to show you more relevant ads. You can change your ad preferences anytime.
Webアクセシビリティ 海外の最新動向 2018 アクセシビリティの祭典 2018 セッション 6 植木 真（株式会社インフォアクシア）
植木 真（うえき まこと）  株式会社インフォアクシア 代表取締役  Webアクセシビリティコンサルタント • サイト診断、ガイドライン＆チェックリスト作成、教育・研修 など  国内外のアクセシビリティガイドライン策定に従事 • W3C ...
今日は “Global Accessibility Awareness Day”
“Global Accessibility Awareness Day” 公式サイト http://globalaccessibilityawarenessday.org/
GAAD公式サイトでは神戸の祭典も紹介 http://globalaccessibilityawarenessday.org/events.php
CSUN 2018 http://www.csun.edu/cod/conference/2018/sessions/index.php/
アメリカ西海岸のリゾート都市「サンディエゴ」
今年で33回目、世界最大級のカンファレンス  3/13(水)～15(金)の3日間  442のセッション（発表）  115の展示ブース  約4,500名が参加
夜には “アクセシブル” カラオケ大会なども開催 手話通訳付きのカラオケ大会 TEAM JAPANは盆踊りソング
歌手のスティービー・ワンダー氏 https://www.jpost.com/Jpost-Tech/Tech-Talk-Reaching-higher-ground-with-RightHear-app-547265
このセッションでシェアするのは… 「インクルーシブデザイン」 海外諸国でのWebアクセシビリティの法制化 WCAG 2.1とSilver セッション紹介  Amadeus and American Airlines: From Use...
「インクルーシブデザイン」
From User Tests to an Inclusive Website
研究社 新英和中辞典での「inclusive」の意味 https://ejje.weblio.jp/content/inclusive
インクルーシブデザインとは？ 高齢者や障害のある人など、特別なニーズを抱えた消費者 をデザインプロセスの上流工程へと積極的に巻き込んでい く手法 インクルーシブデザインユニット by 京都大学情報学研究科 http://www.museum.k...
Inclusive Design at Microsoft https://www.microsoft.com/en-us/design/inclusive
Microsoftでは、ゲームでも ”Inclusive Design” Xboxのセッションでも言及
マイクロ ソフトが 考える Inclusive Design Inclusive design is for those who want to make great products for the greatest number of pe...
Definition of inclusive design http://www.inclusivedesigntoolkit.com/whatis/whatis.html
Inclusive Design Principles（英語：原文） http://inclusivedesignprinciples.org/
インクルーシブデザインの原則（日本語訳） 永続的な障害がある利用者（＝障害者）  一時的または状況的な困難に直面している利用者  能力が変化してゆく利用者（＝シニア、高齢者） つまり、私たちみんな - “all of us really”
イギリスのBarclays https://www.barclayscorporate.com/insight-and-research/managing-your-business/making-your-business- accessib...
ガイドラインに準拠する、 それだけでいいの？
“Accessible” ではなく “Inclusive” を使う理由 法律で義務化されてきたことによる固定観念？  “Accessible” = ガイドラインの基準を満たす  “Inclusive” ＝ 広範囲のユーザーのニーズを満たす...
海外諸国での Webアクセシビリティの法制化
発表者（IBMのMary Jo Mueller氏）のスライド https://www.slideshare.net/MaryJoMueller1/accessu-2017-world-tour-of-accessibility-policy-a...
W3C/WAIの ”Web Accessibility Laws & Policies” https://www.w3.org/WAI/policies/
海外諸国の主な傾向 先進国を中心にWebアクセシビリティの確保を義務化  政府などの公的機関には「WCAG 2.0」レベル AA アメリカでは企業サイトに対する提訴件数が急増中 中国やヨーロッパで「WCAG 2.1」を採用する動きあり
WCAG 2.1 と Silver
WCAG 2.1 Proposed Recommendation https://www.w3.org/TR/2018/PR-WCAG21-20180424/
そもそも「WCAG」とは？ ウェブコンテンツのアクセシビリティを確保するため のガイドライン  “Web Content Accessibility Guidelines” の略（頭文字）  ウェブコンテンツ＝ウェブサイト、ウェブアプリ、...
誰のためのガイドライン？ 様々な障害のあるユーザーを想定  “全盲又はロービジョン、ろう又は難聴、学習障害、認知障 害、運動制限、発話困難、光過敏性発作及びこれらの組合 せ等を含んだ、様々な障害のある人” ～ WCAG 2.0 日本語訳 「...
「WCAG 2.0」の達成基準 ＝ 3段階のレベル Webコンテンツがどうなっているべきかを定義  レベル A：25の達成基準  最低限満たすべきレベルの品質基準  レベル AA：13の達成基準  ユーザビリティとの共通点も多く、公的...
「WCAG 2.0」達成基準の例（1） https://waic.jp/docs/WCAG20/Overview.html#text-equiv-all
画像には代替テキストを提供する <img src=“title.png” alt=“わた したちの未来をつくるアクセ シビリティ 2018年5月17日 （木）神戸ポートアイランド ジーベックホール”>
「WCAG 2.0」達成基準の例（2） https://waic.jp/docs/WCAG20/Overview.html#media-equiv-captions
動画にはキャプション（字幕）を提供する
「WCAG 2.0」は世界共通のガイドライン 2008年 W3C勧告に ⇨ 2012年 ISO/IEC規格に ⇨ 2016年 JIS規格に ＝ ＝
WCAG 2.1 Status and Next Steps https://www.w3.org/2018/Talks/0322_WCAG21_AWK-JOC-MC/
WCAG 2.1 ＝「WCAG 2.0」＋α “WCAG 2.1” に準拠しているウェブサイトは、 自ずと ”WCAG 2.0” にも準拠していることになる “WCAG 2.0” は「非推奨（deprecated)」にはならない
WCAGへの新たなニーズの顕在化 新しいテクノロジーの 普及による新しいニーズ WCAGが対処できていない ユーザーのニーズ  ロービジョン  認知障害 モバイル ロービジョン 認知障害
新しい達成基準 “1.4.10 Reflow” https://www.w3.org/WAI/WCAG21/Understanding/reflow.html
新しい達成基準 “1.4.11 Non-text Contrast” https://www.w3.org/WAI/WCAG21/Understanding/non-text-contrast.html
新しい達成基準 “1.3.5 Identify Input Purpose” https://a11y-resources.com/developer/adaptable-ui-personalisation
Refinement of Success Criteria  2016年12月時点で60の新しい達成基準の提案  最終的に17の達成基準候補に絞り込み
Current Status of WCAG 2.1  ワーキングドラフトを数回にわたり更新  その間に、約600件のパブリックコメント  2018年4月24日に「W3C勧告案」に昇格
Next Steps on WCAG 2.1  4月：「勧告案」に昇格  6月：「W3C勧告」に (?)
Beyond WCAG 2.1 「WCAG 2.1」と「Silver」の間にもう1つバージョン を挟む可能性もある（「WCAG 2.2」もありうる？）
WCAG 2.1：ヨーロッパの場合  EU加盟国は「WCAG 2.0」を採用  公的機関の調達規格として 「EN 301 549」を策定  2018年中に各国で法整備 （WAD）  欧州アクセシビリティ法の制定 （EAA）
WCAG 2.1：ヨーロッパの場合 調達規格「EN 301 549」で 「WCAG 2.1」を採用予定  W3Cワーキンググループと連携 WADでのモニタリング計画で W3Cの「WCAG EM」や 「ACT」にも注目
WCAG 2.1：中国の場合 WCAGをベースにした独自の ガイドラインが存在していた 現在、浙江大学を中心にして 障害者団体のサポートも受け ながら改定に着手
WCAG 2.1：中国の場合 W3C/WAI と協調しながら、 「WCAG 2.1」の策定にも協力  Baidu、Beyondsoft  浙江大学、香港浸会大学 6月には国内規格の改訂案を 障害者団体に提示  WCAG 2.0 or ...
WCAG 2.1：その他の国々 アメリカは「WCAG 2.0」 欧州は「WCAG 2.1」 中国も「WCAG 2.1」？ インドは「WCAG 2.0」
「WCAG 2.1」は「JIS X 8341-3」になる？
Silver W3Cの次期アクセシビリティガイドライン  WCAG 2.x の後継バージョン
Accessibility Guidelines = AG = Silver
WCAG 2.1 (2.2 ?) と Silver が同時進行中 WCAG 2.0 WCAG 2.1 WCAG 2.2 2018 2020 (?) WCAG ATAG UAAG OR
Silver Plan 早ければ、2018年中に 最初のワーキングドラフト公開
Problem Areas from Research Findings 関係者からのヒアリング等により、 WCAG 2.0の問題点を確認
Amadeus and American Airlines: From User Tests to an Inclusive Website
From User Tests to an Inclusive Website
AmadeusとAmerican Airlinesでの取組事例紹介 各社2名ずつによる共同発表セッション
Amadeus社 http://www.amadeus.com/ 世界のソフトウェア企業 TOP 15  旅行業界に特化した予約システム 取扱予約件数：5億9,500万件以上（2016） 取扱乗客数：13億人（2016）
73の航空会社がAmadeus製品（システム）を利用 航空会社Webサイトの プラットフォームを提供 ブランドにあわせてUIを カスタマイズ可能 アクセシビリティに注力
Towards WCAG AA compliance
User tests pre-session interview
Pre-session interview – Cognitive impairments
Color contrast
ユーザビリティテストで発見した問題点を改善 Unclear font  アルファベットの小文字 "I" と数字の "1" Wording is important  ボタンのラベルを “Confirm selection” から “Co...
Time-out pop-up
WAI-ARIA 理論と現実の間にある ギャップ  ユーザーがまだWAI-ARIAに 馴染みがない 矢印キーの標準的な操作を 変更してはいけない WAI-ARIAは必要な時だけ に限定して使用する
Example of usage: slider 全盲モニターのコメント 「自分がスライダーを使えるなんて 考えたこともなかった。これは素晴らしい！」
Accessibility at American Airlines
Buying tickets made easier for everyone
参考
4/24 都内で開催した4社合同での参加報告セミナー  各社のスライドを含む詳細なレポート https://www.mitsue.co.jp/knowledge/blog/a11y/201805/01_1220.html https://ww...
Webアクセシビリティ 海外の最新動向 2018 アクセシビリティの祭典 2018 セッション 6 植木 真（株式会社インフォアクシア）
Webアクセシビリティ　海外の最新動向 2018
Upcoming SlideShare
Loading in …5
×

Webアクセシビリティ　海外の最新動向 2018

982 views

Published on

2018年5月17日（木）に神戸で開催された「アクセシビリティの祭典 2018」のセッション 6「Webアクセシビリティ　海外の最新動向 2018」で使用したスライド。

もし閲覧に支障がある場合は、info@infoaxia.co.jpまでご連絡ください。

Published in: Internet
no profile picture user

  • Login to see the comments

Webアクセシビリティ　海外の最新動向 2018

  1. 1. Webアクセシビリティ 海外の最新動向 2018 アクセシビリティの祭典 2018 セッション 6 植木 真（株式会社インフォアクシア）
  2. 2. 植木 真（うえき まこと）  株式会社インフォアクシア 代表取締役  Webアクセシビリティコンサルタント • サイト診断、ガイドライン＆チェックリスト作成、教育・研修 など  国内外のアクセシビリティガイドライン策定に従事 • W3C WCAG ワーキンググループ • JIS X 8341-3 原案作成ワーキンググループ  ウェブアクセシビリティ基盤委員会（WAIC）委員長 • JIS X 8341-3:2016 改正原案作成委員会 委員長を兼任
  3. 3. 今日は “Global Accessibility Awareness Day”
  4. 4. “Global Accessibility Awareness Day” 公式サイト http://globalaccessibilityawarenessday.org/
  5. 5. GAAD公式サイトでは神戸の祭典も紹介 http://globalaccessibilityawarenessday.org/events.php
  6. 6. CSUN 2018 http://www.csun.edu/cod/conference/2018/sessions/index.php/
  7. 7. アメリカ西海岸のリゾート都市「サンディエゴ」
  8. 8. 今年で33回目、世界最大級のカンファレンス  3/13(水)～15(金)の3日間  442のセッション（発表）  115の展示ブース  約4,500名が参加
  9. 9. 夜には “アクセシブル” カラオケ大会なども開催 手話通訳付きのカラオケ大会 TEAM JAPANは盆踊りソング
  10. 10. 歌手のスティービー・ワンダー氏 https://www.jpost.com/Jpost-Tech/Tech-Talk-Reaching-higher-ground-with-RightHear-app-547265
  11. 11. このセッションでシェアするのは… 「インクルーシブデザイン」 海外諸国でのWebアクセシビリティの法制化 WCAG 2.1とSilver セッション紹介  Amadeus and American Airlines: From User Tests to an Inclusive Website
  12. 12. 「インクルーシブデザイン」
  13. 13. From User Tests to an Inclusive Website
  14. 14. 研究社 新英和中辞典での「inclusive」の意味 https://ejje.weblio.jp/content/inclusive
  15. 15. インクルーシブデザインとは？ 高齢者や障害のある人など、特別なニーズを抱えた消費者 をデザインプロセスの上流工程へと積極的に巻き込んでい く手法 インクルーシブデザインユニット by 京都大学情報学研究科 http://www.museum.kyoto-u.ac.jp/inclusive/
  16. 16. Inclusive Design at Microsoft https://www.microsoft.com/en-us/design/inclusive
  17. 17. Microsoftでは、ゲームでも ”Inclusive Design” Xboxのセッションでも言及
  18. 18. マイクロ ソフトが 考える Inclusive Design Inclusive design is for those who want to make great products for the greatest number of people.
  19. 19. Definition of inclusive design http://www.inclusivedesigntoolkit.com/whatis/whatis.html
  20. 20. Inclusive Design Principles（英語：原文） http://inclusivedesignprinciples.org/
  21. 21. インクルーシブデザインの原則（日本語訳） 永続的な障害がある利用者（＝障害者）  一時的または状況的な困難に直面している利用者  能力が変化してゆく利用者（＝シニア、高齢者） つまり、私たちみんな - “all of us really”
  22. 22. イギリスのBarclays https://www.barclayscorporate.com/insight-and-research/managing-your-business/making-your-business- accessible/inclusive-design.html
  23. 23. ガイドラインに準拠する、 それだけでいいの？
  24. 24. “Accessible” ではなく “Inclusive” を使う理由 法律で義務化されてきたことによる固定観念？  “Accessible” = ガイドラインの基準を満たす  “Inclusive” ＝ 広範囲のユーザーのニーズを満たす Accessible ( ≒ WCAG) ≦ Inclusive
  25. 25. 海外諸国での Webアクセシビリティの法制化
  26. 26. 発表者（IBMのMary Jo Mueller氏）のスライド https://www.slideshare.net/MaryJoMueller1/accessu-2017-world-tour-of-accessibility-policy-and-standards
  27. 27. W3C/WAIの ”Web Accessibility Laws & Policies” https://www.w3.org/WAI/policies/
  28. 28. 海外諸国の主な傾向 先進国を中心にWebアクセシビリティの確保を義務化  政府などの公的機関には「WCAG 2.0」レベル AA アメリカでは企業サイトに対する提訴件数が急増中 中国やヨーロッパで「WCAG 2.1」を採用する動きあり
  29. 29. WCAG 2.1 と Silver
  30. 30. WCAG 2.1 Proposed Recommendation https://www.w3.org/TR/2018/PR-WCAG21-20180424/
  31. 31. そもそも「WCAG」とは？ ウェブコンテンツのアクセシビリティを確保するため のガイドライン  “Web Content Accessibility Guidelines” の略（頭文字）  ウェブコンテンツ＝ウェブサイト、ウェブアプリ、ウェブ サービスなど  現在のバージョンは「2.0」
  32. 32. 誰のためのガイドライン？ 様々な障害のあるユーザーを想定  “全盲又はロービジョン、ろう又は難聴、学習障害、認知障 害、運動制限、発話困難、光過敏性発作及びこれらの組合 せ等を含んだ、様々な障害のある人” ～ WCAG 2.0 日本語訳 「概要」より
  33. 33. 「WCAG 2.0」の達成基準 ＝ 3段階のレベル Webコンテンツがどうなっているべきかを定義  レベル A：25の達成基準  最低限満たすべきレベルの品質基準  レベル AA：13の達成基準  ユーザビリティとの共通点も多く、公的機関に求められるレベル  レベル AAA：23の達成基準  対応可能な場合に基準を満たすことが推奨されるレベル
  34. 34. 「WCAG 2.0」達成基準の例（1） https://waic.jp/docs/WCAG20/Overview.html#text-equiv-all
  35. 35. 画像には代替テキストを提供する <img src=“title.png” alt=“わた したちの未来をつくるアクセ シビリティ 2018年5月17日 （木）神戸ポートアイランド ジーベックホール”>
  36. 36. 「WCAG 2.0」達成基準の例（2） https://waic.jp/docs/WCAG20/Overview.html#media-equiv-captions
  37. 37. 動画にはキャプション（字幕）を提供する
  38. 38. 「WCAG 2.0」は世界共通のガイドライン 2008年 W3C勧告に ⇨ 2012年 ISO/IEC規格に ⇨ 2016年 JIS規格に ＝ ＝
  39. 39. WCAG 2.1 Status and Next Steps https://www.w3.org/2018/Talks/0322_WCAG21_AWK-JOC-MC/
  40. 40. WCAG 2.1 ＝「WCAG 2.0」＋α “WCAG 2.1” に準拠しているウェブサイトは、 自ずと ”WCAG 2.0” にも準拠していることになる “WCAG 2.0” は「非推奨（deprecated)」にはならない
  41. 41. WCAGへの新たなニーズの顕在化 新しいテクノロジーの 普及による新しいニーズ WCAGが対処できていない ユーザーのニーズ  ロービジョン  認知障害 モバイル ロービジョン 認知障害
  42. 42. 新しい達成基準 “1.4.10 Reflow” https://www.w3.org/WAI/WCAG21/Understanding/reflow.html
  43. 43. 新しい達成基準 “1.4.11 Non-text Contrast” https://www.w3.org/WAI/WCAG21/Understanding/non-text-contrast.html
  44. 44. 新しい達成基準 “1.3.5 Identify Input Purpose” https://a11y-resources.com/developer/adaptable-ui-personalisation
  45. 45. Refinement of Success Criteria  2016年12月時点で60の新しい達成基準の提案  最終的に17の達成基準候補に絞り込み
  46. 46. Current Status of WCAG 2.1  ワーキングドラフトを数回にわたり更新  その間に、約600件のパブリックコメント  2018年4月24日に「W3C勧告案」に昇格
  47. 47. Next Steps on WCAG 2.1  4月：「勧告案」に昇格  6月：「W3C勧告」に (?)
  48. 48. Beyond WCAG 2.1 「WCAG 2.1」と「Silver」の間にもう1つバージョン を挟む可能性もある（「WCAG 2.2」もありうる？）
  49. 49. WCAG 2.1：ヨーロッパの場合  EU加盟国は「WCAG 2.0」を採用  公的機関の調達規格として 「EN 301 549」を策定  2018年中に各国で法整備 （WAD）  欧州アクセシビリティ法の制定 （EAA）
  50. 50. WCAG 2.1：ヨーロッパの場合 調達規格「EN 301 549」で 「WCAG 2.1」を採用予定  W3Cワーキンググループと連携 WADでのモニタリング計画で W3Cの「WCAG EM」や 「ACT」にも注目
  51. 51. WCAG 2.1：中国の場合 WCAGをベースにした独自の ガイドラインが存在していた 現在、浙江大学を中心にして 障害者団体のサポートも受け ながら改定に着手
  52. 52. WCAG 2.1：中国の場合 W3C/WAI と協調しながら、 「WCAG 2.1」の策定にも協力  Baidu、Beyondsoft  浙江大学、香港浸会大学 6月には国内規格の改訂案を 障害者団体に提示  WCAG 2.0 or 2.1？
  53. 53. WCAG 2.1：その他の国々 アメリカは「WCAG 2.0」 欧州は「WCAG 2.1」 中国も「WCAG 2.1」？ インドは「WCAG 2.0」
  54. 54. 「WCAG 2.1」は「JIS X 8341-3」になる？
  55. 55. Silver W3Cの次期アクセシビリティガイドライン  WCAG 2.x の後継バージョン
  56. 56. Accessibility Guidelines = AG = Silver
  57. 57. WCAG 2.1 (2.2 ?) と Silver が同時進行中 WCAG 2.0 WCAG 2.1 WCAG 2.2 2018 2020 (?) WCAG ATAG UAAG OR
  58. 58. Silver Plan 早ければ、2018年中に 最初のワーキングドラフト公開
  59. 59. Problem Areas from Research Findings 関係者からのヒアリング等により、 WCAG 2.0の問題点を確認
  60. 60. Amadeus and American Airlines: From User Tests to an Inclusive Website
  61. 61. From User Tests to an Inclusive Website
  62. 62. AmadeusとAmerican Airlinesでの取組事例紹介 各社2名ずつによる共同発表セッション
  63. 63. Amadeus社 http://www.amadeus.com/ 世界のソフトウェア企業 TOP 15  旅行業界に特化した予約システム 取扱予約件数：5億9,500万件以上（2016） 取扱乗客数：13億人（2016）
  64. 64. 73の航空会社がAmadeus製品（システム）を利用 航空会社Webサイトの プラットフォームを提供 ブランドにあわせてUIを カスタマイズ可能 アクセシビリティに注力
  65. 65. Towards WCAG AA compliance
  66. 66. User tests pre-session interview
  67. 67. Pre-session interview – Cognitive impairments
  68. 68. Color contrast
  69. 69. ユーザビリティテストで発見した問題点を改善 Unclear font  アルファベットの小文字 "I" と数字の "1" Wording is important  ボタンのラベルを “Confirm selection” から “Confirm selection and close“ へ Modals focus handling  モーダルの開閉時にフォーカス位置を制御
  70. 70. Time-out pop-up
  71. 71. WAI-ARIA 理論と現実の間にある ギャップ  ユーザーがまだWAI-ARIAに 馴染みがない 矢印キーの標準的な操作を 変更してはいけない WAI-ARIAは必要な時だけ に限定して使用する
  72. 72. Example of usage: slider 全盲モニターのコメント 「自分がスライダーを使えるなんて 考えたこともなかった。これは素晴らしい！」
  73. 73. Accessibility at American Airlines
  74. 74. Buying tickets made easier for everyone
  75. 75. 参考
  76. 76. 4/24 都内で開催した4社合同での参加報告セミナー  各社のスライドを含む詳細なレポート https://www.mitsue.co.jp/knowledge/blog/a11y/201805/01_1220.html https://www.mitsue.co.jp/knowledge/blog/a11y/201805/10_1724.html
  77. 77. Webアクセシビリティ 海外の最新動向 2018 アクセシビリティの祭典 2018 セッション 6 植木 真（株式会社インフォアクシア）

×