1.
Webアクセシビリティ
海外の最新動向 2018
アクセシビリティの祭典 2018 セッション 6
植木 真（株式会社インフォアクシア）

2.
植木 真（うえき まこと）
 株式会社インフォアクシア 代表取締役
 Webアクセシビリティコンサルタント
• サイト診断、ガイドライン＆チェックリスト作成、教育・研修 など
 国内外のアクセシビリティガイドライン策定に従事
• W3C WCAG ワーキンググループ
• JIS X 8341-3 原案作成ワーキンググループ
 ウェブアクセシビリティ基盤委員会（WAIC）委員長
• JIS X 8341-3:2016 改正原案作成委員会 委員長を兼任

3.
今日は “Global Accessibility Awareness Day”

4.
“Global Accessibility Awareness Day” 公式サイト
http://globalaccessibilityawarenessday.org/

5.
GAAD公式サイトでは神戸の祭典も紹介
http://globalaccessibilityawarenessday.org/events.php

6.
CSUN 2018
http://www.csun.edu/cod/conference/2018/sessions/index.php/

7.
アメリカ西海岸のリゾート都市「サンディエゴ」

8.
今年で33回目、世界最大級のカンファレンス
 3/13(水)～15(金)の3日間
 442のセッション（発表）
 115の展示ブース
 約4,500名が参加

9.
夜には “アクセシブル” カラオケ大会なども開催
手話通訳付きのカラオケ大会 TEAM JAPANは盆踊りソング

10.
歌手のスティービー・ワンダー氏
https://www.jpost.com/Jpost-Tech/Tech-Talk-Reaching-higher-ground-with-RightHear-app-547265

11.
このセッションでシェアするのは…
「インクルーシブデザイン」
海外諸国でのWebアクセシビリティの法制化
WCAG 2.1とSilver
セッション紹介
 Amadeus and American Airlines:
From User Tests to an Inclusive Website

12.
「インクルーシブデザイン」

13.
From User Tests to an Inclusive Website

14.
研究社 新英和中辞典での「inclusive」の意味
https://ejje.weblio.jp/content/inclusive

15.
インクルーシブデザインとは？
高齢者や障害のある人など、特別なニーズを抱えた消費者
をデザインプロセスの上流工程へと積極的に巻き込んでい
く手法
インクルーシブデザインユニット by 京都大学情報学研究科
http://www.museum.kyoto-u.ac.jp/inclusive/

16.
Inclusive Design at Microsoft
https://www.microsoft.com/en-us/design/inclusive

17.
Microsoftでは、ゲームでも ”Inclusive Design”
Xboxのセッションでも言及

18.
マイクロ
ソフトが
考える
Inclusive
Design
Inclusive design is for those
who want to make great products
for the greatest number of people.

19.
Definition of inclusive design
http://www.inclusivedesigntoolkit.com/whatis/whatis.html

20.
Inclusive Design Principles（英語：原文）
http://inclusivedesignprinciples.org/

21.
インクルーシブデザインの原則（日本語訳） 永続的な障害がある利用者（＝障害者）
 一時的または状況的な困難に直面している利用者
 能力が変化してゆく利用者（＝シニア、高齢者）
つまり、私たちみんな - “all of us really”

22.
イギリスのBarclays
https://www.barclayscorporate.com/insight-and-research/managing-your-business/making-your-business-
accessible/inclusive-design.html

23.
ガイドラインに準拠する、
それだけでいいの？

24.
“Accessible” ではなく “Inclusive” を使う理由
法律で義務化されてきたことによる固定観念？
 “Accessible” = ガイドラインの基準を満たす
 “Inclusive” ＝ 広範囲のユーザーのニーズを満たす
Accessible ( ≒ WCAG) ≦ Inclusive

25.
海外諸国での
Webアクセシビリティの法制化

26.
発表者（IBMのMary Jo Mueller氏）のスライド
https://www.slideshare.net/MaryJoMueller1/accessu-2017-world-tour-of-accessibility-policy-and-standards

