この章では、アクセシビリティと読みやすさを学びます。
アクセシビリティとは、できるだけ多くの人が情報にアクセスしやすい状態を作る考え方です。
Web制作では、見た目の美しさだけでなく、読めること、操作できること、理解できることも大切です。
アクセシビリティとは
アクセシビリティは、障害のある人だけのためのものではありません。
スマホで屋外から見る人、視力が落ちている人、片手で操作している人、急いで情報を探している人にも関係します。
Webページでは、次のような状態を目指します。
- 文字が読みやすい
- 色の差が十分にある
- リンクやボタンがわかる
- フォームが入力しやすい
- キーボードでも操作できる
- 画像の意味が伝わる
- 見出し構造が整理されている
アクセシビリティは、特別な追加作業というより、基本品質の一部として考えます。
コントラスト
文字と背景のコントラストは、読みやすさに直結します。
薄い文字色や淡い背景は、雰囲気としてはきれいに見えることがあります。
しかし、読みにくければ情報は伝わりません。
確認したい項目は次の通りです。
- 本文が背景からはっきり読めるか
- ボタンの文字が読めるか
- リンクが本文と区別できるか
- 注意文やエラー文が見えるか
- 画像の上の文字が読めるか
特に、薄いグレー文字は使いすぎに注意します。
文字サイズ
本文の文字サイズは、小さすぎないようにします。
PCでは読めても、スマホでは読みにくくなることがあります。
確認したい項目は次の通りです。
- 本文が小さすぎないか
- 注釈が読める大きさか
- ボタン文字が読めるか
- フォームラベルが読めるか
- 見出しが大きすぎて読みにくくないか
文字は、見た目のバランスだけでなく、読む人の負担も考えます。
リンクの見分けやすさ
リンクは、クリックできることが伝わる必要があります。
本文中のリンクが本文と同じ見た目だと、見落とされやすくなります。
リンクでは、次のことを確認します。
- 色や下線でリンクだとわかるか
- ホバーやフォーカスの状態があるか
- リンク文言だけで行き先がわかるか
- タップしやすい大きさか
- 近くのリンクと離れているか
「こちら」だけのリンク文言は、行き先がわかりにくいことがあります。
できるだけ、リンク先の内容がわかる文言にします。
フォームの使いやすさ
フォームは、アクセシビリティが特に重要な場所です。
問い合わせや予約など、サイトの目的に直結することが多いからです。
フォームでは、次のことを確認します。
- ラベルがあるか
- 必須項目がわかるか
- 入力例があるか
- エラー内容が具体的か
- 入力欄が押しやすいか
- 送信ボタンがわかりやすいか
入力しづらいフォームは、離脱につながります。
デザインの見た目だけでなく、実際に入力して確認します。
alt
画像には、必要に応じて alt を設定します。
alt は、画像が表示されない時や、スクリーンリーダーで読み上げる時に使われる代替テキストです。
すべての画像に詳しい説明が必要なわけではありません。
装飾だけの画像なら、空の alt にする場合もあります。
一方で、内容を伝える画像には、その画像が何を伝えているかを書きます。
スタッフが接客している店内の写真
サービス導入前後の流れを示した図
新商品のパッケージ写真画像の役割に合わせて考えます。
フォーカス表示
キーボードで操作する人のために、フォーカス表示も大切です。
フォーカス表示とは、今どのリンクやボタンに focus が当たっているかを示す見た目です。
デザイン上の理由でフォーカスの枠線を消してしまうと、キーボード操作がしづらくなります。
確認したい項目は次の通りです。
- キーボードでリンクやボタンに移動できるか
- focus 位置が見えるか
- メニューやフォームも操作できるか
- フォーカス表示が背景に埋もれていないか
見出し構造
見出し構造も読みやすさに関係します。
見出しが整理されていると、ページ全体の構成が理解しやすくなります。
HTMLでは、見た目の大きさだけでなく、意味に合わせて見出しタグを使います。
たとえば、ページタイトルの下に大きなセクション見出し、その中に小見出しを置くように整理します。
見出しの階層がバラバラだと、スクリーンリーダーや検索エンジンにも構造が伝わりにくくなります。
この章のまとめ
- アクセシビリティは、できるだけ多くの人が情報にアクセスしやすくする考え方
- 文字と背景のコントラスト、文字サイズ、リンクの見分けやすさを確認する
- フォームはラベル、必須表示、エラー文をわかりやすくする
- 画像の役割に合わせて
altを設定する - 次の章では、実装しやすいデザインの考え方を学ぶ