こんにちは！
【すきまのWebメモ】のお時間です📝
本年も「きっと誰かの役に立つ、ちょっと専門的な話」を
お届けできるよう精進していく所存です。
どうぞよろしくお願いいたします🙇🏻‍♀️

さて、前回の記事では「ユーザビリティ」について解説しました。
似たような言葉に「アクセシビリティ」というものがありますが、ご存知ですか？

今回はユーザビリティと相関関係にある「アクセシビリティ」について、
解説していこうと思います💁🏻

 

 

【1.】👥「アクセシビリティ」とは？

アクセシビリティ（Accessibility）とは、
年齢や障がいの有無、利用環境にかかわらず、誰もが情報やサービスを「利用できる状態」を指す言葉です。

視覚・聴覚・身体などに制約のある人や、高齢者、キーボード操作のみの利用者なども含め、
あらゆるユーザーがウェブサイトの情報にアクセスでき、操作できるかどうかという観点で評価されます。

この考え方は、障がいのある人・ない人を特別に区別せず共に生活する
“ノーマライゼーション”という理念を背景にしています。

ウェブサイトは情報収集や各種手続きに欠かせないインフラの一つ。
アクセシビリティに配慮されていないウェブサイトの場合、
ユーザーの状況によっては情報を得られなかったり、サービスを利用できなかったりと、
不利益が生じてしまいます。

そのため、
誰もが安心して情報やサービスを利用できる状態を整えることは非常に重要！
また、結果的にSEOの改善につながるケースも多いとされ、
サイトへの集客を促す点でも重要な視点といえます。

 

【2.】🤔「アクセシビリティ」と「ユーザビリティ」はどう違う？

アクセシビリティは
「誰でも（障害の有無・年齢に関わらず）利用できるか」を重視する考え方です。
一方ユーザビリティは
「特定のターゲットユーザーが使いやすく、迷わず目的を達成できるか」を重視します。

つまり、

• アクセシビリティ：「そもそも使えるか？」→ガイドラインを基にした実装・設計
• ユーザビリティ　：「使いやすいか？」→操作体験を基にしたテスト・改善

アクセシビリティが満たされて初めて、ユーザビリティの改善が意味を持ちます。
どちらか一方だけでは不十分であり、相互に補完し合う関係にあります🫱🏻‍🫲🏻

 

【3.】✅ウェブアクセシビリティ４つの原則

WCAG（Web Content Accessibility Guidelines）2.2では、
ウェブアクセシビリティの原則として次の４つが定義されています。

1．知覚可能

情報及びユーザインタフェースコンポーネントは、利用者が知覚できる方法で利用者に提示可能でなければならない。
→ウェブサイトやアプリケーションの文字や画像、ボタンなどが見える・聞こえる状態にすること

2．操作可能

ユーザインタフェースコンポーネント及びナビゲーションは操作可能でなければならない。
→ウェブサイトやアプリケーションのリンクをクリックしたり、フォーム入力などの操作ができる状態にすること

3．理解可能

情報及びユーザインタフェースの操作は理解可能でなければならない。
→ウェブサイトやアプリケーションの言語や用語などの内容が伝わる状態にすること

4．堅牢

コンテンツは、支援技術を含む様々なユーザエージェントが確実に解釈できるように十分に堅牢 (robust) でなければならない。
→どんな環境でも、いつでも、ウェブサイトやアプリケーションが正しく表示・正しく動くように制作すること

出展：WCAG 2.2 日本語訳（WAIC）
https://waic.jp/translations/WCAG22/

 

【4.】💡アクセシビリティを向上させるためのポイント

以下は、WCAGの考え方に基づいた代表的な対応例です。

●テキストによる代替
画像の内容を説明する代替テキスト（alt属性）を書いておく

●色や大きさに頼らず意味を伝えられるようにする
見出しを要素などで表現しておくことで、音声読み上げ時にも意味が伝わる

●すべての機能をキーボードでも操作できるようにする
キーボードで操作できるということは、音声操作でもマウスでも使えるということ

●制限時間内での操作を要求しない
文字を読んだり操作をしたりする時間は人によって違うため、例外を除いてそれぞれに必要な時間を提供する

●コンテンツを探しやすくする
サイトマップやサイト内検索機能の提供

●読みやすく、分かりやすい文章にする
中等教育レベルの分かりやすい文章や、目で読むだけでなく耳で聞く場合においても伝わる表現を心がける

●一貫性のある表現にする
同一機能であれば、同じ見た目・同じ名前にする
検索ボタンが複数ある場合、「検索」「探す」などの複数の表記を使用せず「検索」で統一する

●ステータスメッセージ（通知や状態の変化）が音声読み上げでも伝わるようにする
エラーメッセージや検索を実行したあとの結果（「検索結果10件です」等）など、
読み上げ機能を使用するユーザーに対して他のものより優先して読み上げさせるよう実装する

などなど。

このようにいくつか挙げてみるだけでも、
ユーザビリティを向上させるポイントと共通している部分が多くあることが分かります💡

 

【5.】📝まとめ

ウェブアクセシビリティは、
特定のユーザーに向けた特別な配慮ではなく、
全てのユーザーにとって「使えるウェブ」を実現するための前提条件です。

そして、
アクセシビリティを土台としてユーザビリティを高めていくことで、
誰にとっても使いやすく、成果につながるウェブサイトになりますよ💁🏻