27.
W3C/WAIの ”Web Accessibility Laws & Policies”
https://www.w3.org/WAI/policies/

28.
海外諸国の主な傾向
先進国を中心にWebアクセシビリティの確保を義務化
 政府などの公的機関には「WCAG 2.0」レベル AA
アメリカでは企業サイトに対する提訴件数が急増中
中国やヨーロッパで「WCAG 2.1」を採用する動きあり

29.
WCAG 2.1 と Silver

30.
WCAG 2.1 Proposed Recommendation
https://www.w3.org/TR/2018/PR-WCAG21-20180424/

31.
そもそも「WCAG」とは？
ウェブコンテンツのアクセシビリティを確保するため
のガイドライン
 “Web Content Accessibility Guidelines” の略（頭文字）
 ウェブコンテンツ＝ウェブサイト、ウェブアプリ、ウェブ
サービスなど
 現在のバージョンは「2.0」

32.
誰のためのガイドライン？
様々な障害のあるユーザーを想定
 “全盲又はロービジョン、ろう又は難聴、学習障害、認知障
害、運動制限、発話困難、光過敏性発作及びこれらの組合
せ等を含んだ、様々な障害のある人”
～ WCAG 2.0 日本語訳 「概要」より

33.
「WCAG 2.0」の達成基準 ＝ 3段階のレベル
Webコンテンツがどうなっているべきかを定義
 レベル A：25の達成基準
 最低限満たすべきレベルの品質基準
 レベル AA：13の達成基準
 ユーザビリティとの共通点も多く、公的機関に求められるレベル
 レベル AAA：23の達成基準
 対応可能な場合に基準を満たすことが推奨されるレベル

34.
「WCAG 2.0」達成基準の例（1）
https://waic.jp/docs/WCAG20/Overview.html#text-equiv-all

35.
画像には代替テキストを提供する
<img src=“title.png” alt=“わた
したちの未来をつくるアクセ
シビリティ 2018年5月17日
（木）神戸ポートアイランド
ジーベックホール”>

36.
「WCAG 2.0」達成基準の例（2）
https://waic.jp/docs/WCAG20/Overview.html#media-equiv-captions

37.
動画にはキャプション（字幕）を提供する

38.
「WCAG 2.0」は世界共通のガイドライン
2008年 W3C勧告に ⇨ 2012年 ISO/IEC規格に ⇨ 2016年 JIS規格に
＝ ＝

39.
WCAG 2.1 Status and Next Steps
https://www.w3.org/2018/Talks/0322_WCAG21_AWK-JOC-MC/

40.
WCAG 2.1 ＝「WCAG 2.0」＋α
“WCAG 2.1” に準拠しているウェブサイトは、
自ずと ”WCAG 2.0” にも準拠していることになる
“WCAG 2.0” は「非推奨（deprecated)」にはならない

41.
WCAGへの新たなニーズの顕在化
新しいテクノロジーの
普及による新しいニーズ
WCAGが対処できていない
ユーザーのニーズ
 ロービジョン
 認知障害
モバイル
ロービジョン
認知障害

42.
新しい達成基準 “1.4.10 Reflow”
https://www.w3.org/WAI/WCAG21/Understanding/reflow.html

43.
新しい達成基準 “1.4.11 Non-text Contrast”
https://www.w3.org/WAI/WCAG21/Understanding/non-text-contrast.html

44.
新しい達成基準 “1.3.5 Identify Input Purpose”
https://a11y-resources.com/developer/adaptable-ui-personalisation

45.
Refinement of Success Criteria
 2016年12月時点で60の新しい達成基準の提案
 最終的に17の達成基準候補に絞り込み

46.
Current Status of WCAG 2.1
 ワーキングドラフトを数回にわたり更新
 その間に、約600件のパブリックコメント
 2018年4月24日に「W3C勧告案」に昇格

47.
Next Steps on WCAG 2.1
 4月：「勧告案」に昇格
 6月：「W3C勧告」に (?)

