出典：デジタル庁 ウェブサイト ウェブアクセシビリティ導入ガイドブックより（参照日2023-6-6）
https://www.digital.go.jp/resources/introduction-to-web-accessibility-guidebook
デジタル庁では「誰一人取り残されない、人に優しいデジタル化」を実現するため、継続的に「ウェブアクセシビリティ」の向上に取り組んでいます。この度、ウェブアクセシビリティに初めて取り組む行政官の方や事業者向けに、ウェブアクセシビリティの考え方、取り組み方のポイントを解説する、ゼロから学ぶ初心者向けのガイドブックを公開します。
デジタル庁/ウェブアクセシビリティ導入ガイドブック より
ウェブアクセシビリティについての3回目です。初めての方は１回目も合わせて読んでほしいです。
ウェブアクセシビリティで達成すべきこと
ウェブアクセシビリティには優先するべき順位（レベル）あります。
- 【S】「達成しないと利用者に重大な悪影響を及ぼすもの」
- 【A】「必ず達成しなければならないもの」 ←今回はここのお話
- 【B】「状況に応じて確認すべきこと」
- 【C】「よく検討して導入すべきこと」
「必ず達成しなければならないもの」は 13項目です
今回の項目は、デザインとコーディング両方に関係しています。
デザインだけされる方もコーディングは関係ないと思わずに一読していただきたいです。
下記に配慮した指示がない場合、コーダーは判断に困り、お互いに余計な手間が発生します。
- ロゴ・写真・イラストなどの画像が指し示している情報を代替テキストとして付与する コーディング
- キーボード操作だけで、サービスのすべての機能にアクセスすることができるようにする コーディング
- 操作に制限時間を設けてはいけない コーディング
- 赤字・太字・下線・拡大など単一の表現のみで情報を伝えてはいけない デザイン
- スクリーンリーダーで順に読み上げたときに、意味が通じる順序になっている コーディング
- 見出し要素だけで、セクションやブロックに含まれる要素を表現する デザイン
- 文字と背景の間に十分なコントラスト比を保つ デザイン
- テキストの拡大縮小をしても情報が読み取れる コーディング
- 文字や文字コード、フォントに関する注意 コーディング デザイン
- ページの内容を示すタイトルを適切に表現する デザイン
- リンクを適切に表現する デザイン
- ナビゲーションに一貫性をもたせる デザイン
- 同じ機能には、同じラベルや説明をつける デザイン
量が多いから、数回に分けよう今回は、1～7です。
ロゴ・写真・イラストなどの画像が指し示している情報を代替テキストとして付与する
「代替テキスト」とは、写真やイラスト、グラフなど主に画像で提供される情報と「同等の役割を果たすテキスト」のことです。「代替内容」なので、画像の代わりにその文字を置いてみても違和感がない内容であることが望まれます。
デジタル庁/ウェブアクセシビリティ導入ガイドブック より
対応方法
| 画像の種類 | 推奨される記述内容 |
|---|---|
| 画像がリンク | リンク先を示す内容 |
| グラフや図表など、意味を示す場合 | 基本、要約を記述しますが、テキストで表示済みの場合は、 何のグラフ・図表なのかが、示されていればOK |
| ロゴマークや見出しなど | 同じ文字を記述 |
| 装飾や意味を持たない画像 | 代替テキストは空でOK |
例 赤い車の画像を表示した場合の記述について
imgタグにて、
車のイラストを表示した際に、
altタグに説明文を追加します。
<img src＝"…/車.png" alt="左に向いた赤い色の車のイラスト">また、代替テキストの長さは仕様や規格では制限がありませんが、最大数80字が目安です。
キーボード操作だけで、サービスのすべての機能にアクセスすることができるようにする
キーボード操作時に、フォーカスインジケーター（選択中の要素を枠線等で囲んで示すこと）が表示されるようにしましょう
デジタル庁/ウェブアクセシビリティ導入ガイドブック より
キーボード操作時に、フォーカス・入力がキャンセルされたり、フォーカス・入力した瞬間に何かが勝手に動作することがないようにしましょう
例 Tabキーでフォーカスを移動できるようにする
キーボードでの操作を想定して、フォーカスの可視化、フォーカスの順序も考える。
操作に制限時間を設けてはいけない
閲覧や入力の操作に、制限時間を設けてはいけません。
デジタル庁/ウェブアクセシビリティ導入ガイドブック より
対応方法として
- 制限時間があること、またそれを延長・解除できることを利用者に事前通知する
- 入力フォームのセッション時間を利用者が、延長するか無制限にできる
- ページ上のスクリプトで制御されている、入力フォームの制限時間を利用者が延長できる
- 自動的に進むコンテンツを利用者が、一時停止できる
入力フォームに制限時間がある場合は事前に警告し、簡単に延長できるようにする
赤字・太字・下線・拡大など単一の表現のみで情報を伝えてはいけない
赤字など、色の違いだけで情報を伝えてはいけません
デジタル庁/ウェブアクセシビリティ導入ガイドブック より
太字、『右の写真』『丸いボタン』など、位置や形の違いだけで情報を伝えてはいけません
例 色だけで重要度を表現
上記のイラストの様に、色だけで必須項目を表現しない。
「必須」ラベルのように、色以外の手がかりでも「必須」項目を判別できるようにする。
スクリーンリーダーで順に読み上げたときに、意味が通じる順序になっている
目が見えている人はウェブサイトを斜め読みして欲しい情報を見つけることができますが、(～中略～) スクリーンリーダーは、HTMLのソースに記載されている順、視覚的には左上から右下に向かって読み上げます。この順序を考慮してコンテンツやサービスを設計してください。
デジタル庁/ウェブアクセシビリティ導入ガイドブック より
例1 文字間について
デザインだけを気にして「日 時」を「日 時」と、コーディングしてしまうと
スクリーンリーダーはこれを「ヒ、トキ」と読み上げてしまします。
ですので、この場合は、文字間隔を調整するためのスタイスシート「letter-spacingプロパティ」を用いて調整したほうが良いと思います。
例2 ボタンの位置
上記のイラストのように、ボタンの後に内容を読み上げると意味が伝わりにくくなります。
ですので、この場合は内容の後にボタンを設置するようにしましょう。
見出し要素だけで、セクションやブロックに含まれる要素を表現する
●大見出し、中見出し、小見出し…となるように見出しレベルを適切に設定してください
デジタル庁/ウェブアクセシビリティ導入ガイドブック より
●NVDA （Windows 用の無料のスクリーンリーダー）でF7キーを押して見出しリストを表示して、ページ中の見出しが過不足なく表示されていることを確認してください
●Chromeの機能拡張のHTML5 Outlinerを使って、HTMLのアウトラインを確認してください
●見出し要素を空にしないでください
●強調や文字を大きくするために見出し要素を用いないでください
例1 リストの見出し
箇条書きの見出しが内容を表したものになっていないと、何のリストなのか推測するのが難しい。
ですので、回避方法として、何を目的としたリストなのか、見出しを付けましょう。
例2 文章の見出し
長い文章は読みにくく、必要な部分だけを拾い読みすることも厳しくなる。
見出しがあると、内容を予想しやすくまた、読み飛ばしも容易になります。
文字と背景の間に十分なコントラスト比を保つ
文字色と背景の間に、4.5:1以上のコントラスト比がある（チェックツールによりある程度確認できる）必要があります。配色を決めるときに合わせて検討しましょう。
デジタル庁/ウェブアクセシビリティ導入ガイドブック より
例1 コントラスト比を保つ
背景色に対して、近い色（コントラスト比が4.5以下）の場合読みにくくなります。
ですので、コントラスト比が4.5：1以上になるように配色決めを行います。
コントラスト比については、チェックソフトやサイトがありますので、確認してみてください。
