デジタルアクセシビリティ

9 分

すべての人が能力にかかわらず利用できる Web ページを作成するために、認識すべき概念、構文、および要素がいくつかあります。このユニットでは、重要なテーマの概要について説明します。アクセシビリティ対応の Web サイトを作成する方法の詳細についてすべて学ぶには、推奨のリソースを参照してください。

HTML5 と ARIA

HTML5 は、ハイパーテキストマークアップ言語 (HTML) の最新バージョンです。これは、Web 標準を開発する国際的なコミュニティである World Wide Web Consortium (W3C) によって推奨されています。あらゆる観点から見て、HTML5 は現在の Web の標準であり、Web サイトの基本的な構造を構築するために使用する必要があります。アクセシビリティ対応の Web サイトを作成する計画がある場合、HTML5 の構文とタグを学習する必要があります。

Accessible Rich Internet Applications (ARIA) は、Web ページやアプリケーションのアクセシビリティを高めるために HTML5 と連携して使用できる技術仕様です。 ARIA は HTML5 の一部ではありませんが、その特徴を場合に応じて HTML5 要素と組み合わせて使用できます。

詳細については、「ARIA in HTML」(HTML における ARIA) を参照してください。

見出しとランドマーク

Web ページの視覚的なマークが見えないユーザーは、ページの構造を理解するために、タイトルと見出しの要素を利用します。 HTML5 には、<ヘッダー>、<ナビ>、<メイン>、<フッター> という一連のセクション要素があり、これでページの構造を明確に示すことができます。これらの HTML5 要素を適切に使用すると、スクリーンリーダーを使用するユーザーが Web ページ内を移動するのに役立ちます。

ただし、アクセシビリティを最大限に高めるために、HTML5 要素を ARIA ロールと組み合わせて使用することをお勧めします。 ARIA ロールには、role="banner"、role="navigation"、role="main"、role="contentinfo" があります。これらの ARIA ロールによって、スクリーンリーダーを使用するユーザーが Web ページの目的の部分にすばやく簡単に移動できるようにする、ランドマーク構造が作成されます。たとえば、ユーザーはスクリーンリーダーが各要素を 1 つずつ読み上げるのを待たずに、Web ページの下の方にある特定のランドマークに移動できるようになります。

詳細については、W3C の「ARIA Landmarks Example」(ARIA のランドマークの例) を参照してください。

ページ構造

Web サイトには、見出しのプログラムによるタイトルや適切な書式設定も含まれます。 Web ページにタイトルがない場合、または見出し要素が適切に使用されていない場合、スクリーンリーダーを使用するユーザーは、それが所定ページ上のどこにあるのかを認識しづらくなります。

このような問題を回避するには:

Web ページには、<title> 要素を使用して、情報がわかる、コンテキストに応じたページタイトルを含めます。
プログラムで使用される見出しを、該当する箇所で必ず使用し、適切な入れ子になるようにます。たとえば、<h3> 要素を <h1> 要素の後に指定することはできませんが、<h2> 要素が間にある場合には指定できます。
スタイル上の理由のみで見出し要素を使用しないでください。

Color

デジタルコンテンツの場合と同様に、Web ページを作成する際に色を使用することは重要な考慮事項となります。情報の伝達、アクションの示唆、応答の要求、または視覚要素の識別に関して、色が唯一の視覚的な手段にならないようにする必要があります。色だけを使用すると、視覚障碍または色覚障碍のユーザーは、どのフィールドが必須か、どの項目が選択されているかなどを判断できない可能性があります。テキストおよびテキストの画像では、色のコントラスト比率が少なくとも 4.5 対 1 になるようにしてください。オンラインで利用できる無料のカラーコントラストアナライザーがいくつかあります。たとえば、Accessibility Insights の Windows 向けカラーコントラストアナライザーを使用すると、アクセシビリティ対応のコントラスト比率を確保できます。

 このガイドラインには、いくつかの例外があります。

大きなテキスト: 大きなテキスト (標準の 18 ポイントまたは太字の 14 ポイント) および大きなテキストの画像では、コントラスト比率 3:1 を使用できます。
付随的: アクティブでないユーザーインターフェイス (UI) コンポーネントに含まれるテキストまたはテキストの画像については、コントラストの要件はありません。また、テキストまたはテキストの画像が純粋な装飾である場合、だれにも見えない場合、または画像の一部であり他に重要な視覚コンテンツが含まれる場合もそれに該当します。
ロゴタイプ: ロゴまたはブランド名の一部であるテキストについては、最小コントラスト要件はありません。

People viewing large text on a computer screen.

アクセシビリティ対応の画面上の大きなテキスト

データテーブル