48.
Beyond WCAG 2.1
「WCAG 2.1」と「Silver」の間にもう1つバージョン
を挟む可能性もある（「WCAG 2.2」もありうる？）

49.
WCAG 2.1：ヨーロッパの場合
 EU加盟国は「WCAG 2.0」を採用
 公的機関の調達規格として
「EN 301 549」を策定
 2018年中に各国で法整備
（WAD）
 欧州アクセシビリティ法の制定
（EAA）

50.
WCAG 2.1：ヨーロッパの場合
調達規格「EN 301 549」で
「WCAG 2.1」を採用予定
 W3Cワーキンググループと連携
WADでのモニタリング計画で
W3Cの「WCAG EM」や
「ACT」にも注目

51.
WCAG 2.1：中国の場合
WCAGをベースにした独自の
ガイドラインが存在していた
現在、浙江大学を中心にして
障害者団体のサポートも受け
ながら改定に着手

52.
WCAG 2.1：中国の場合
W3C/WAI と協調しながら、
「WCAG 2.1」の策定にも協力
 Baidu、Beyondsoft
 浙江大学、香港浸会大学
6月には国内規格の改訂案を
障害者団体に提示
 WCAG 2.0 or 2.1？

53.
WCAG 2.1：その他の国々
アメリカは「WCAG 2.0」
欧州は「WCAG 2.1」
中国も「WCAG 2.1」？
インドは「WCAG 2.0」

54.
「WCAG 2.1」は「JIS X 8341-3」になる？

55.
Silver
W3Cの次期アクセシビリティガイドライン
 WCAG 2.x の後継バージョン

56.
Accessibility Guidelines = AG = Silver

57.
WCAG 2.1 (2.2 ?) と Silver が同時進行中
WCAG 2.0 WCAG 2.1 WCAG 2.2
2018 2020 (?)
WCAG
ATAG
UAAG
OR

58.
Silver Plan 早ければ、2018年中に
最初のワーキングドラフト公開

59.
Problem Areas from Research Findings
関係者からのヒアリング等により、
WCAG 2.0の問題点を確認

60.
Amadeus and American Airlines:
From User Tests to an Inclusive Website

61.
From User Tests to an Inclusive Website

62.
AmadeusとAmerican Airlinesでの取組事例紹介
各社2名ずつによる共同発表セッション

63.
Amadeus社 http://www.amadeus.com/
世界のソフトウェア企業 TOP 15
 旅行業界に特化した予約システム
取扱予約件数：5億9,500万件以上（2016）
取扱乗客数：13億人（2016）

64.
73の航空会社がAmadeus製品（システム）を利用
航空会社Webサイトの
プラットフォームを提供
ブランドにあわせてUIを
カスタマイズ可能
アクセシビリティに注力

65.
Towards WCAG AA compliance

66.
User tests pre-session interview

67.
Pre-session interview – Cognitive impairments

68.
Color contrast

69.
ユーザビリティテストで発見した問題点を改善
Unclear font
 アルファベットの小文字 "I" と数字の "1"
Wording is important
 ボタンのラベルを “Confirm selection” から
“Confirm selection and close“ へ
Modals focus handling
 モーダルの開閉時にフォーカス位置を制御

70.
Time-out pop-up

71.
WAI-ARIA
理論と現実の間にある
ギャップ
 ユーザーがまだWAI-ARIAに
馴染みがない
矢印キーの標準的な操作を
変更してはいけない
WAI-ARIAは必要な時だけ
に限定して使用する

72.
Example of usage: slider
全盲モニターのコメント
「自分がスライダーを使えるなんて
考えたこともなかった。これは素晴らしい！」

73.
Accessibility at American Airlines

74.
Buying tickets made easier for everyone

75.
参考

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.
Webアクセシビリティ
海外の最新動向 2018
アクセシビリティの祭典 2018 セッション 6
植木 真（株式会社インフォアクシア）