ウェブディレクターのためのWeb A11Y 勉強会

#01 (2017-06-20)

自己紹介

@caztcha

ウェブユーザビリティ / アクセシビリティ / 情報アーキテクチャ (IA) HCD-Net 認定 人間中心設計専門家

ウェブアクセシビリティ基盤委員会 (WAIC) 翻訳WG http://website-usability.info

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

この勉強会の目標

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

目指したいこと

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

みなさんにとってのメリット

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

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

[Access] + […ability] アクセスできること。

(…と言われてもピンと来ない？)

アクセシビリティの定義 (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.” 特定のユーザーが、特定の利用状況の中で、特定のゴールを達成するために、ある製品を (有効性、効率性、満足度を伴って) 利用できる度合い。

多様な利用文脈 (状況や身体的特性) を持つユーザーが、ウェブコンテンツを利用でき、自らのゴールを達成できること。

多様な利用文脈 (とその解決法) の例 �加齢や疲労で小さい字が読みにくい (適切な文字サイズと配色コントラスト)

�障害や怪我でマウスが使えない (キーボード操作の担保)

�色の識別が難しい (色だけに依存しない情報提示) �目が見えない (スクリーンリーダーでの読み上げ)

�見えにくい (画面の拡大表示)

�耳が聞こえない、聞こえにくい (音声コンテンツのテキストによる情報保障) �モバイルで利用している (認知負荷が少ない情報提示)

�などなど…

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

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

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

出典 : 平成28年版　情報通信白書 (総務省) http://www.soumu.go.jp/johotsusintokei/whitepaper/ja/h28/html/nc252110.html

情報通信端末の世帯保有率の推移

出典 : 平成28年版　情報通信白書 (総務省) http://www.soumu.go.jp/johotsusintokei/whitepaper/ja/h28/html/nc252110.html

属性別インターネット利用率及び利用頻度

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

ウェブの特性

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

アクセシビリティの担保は、ウェブコンテンツを作るうえでの基本品質。

満足

不満足

��不充足

当たり前品質 (基本品質)

魅力品質

一元的品質 (性能品質)

気に入る

仕方ない

気に入らない

(狩野モデル)

当たり前

ウェブアクセシビリティは、あらゆるユーザーがウェブを利用できる「当たり前」品質

支援技術を知ろう

支援技術 (Assistive Technology) とは、一般的なデバイスやブラウザではウェブコンテンツを利用できないユーザー (障害者) のための、支援ツール (ソフトウェアおよびハードウェア) のこと。

支援技術とは？

● スクリーンリーダー ● 点字ディスプレイ ● マウス操作代替装置 ● フォーカス実行スイッチ

● 視線入力装置 ● 音声入力 ● 画面の拡大表示 (拡大鏡) ● 画面の色彩反転表示

点字ディスプレイの例

マウス操作代替装置の例

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

視線入力装置の例

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

視覚障害者（弱視）のウェブページ利用方法 (8 mins) https://www.youtube.com/watch?v=p80PJXMPIDY

視覚障害者のウェブ利用の様子 (動画)

次回予告

アクセシビリティ検証ツールいろいろ WAVE, NoCoffee Vision Simulator, Colour Contrast Analyser, aXe, Chrome 開発者ツール

スクリーンリーダーを体験しよう! NVDA (for Windows), VoiceOver (for iOS)

To be continued…