スクリーンリーダーなど一部の支援技術 (AT) アプリケーションにとって、データテーブルは扱いづらい場合があります。データテーブルのアクセシビリティをできるだけ高めるには、Web サイト内でテーブルを使用するときに、必ず次の手順を行ってください。

ネイティブの HTML のテーブル要素 (table、thead、tbody、tr、th、および td) を使用します。
テーブルヘッダーを正しく指定します (th 要素を使用します)。
複雑なテーブル (複数のヘッダー行) の場合は、ヘッダーを適切なデータに確実に関連付けします。
scope 属性を使用して、セルが何のヘッダーであるか (行、列、行のグループ、または列のグループ) を指定します (row、col、rowgroup、または colgroup という値を使用します)。
他のセルのヘッダーとして使用されるすべてのセルに id 属性を追加し、各データセルで headers 属性を使用して該当する id 値を参照します。

Data table and its corresponding native HTML table elements.

これらの手順が実行されていない場合、支援技術を使用するユーザーが、サイトにあるデータテーブルを理解するのが困難になる可能性があります。

フォームのタイムアウトとフィードバック

エラーメッセージが明確に識別されない場合、支援技術を使用しているユーザーが Web サイトのフォーム入力を正しく完了できない可能性があります。応答の時間が限られているために、支援技術を使用しているユーザーが、フォームの入力を完了できなかったり、Web アプリケーションを使用できなかったりする可能性があります。

検証後、次の方法により、エラーメッセージを明確に示すことができます。

エラーメッセージを目立たせる一貫性のある方法の使用
エラーが発生したフィールドの特定。
フォーム上部でのエラーフィールドの特定。
各フィールドのラベルでのエラーフィールドの特定。

該当する場合には、代替の入力の提案を示す必要があります。ただし、それを行うことでフォームの目的が損なわれる場合、この方法は必要ありません。たとえば、フォームがテストの一部である場合、代替の入力の提案によって問題のヒントや回答が示される可能性があるため、適切ではありません。

法律や金融に関するトランザクションでは、エラー防止を提供する必要があります。 1 つのオプションは、最終的な送信の前に、ユーザーが入力内容をレビューできるようにすることです。

リンク

スクリーンリーダーを使用するユーザーは、Web ページのリンク一覧を確認することで Web ページ内を移動できます。

1 つの Web ページ上に同じ名前の複数のリンクがあり、それらが異なる URL を指していると、混乱が生じる可能性があります。リンク名は、コンテキストにかかわらず、説明的で意味がわかる一意のものにしてください。

"その他のリソース" 一覧に表示される場合など、コンテキストに合っていない非説明的で汎用的なリンク名は避けてください。スクリーンリーダーを使用しているユーザーは、それが何に関するリンクか、またはそれがなぜ表示されているかについて状況を把握したり、理解したりできません。次の例では、汎用的でアクセシビリティが低いリンク名の一覧と、アクセシビリティが高く説明的なリンク名の一覧を示します。

アクセシビリティが高いリンクの例:

Web page with a series of three descriptive link names.

一連の説明的なリンク名

アクセシビリティが低いリンクの例:

Web page with a series of three generic, non-descriptive link names

一連の説明的でない汎用的なリンク名

画像

視覚障碍があるユーザーは、画像が見えないため、Web サイト開発者やコンテンツ作成者による説明に頼ります。

テキストの画像は拡大表示してもピクセルが表示されるため、視覚障碍のあるユーザーは読み取るのが困難な場合があります。コントラストが十分でない場合、または画像が小さすぎる場合は、他にも困難が生じます。

写真やボタンなどの画像のために、簡単かつ具体的で情報量の多い代替テキストを指定します。

アクセシビリティが低い画像の例:

アクセシビリティが高い画像の例:

アクセシビリティが低い例ではロゴとして画像が説明される一方で、ロゴの種類が指定されないため、alt テキストを利用するユーザーの役に立ちません。修飾子が追加されたアクセシビリティの高い例では、ユーザーはロゴが何であるかを正確に知ることができます。

テキスト以外に考慮すべきもう 1 つの要素は装飾的な画像です。たとえば、Web ページに様式化された罫線が含まれていても、alt テキストに詳細を記述する必要はありません。空の alt 属性を追加することで、装飾であることをコードで示すことができます。

Example of nontext elements requiring and not requiring descriptive alternative text attributes.

画像と装飾罫線の例

アクセシビリティが低い例:

アクセシビリティが高い例:

アクセシビリティが高い例には、テキストは含まれていません。ただし、alt 属性が含まれているのにテキストがないという事実からは、スクリーンリーダーを使用するユーザーは、画像が装飾であり重要な情報が含まれないことを知ることができます。

アクセシビリティを向上させる方法の詳細については、W3C の「デモ前後でのアクセシビリティ非対応ホームページ」を参照してください。

続行

デジタル アクセシビリティ