こんにちは。デザイン事業部でデザイナーをしている金沢です。
アイレットデザイン事業部では日々、Webアクセシビリティへの知見強化に取り組んでおります。
Webアクセシビリティは、すべてのユーザーがウェブコンテンツを利用できるようにするために不可欠です。
本記事では、デザイン段階で考慮すべきWebアクセシビリティのポイントを、「知覚可能」「操作可能」「理解可能」の3つの基準に分類して解説します。
これら3つの基準はWCAGガイドラインに記載がある4つの原則「知覚可能（見える・聞こえる）」「操作可能（使える）」「理解可能（わかる）」「堅牢（読み：けんろう）（壊れにくい）」から3つピックアップした原則になります。
デザイン段階で網羅できるアクセシビリティは主に堅牢以外3つの部分になるため、「知覚可能」「操作可能」「理解可能」の基準を採用した次第です。
ちなみに、タイトルにある【A11y】はいろいろな読み方があります。
※1「エーイレブンワイ」や ※2「アライ」 などと読んだりします。
この用語は「Accessibility」の省略形であり、数字の「11」は「A」と「y」の間にある11文字を表しています。私の周りでは「エーイレブンワイ」読みをされている方が多いです。
読み方は一度置いておいて、最終的に「A11y」はWebアクセシビリティのことを言っている、と認識できていればOKです。
参照：https://developer.mozilla.org/ja/docs/Glossary/Accessibility
※1 エー イレブン ワイ［WebA11y.jp］のサイトは「エー・イレブン・ワイ」と呼ばれることから
※2 論文で「(pronounced ally)」と書かれていることから
では早速「知覚可能」の基準に該当するWebアクセシビリティについて見ていきます。
知覚可能
コントラストの確保
目に不自由のあるユーザーにとって、十分なコントラスト比がないとコンテンツが読みづらくなります。背景色とテキストの色が十分に異なっているかをチェックしましょう。
テキストのコントラスト比を4.5:1以上にする。
太字（Bold）18.5px以上、または通常（Regular）24px以上のテキストは3:1以上のコントラスト比が必要。
具体例：
- 白背景に黒テキスト（コントラスト比 21:1）は最も視認性が高い
- 薄い灰色の背景に濃い灰色の文字（コントラスト比 4.8:1）は合格
- 青背景に赤文字（コントラスト比 3:1）は視認性が低く、不十分
達成確認方法：
- コントラスト比を確認するチェックツールとして以下のツールがある。
既存のWebサイトをチェック：カラーコントラスト・チェッカー | Acquia - デザイン段階でチェック： Text Color Contrast Checker (Figmaプラグイン) またはデフォルトの塗り機能で確認可能
前景と背景のコントラスト比について左が4.73 : 1で、右が1.29 : 1
フォントサイズと行間
読みやすさを確保するために、十分なフォントサイズ（通常は16px以上）と行間（フォントサイズに対して1.5倍の行間など）を設定します。レスポンシブデザインを採用し、デバイスごとに適切なフォントサイズやレイアウトが表示されるようにしましょう。
達成するための対応例
- 行の間隔 (行送り)：フォントサイズの少なくとも 1.5 倍に設定する
- 段落に続く間隔:フォントサイズの少なくとも 2 倍に設定する
- 文字の間隔 (字送り) ：フォントサイズの少なくとも 0.12 倍に設定する
- 単語の間隔:フォントサイズの少なくとも 0.16 倍に設定する（主に英語などの言語に適用する。日本語には直接の関係が薄い）
フォントサイズを16pxに設定し、それに伴って行間と段落に続く間隔を調整
追加メモ：
フォントサイズについて
PCもSPも本文フォントサイズは基本16pxで作成する。
読ませる文字は最小14pxまでに抑える。
権利表記など小さくても良い文字でも10pxは確保する。
また子供、お年寄り向けのサイトなどは17, 18pxのフォントサイズを設定するなど、ユーザーに沿った大きさを選ぶと良い。
音声・映像コンテンツに代替コンテンツを付与する
音声や映像には、キャプション（字幕）をつけましょう。音声のみの場合は、内容をテキストでも伝えるようにします。映像のみの場合は、テキストで説明するか、音声による補足を加えましょう。
また、音声付きの映像（いわゆる動画）には、キャプション（字幕）をつけましょう。
これは、音声を聞くことができない方や、映像を見ることができない方のために、代替手段として情報を提供するという考え方に基づいています。
達成するための対応例：
- YouTube動画に字幕を追加
- 音声ガイドにキャプションを追加
感覚的な特徴
「右の写真」「丸いボタン」などの位置関係や形に依存した表現を避けましょう。これらは音声読み上げやレイアウトが変更された場合、情報が正しく伝わらなくなります。
しかし「上記」はコンテンツのその地点よりも前にあるコンテンツを指し、「下記」はその地点よりも後にあるコンテンツを指すことが共通理解となっているためこれらの文言使用はOK。「上記」「下記」の文言を使用する際の注意点として、参照されているコンテンツの読み上げ順序の中に適切に位置している必要がある。
アンケートの説明欄にボタン位置の説明がある。
文字画像について
装飾の目的でテキストを画像で作成するのは避けましょう。テキストは常にテキストとして表示し、スクリーンリーダーによって認識されるようにします。
文字画像とは：
視覚的な表現を目的としてテキストを画像化したもので、アクセシビリティの観点から問題があります。スクリーンリーダーは画像内のテキストを読み取れず、ユーザーが情報を得られない可能性があります。WCAGでは、テキストが適切に表示できる場合は文字画像の使用を避けるべきとされています。
文字画像を確認する際には該当の画像をクリックしながらドラッグすると画像かどうか容易にわかる
達成するための対応例：
- 画像内のキャッチコピーはテキストとして表示
- ロゴや画像にalt属性を付け、画像を認識できるようにする。そのために画像名をFigmaのレイヤーなどから指定しておく
達成確認方法
- 文字画像を探す
- 適切な代替テキストaltが付与されているかどうかチェックする
※意味のある、または情報が詰まった文字画像に関しては画像ではなくマークアップで表現するのが良い。
色の使い方
情報を伝える際に色だけに頼ることは避け、テキストやアイコンを併用します。
エラーメッセージや重要な通知には色だけでなく、テキストやアイコンも併せて表示することで、目の不自由な方にも配慮します。
達成するための対応例：
- 赤色のエラーメッセージにアイコン（例：×マーク）を追加
- 青色のリンクテキストに下線を付けて、視覚的に区別しやすく
- 警告メッセージに色だけでなく、太字やアイコンを使って強調
赤い※（米印）だけでなく「必須」というテキストを添える。！アイコンと赤字だけでなく「【重要】」というテキストを添える
以上「知覚可能」パートの内容でした。
この部分はデザインの段階からアクセシビリティに配慮できる部分が多くあります。
だからこそデザイン段階の際には意識的に気をつけていきましょう。
続いて「操作可能」に関する内容をまとめます。
操作可能
動きや点滅などがあるコンテンツを利用者が操作できるようにする
アニメーションやスライドショーなどのコンテンツでは、一時停止、停止、非表示にするオプションを提供することが重要です。
具体例：
- スライドショーに「停止」ボタンを追加
- アニメーション効果に一時停止機能を追加
リンクの目的
リンクはその目的が明確にわかるように表現します。
「詳しくはこちら」や「こちら」のみ、といった曖昧なリンクテキストは避け、リンク先が一目で理解できるよう具体的なテキストにしましょう。
「こちら」という文言を使用するにしても「WCAG日本語訳についてはこちらをご覧ください。」などリンクのテキスト単独ではわからないが、コンテキストから判断できる場合などがあるため使い方には注意が必要です。
また「WCAG日本語訳をご覧ください。」ならリンクのテキスト単独で判断できるなど、リンクテキストは目的をはっきりさせる必要があります。
具体例：
- NG「詳細な情報はこちら」→OK:「粗大ゴミの出し方の詳細」
- NG「詳細」→ OK:「FAQの詳細」
- NG「詳しくはリンクを確認」→ OK:「お問い合わせ方法の詳細」
現在位置の達成基準
ユーザーが現在どのページにいるのかを明示するために、パンくずリストやサイトマップを提供します。
達成するための対応例：
- パンくずリストをページの上部に表示
- サイトマップページにすべてのページリンクを一覧化
追加メモ：
- パンくずリスト例：Oracle Cloud Infrastructure（OCI）導入・移行支援サービス｜Oracle Cloud の活用ならcloudpack 画面上部にパンくずあり
- サイトマップ：サイトマップ｜クラウドの活用ならcloudpack
ターゲットのサイズ
ボタンのタップ領域などを少なくとも44px × 44pxを確保する。
スマホでタッチ操作が必要な場合にも、PC操作でクリック操作が必要な場合でも、有効な大きさにしておく必要があります。
手の震えがありタップ操作が難しい場合や、クリック操作でも怪我などによって利き手ではない手で操作が必要な場合などは、ボタンの領域は大きい方がユーザーが快適にサイトを使用することができます。
達成するための対応例：
- ボタンの大きさを44px × 44px以上で確保する
- ボタンがどうしても小さい必要がある場合は上下に余白を設けて最低44px以上の領域を確保する
参考：
以上、原則の「操作可能」範囲でデザインが対応可能な箇所を取り上げました。
デザインの領域では動くコンテンツの操作性や明確なリンク表記、現在位置の把握、十分なボタンサイズなど、利用者が直感的に操作しやすいアクセシビリティ対応が可能だということがわかりました。
続いて最後の原則「理解可能」についてまとめていきます。
理解可能
一貫したナビゲーション
サイト全体でナビゲーションの位置や構造を統一し、ユーザーがページ間を容易に移動できるようにします。
主要なナビゲーションメニューは常にアクセス可能な位置に配置し、操作の負担を軽減します。
もう少し砕けた言い方にすると、ページが変わっても同じ場所にナビゲーション（いわゆるヘッダーやフッター、サイドメニューなど）が表示されるということがユーザーにとって便利で、使いやすさを提供できます。
また、すでに登場した項目が入れ替わっていなければ、項目の追加削除があっても問題はありません。
例えば下層ページに入ったら新しく選択できるメニュー項目が増えるなど。
達成するための対応例：
- サイトのヘッダーにグローバルナビゲーションを配置
- フッターにも重要なリンクを配置して、どのページからもアクセス可能にする
参考：
- クラウド導入実績 国内トップレベルのcloudpack【クラウドパック】：どのページに遷移しても同じ場所に、同じ内容のグローバルナビゲーションがヘッダーに表示される。フッターも同様に同じ場所に同じものが表示されている。
明確なラベル付け
フォームの各入力フィールドに、ユーザーが入力すべき内容を示す明確なラベルを付けます。
ラベルを使用することで、視覚的な補助が必要なユーザーにもフォームが理解しやすくなります。
具体例：
- 名前フィールドに「名前（※必須）」と明記
- メールアドレスフィールドにメールアドレス（例: example@domain.com）」とサンプルを表示
- 確認用パスワードに「パスワード確認（※必須）」と明確に表示
追加メモ：
フォームにおけるサポートテキストは入力欄に表示させるのではなく外に出して表示させることが良い。なぜなら入力中にサポートテキストを見たくなった際に入力したテキストを一度全て削除して確認しなければならないため。
入力欄にサポートテキストを表示させるのは使い勝手が悪く、良くない
以上「理解可能」についてデザイン段階で意識できるアクセシビリティについてでした。
これまで「知覚可能」「操作可能」「理解可能」に分けてデザイン段階で意識すべきポイントを見てきました。Webアクセシビリティは、すべてのユーザーがウェブコンテンツを利用できるようにするための重要な要素です。
今回は、デザインの段階でアクセシビリティを考慮するポイントについて紹介しました。WCAGを読み進めると、マークアップの部分でも注意すべき点がたくさんあります。本記事で触れた現時点のデザイン段階でのアクセシビリティ配慮だけでは、アクセシビリティを考慮したサイト作りができているとは言い難いのが実情です。
そのため、今後はマークアップに焦点を当てたアクセシビリティ対応方法について、初心者の視点からまとめていきたいと思っています。また、WCAGガイドラインは専門的な言葉が多く、理解が難しいと感じる方も多いかと思います。そこで、WCAGでよく見かける難解な用語やあまり見かけない言葉を整理し、少しでも理解を深めていけるような内容をお届けしたいと思います。
P.S.
アイレットではWebアクセシビリティに配慮したサイト制作や改修のサポートを行っております。
ご興味ある方は以下のサイトをご覧ください！
アイレット アクセシビリティサイト：https://cloudpack.jp/lp/a11y/
簡単30秒