Webアクセシビリティというと「難しそう」と感じるかもしれません。でも少し意識するだけで多くの人にとって利用しやすいサイトを作る事が可能です。
本記事では、まず押さえておきたい基本的なアクセシビリティ対応を紹介します。
画像に代替テキストを設定する
画像を設置する場合、画像を見ることができないユーザーにも中身が伝わるようにalt属性を使って代替テキストを設定します。
関連するWCAG達成基準
未対応時のユーザーへの影響
画像の内容を伝えられない
alt属性がないとスクリーンリーダーに画像の内容が伝わらず、ページ全体で伝えたいことが理解できない恐れがあります。
意味のない画像を読み上げられるリスク
装飾目的の画像（アイコンや罫線など）には空のaltを設定しておきます。
意味のない画像だからとaltを入れないでいると、スクリーンリーダーがファイル名やURLを読み上げることがあり、ユーザーに不要な情報を聞かせてしまうことになります。
実装方法
意味のある画像にはalt属性で内容を伝えましょう。
<img src="author.jpg" alt="著者の〇〇氏の顔写真">
装飾だけで内容に影響しない画像には、alt属性を空にする事でスクリーンリーダーは読み上げをスキップします。
画像以外で読み上げをスキップしたい要素には、aria-hidden="true"を使います。
<!-- 画像の読み上げをスキップする --> <p><img src="time.svg" alt="">日時：9/1 17:00〜</p> <!-- 画像以外の読み上げをスキップする --> <p><span aria-hidden="true">★</span>人気商品</p>
lang属性を指定する
htmlタグにはそのページで使われている主言語を指定するlang属性を付けましょう。
アクセシビリティを向上させるためには、ドキュメントの言語を指定することが重要です。
関連するWCAG達成基準
未対応時のユーザーへの影響
スクリーンリーダーの読み上げ
lang属性がないとスクリーンリーダーがページの言語を正しく判断できず、発音やイントネーションが不自然になることがあります。
翻訳ツール
翻訳結果が不自然になったり、精度が下がる場合があります
実装方法
ページ全体が日本語で書かれている場合はhtmlタグにlang=”ja”、などのように正しく言語を指定しましょう。
<html lang="ja">
ページ内の一部だけ異なる言語を使っている場合はその部分にlang属性を指定します。
<p> こんにちは。 <span lang="en">Hello.</span> </p>
リンクテキストを具体的にする
リンクテキストにはユーザーがリンク単体でリンク先の内容を判断できるよう、具体的な文言を使用することが重要です。
関連するWCAG達成基準
未対応時のユーザーへの影響
リンク先がわからない
スクリーンリーダーはリンクテキストを読み上げる機能があります。
「こちら」や「詳細」などの抽象的な文言だと、そのリンクがどこへ繋がっているか分かりません。結果として、文脈を読み直したり、リンク先に飛んで確認するなど操作の負担が増えます。
SEOへも影響
検索エンジンはリンクテキストを参照してリンク先の内容を判断します。
明確なリンクテキストはSEOの効果を高めますが、曖昧なリンクテキストはSEOの効果を下げる可能性があります。
実装方法
リンクテキストだけでリンク先が予測できるようにします。
やむをえずリンク先が不明瞭なテキストにリンクをつけるときはaria-labelを使いましょう。
<!-- × 「こちら」だけではリンク先がわからない --> <p>商品の詳細は<a href="/detail">こちら</a></p> <!-- ○ リンク先がわかる --> <p><a href="/detail">商品の詳細はこちら</a></p> <!-- ○ aria-labelを追加する --> <p>商品の詳細は<a href="/detail" aria-label="商品の詳細">こちら</a></p>
見出しタグを正しく使う
見出しタグは、文書の構造を示す重要な役割を持っています。見た目のデザイン調整のために使うのではなく、文書の論理的な階層を正しく反映させるために使用しましょう。
関連するWCAG達成基準
未対応時のユーザーへの影響
スクリーンリーダー利用者が混乱する
スクリーンリーダーは見出しタグを利用してページを効率的に移動します。不適切な順序で使うと、情報の優先度や文書構造が理解しにくくなります。
SEOへも影響
検索エンジンは見出しを基にコンテンツの内容を判断します。
正しい階層構造を守ることで、SEO効果を高めることができます。
実装方法
最上位にはh1を1つだけ配置し、以降は論理的な順序でh2、h3…と使い分けましょう。見出しのデザイン調整はCSSで行い、タグ自体は構造に基づいて使用します。
<h1>サイトタイトル</h1> <h2>サービス概要</h2> <h3>料金プラン</h3>
コントラスト比の確保
文字と背景色のコントラスト比を十分に確保することは、視認性の向上とアクセシビリティ対応において非常に重要です。
関連するWCAG達成基準
未対応時のユーザーへの影響
文字が読みにくい
背景と文字の色が似ていると文字が読みづらく、人によっては情報がほぼ認識できなくなります。
操作に支障
ボタンやリンクの区別ができないと、どこが操作できるかわからず、ユーザーが困惑する恐れがあります。
実装方法
WCAG 2.1 の推奨値は下記の通りです。
– 通常のテキスト：コントラスト比 4.5:1以上
– 大きな文字（18px以上、または14px以上で太字）：コントラスト比 3:1以上
チェックツールを使ってコントラスト比を十分に取れているか確認しましょう。（例：https://webaim.org/resources/contrastchecker/ ）
フォーカスインジケーターを表示する
リンクやボタン、フォームにフォーカスが当たった際に現在どこを操作しているのか視覚的にわかるようにしましょう。
ブラウザやOSに標準でフォーカスインジケーターがありますが、カスタマイズする場合も視認性を確保することが重要です。
関連するWCAG達成基準
WCAG 2.1 – 2.4.7 フォーカスの可視化を理解する
未対応時のユーザーへの影響
誤操作のリスク
フォーカス位置が分からないことで、フォーカスの現在地が分からず誤操作をする可能性が高まります。
実装方法
デフォルトのフォーカスが分かりにくい場合は、独自のスタイルで分かりやすくします。
outlineプロパティを消す場合は十分な可視性を持つ代替スタイルを適用しましょう。
button:focus {
outline: none;
box-shadow: 0 0 0 3px rgba(255, 255, 255, 0.8), 0 0 0 6px rgba(0, 123, 255, 0.4);
}
感覚的な特徴だけに依存していない
色や形、位置など感覚的な表現だけで情報を伝えるのではなく、誰にでも理解できる方法で補足説明を行いましょう。
関連するWCAG達成基準
未対応時のユーザーへの影響
ユーザーによっては理解できない
例えば「右のボタンを押してください」といった指示は、スクリーンリーダー利用者など画面のレイアウトがわからないユーザーには意味をなさない可能性があります。
他にも色覚多様性のあるユーザーには「赤字は必須です」と説明しても情報が伝わりません。
実装方法
感覚情報に依存しない説明をしましょう。
上記の例の場合、
・位置で説明するのではなく、ラベルで説明する
・色に頼らず、テキストやアイコンなどで補足する
などの配慮が必要になります。
まとめ
今回紹介した内容は、どれもアクセシビリティの基礎的な重要な要素です。
少しずつ取り入れていくことで、誰にでも使いやすいサイトを作る第一歩になります。
簡単30秒