こんにちは！もうすぐ3歳になる娘がパパ嫌々期に突入して、激落ち君のミヤタクです。
さてさて、前回は「タイポグラフィ」について
でしたが、今回は「アクセシビリティ」についてご紹介していきたいと思います！
そもそもアクセシビリティとは？
アクセシビリティとはいかなる利用者でも使いやすく、利用できること。
「何か」に対する「アクセスのしやすさ」「利用しやすさ」「近づきやすさ」のことを「アクセシビリティ(accessibility)」といいます。ビジネス上では、「いかなる利用者でも商品やサービスを利用できること」を意味します。
ビジネス上では、「いかなる利用者でもサービスを利用できること」を意味します。
身近なアクセシビリティの例
われわれが普段使うパソコンやスマートフォンにも、多くの場合「アクセシビリティ設定」が標準装備されています。
例えば、視覚障害者などディスプレイを見ることができない人に向けた「文字や画像の読み上げ機能」、マウスやキーボード操作が難しい人のための「音声認識」など、さまざまな機能があります。
Webアクセシビリティとは？
Webアクセシビリティとは、Webにおけるアクセシビリティのことで、「全ての人がWebで提供される情報を利用できること」を指します。ユーザの障害などの有無や度合い、年齢・利用環境に関わらず、あらゆる人々がWebサイトのサービスを利用できること、またその到達度を意味します。
アクセシビリティとユーザビリティの違いは？
アクセシビリティ似たような言葉で「ユーザビリティ」があります。どちらもユーザにとっての使いやすさを目指すという共通点がありますが、厳密にはユーザビリティとアクセシビリティの以下のような違いがあります。
ユーザビリティ：特定のターゲットユーザーに対しての使いやすさをを目指す。
10〜20代向けサービスなら、10〜20代のユーザー使いやすさを重要視し、中高年にとっての使いやすさは度外視します。
アクセシビリティ：全てのユーザーに対しての使いやすさを目指す。
老若男女、障害を持つ人、年齢に関わらず、誰にとっても使いやすいサービスを目指します。
一見すべてアクセシビリティにすれば良いのでは？と思いますが、高齢者にとって使いやすくても20代にとっては使いにくいケースもあります。
ユーザ層が限定されるサービスか、幅広いユーザが利用するサービスなのか、ケースバイケースで指標を設定すると良いでしょう。
Webアクセシビリティの4つの原則
W3Cが公開するWCAG 2.0ガイドラインは、4つの原則から構成されます。
知覚可能（Perceivable）
ユーザが知覚できる方法でwebページを認識できるということです。
例えば、視覚障害者がスクリーンリーダーを使ってWebページを読み上げることができたり、聴覚障害者が字幕やキャプションで動画や音声を理解できるように対応することです。
操作可能（Operable）
ユーザがWebページ内にあるボタンやリンク等、すべての機能をマウスやキーボードなどを使って操作ができるかということです。
理解可能（Understandable）
ユーザがコンテンツを読み取ることができ、理解する為に必要な情報が利用可能か。また、ユーザーインターフェイスの操作が理解可能であるかということです。
堅牢（Robust）
「支援技術を含む多種多様なユーザーエージェントによって確実に解釈されることができるほど十分に堅牢でなければならない」とされています。
つまり、いかなる環境でも壊れず正確に表示できるコンテンツにしなければならないということです。キーボードアクセシビリティの向上や、様々な端末・OSにおいて互換性のある動き、表示をが必要となります。
Webアクセシビリティに配慮する7つのポイント
視覚への配慮
1 画像は代替でテキスト設定し、読み上げ機能に対応する
視覚障害がある方が音声読み上げ機能を利用することを考慮し、画像には代替テキスト（alt 属性）のテキスト情報を設定します。
音声読み上げ機能は、代替テキストがそのまま読み上げられますので、分かりやすい内容になるよう配慮し、前後の文脈に合うものにしましょう。
2 テキストの色味やフォントを可視性高く
視覚障害者向けにテキストの色味やフォントを、可視性が高くなるような工夫をしましょう。
- 文字色と背景色のコントラストをしっかりつける
- 文字はくっきりと見やすい色やフォントを使用する
聴覚への配慮
3 音声をテキスト表示
聴覚障害者がある方への配慮として、Webコンテンツ上で音声や動画がある箇所は、テキスト（字幕）や図形などの視覚情報で分かるように工夫しましょう。
4 耳以外から認識できる通知
聴覚障害者がある方の利用や、音を出せない環境での利用に向けては、聴覚に頼らない通知方法が必要です。
例えば次のようなものがあります。
- デバイスのライト点灯・点滅
- デバイスの画面点灯・点滅
- バイブレーション（長さや振動パターンを分けるなど）
- テキスト表示
身体・運動機能への配慮
5 視線、声で可能な操作
デバイスの入力機能（マウス、キーボードなど）が使用できない人に向けては、視線や声で入力操作できる機能を検討します。
- 視線コントロール
デバイス上のカメラを用いて、ユーザーが画面のどこを見ているかアイトラッキング（視線計測）という機能を用いて、視線で文字入力や、ポインタやマウスボタンの操作、を可能にします。 - 音声コントロール
ユーザーが発する声でデバイスをコントロールし、テキスト入力をします。
Googleアシスタント、Siri（Apple）、Alexa（Amazon）といった音声アシスタントを利用することで、より複雑な操作も可能となります。
認知への配慮
6 分かりやすくシンプルな画面設計
ユーザーにとっては画面上の装飾（メニュー、ボタン、バナー）などがさらに集中を妨げ、負担になることがありますので、分かりやすくシンプルな設計を心がけ、UIを設計しましょう。
「Safari」のリーダー表示をはじめ、主要Webブラウザには、Webページの表示を簡略化する機能が備わっています。それらを利用することで、デザイン要素が省かれ内容に集中しやすい上、表示速度も速くなることが期待できます。
7 理解しやすいテキスト表現
「内容を理解しやすいテキスト表現」 にすることも大事なポイントです。
次のような考慮することでユーザー理解度を向上します。
- 全体構成が把握できるサイトマップをつける
- 各ページの決まった箇所に常時、メインメニューを配置する
- 各ページの内容がすぐに理解できるタイトルをつける。
- リンクにには下線をつけ、テキストにはリンク先の内容がわかるものにする。
- 一般的ではない用語を避け、分かりやすい言葉を用いる。
まとめ
ユニバーサルデザインの留意点最後となる「アクセシビリティ」についてご紹介しました。
アクセシビリティへの配慮はその分コストもかかりますが、ユニバーサルデザインでは必要不可欠です。
高齢化社会を迎える日本では、アクセシビリティの重要性は今後ますます高まっていきますので、ぜひ、参考にしていただけると幸いです！
それではまた！
