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

完了

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

HTML5 と ARIA

HTML5 はハイパーテキスト マークアップ言語 (HTML) の最新バージョンであり、Web 標準を開発する国際的な団体である World Wide Web コンソーシアム (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 のテーブル要素 (tabletheadtbodytrth、および 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 サイト開発者やコンテンツ作成者による説明に頼ります。

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

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

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

<img src="MSFTlogo.jpg" alt="logo" />

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

<img src="MSFTlogo.jpg" alt="Microsoft logo" />

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

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

Example of non-text elements requiring and not requiring descriptive alternative text attributes.

画像と装飾罫線の例

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

<img src="border.gif" />

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

<img src="border.gif" alt="" />

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

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