ウェブ制作会社のディレクターさんを対象にした、アクセシビリティ勉強会です。(全10回コースの第1回目)

1. ウェブディレクターのための
Web A11Y 勉強会
#01 (2017-06-20)

2. 自己紹介
@caztcha
ウェブユーザビリティ / アクセシビリティ / 情報アーキテクチャ (IA)
HCD-Net 認定 人間中心設計専門家
ウェブアクセシビリティ基盤委員会 (WAIC) 翻訳WG
http://website-usability.info

3. 日々のウェブコンテンツ制作実務にお
いてアクセシビリティの担保を継続的
に回せること。そのための基礎作り。
この勉強会の目標

4. サイトオーナー (発注者) が意識せず
とも自ずとアクセシビリティが担保さ
れている状態。
目指したいこと

5. アクセシビリティを理解し実践できる
ことをみなさんご自身の (ひいては、
デザインファームとしての)「強み」に。
みなさんにとってのメリット

6. みんなで楽しく！ (^^)

7. ウェブアクセシビリティ
とは？

8. [Access] + […ability]
アクセスできること。
(…と言われてもピンと来ない？)

9. アクセシビリティの定義 (ISO 9241-20)
“the usability of a product, service,
environment or facility by people with
the widest range of capabilities.”
様々な能力を持つ幅広い層の人々に対する、製品、サービス、環境または施設のユーザビリティ。
参考 : ユーザビリティの定義 (ISO 9241-11)
“Extent to which a product can be used by specified users to achieve
specified goals with effectiveness, efficiency and satisfaction in a specified
context of use.”
特定のユーザーが、特定の利用状況の中で、特定のゴールを達成するために、ある製品を (有効性、効率性、
満足度を伴って) 利用できる度合い。

10. 多様な利用文脈 (状況や身体的特性) を持つユーザー
が、ウェブコンテンツを利用でき、自らのゴールを
達成できること。
多様な利用文脈 (とその解決法) の例
加齢や疲労で小さい字が読みにくい (適切な文字サイズと配色コントラスト)
障害や怪我でマウスが使えない (キーボード操作の担保)
色の識別が難しい (色だけに依存しない情報提示)
目が見えない (スクリーンリーダーでの読み上げ)
見えにくい (画面の拡大表示)
耳が聞こえない、聞こえにくい (音声コンテンツのテキストによる情報保障)
モバイルで利用している (認知負荷が少ない情報提示)
などなど…
ウェブアクセシビリティとは？

11. ウェブアクセシビリティは
なぜ必要なの？

12. みんなが使う、ウェブだから。

13. 出典 : 平成28年版 情報通信白書 (総務省) http://www.soumu.go.jp/johotsusintokei/whitepaper/ja/h28/html/nc252110.html
情報通信端末の世帯保有率の推移

14. 出典 : 平成28年版 情報通信白書 (総務省) http://www.soumu.go.jp/johotsusintokei/whitepaper/ja/h28/html/nc252110.html
属性別インターネット利用率及び利用頻度

15. 他のメディアと比較して考えると、様々なモダリティに変換しての入出
力が可能で、ユーザーの多様な利用文脈に対応しやすい点がユニーク。
ウェブの特性

16. The power of the Web is in its
universality.
Access by everyone regardless of
disability is an essential aspect.
ウェブが優れているところは、その広い汎用性である。
障害があるか否かに関わらず、誰でもアクセスできるということは、ウェブにとっ
て不可欠な特徴なのである。
Tim Berners-Lee, W3C Director and inventor of the World Wide Web

17. アクセシビリティの担保は、ウェブコンテンツを作るうえでの基本品質。
満足
不満足
不充足
当たり前品質 (基本品質)
魅力品質
一元的品質 (性能品質)
気に入る
仕方ない
気に入らない
(狩野モデル)
当たり前
ウェブアクセシビリティは、
あらゆるユーザーがウェブを
利用できる「当たり前」品質

18. 支援技術を知ろう

19. 支援技術 (Assistive Technology) とは、一般的なデバイスやブラウザではウェ
ブコンテンツを利用できないユーザー (障害者) のための、支援ツール (ソフト
ウェアおよびハードウェア) のこと。
支援技術とは？
● スクリーンリーダー
● 点字ディスプレイ
● マウス操作代替装置
● フォーカス実行スイッチ
● 視線入力装置
● 音声入力
● 画面の拡大表示 (拡大鏡)
● 画面の色彩反転表示

20. 点字ディスプレイの例

21. マウス操作代替装置の例

22. フォーカス実行スイッチの例

23. 視線入力装置の例

24. 視覚障害者（全盲）のウェブページ利用方法 (13 mins)
https://www.youtube.com/watch?v=RLIKacI05fE
視覚障害者（弱視）のウェブページ利用方法 (8 mins)
https://www.youtube.com/watch?v=p80PJXMPIDY
視覚障害者のウェブ利用の様子 (動画)

25. 次回予告

26. アクセシビリティ検証ツールいろいろ
WAVE, NoCoffee Vision Simulator, Colour Contrast Analyser,
aXe, Chrome 開発者ツール
スクリーンリーダーを体験しよう!
NVDA (for Windows), VoiceOver (for iOS)

27. To be continued…