アクセシビリティの要件

完了

障害を持つユーザーを含むすべてのユーザーがデジタル製品にアクセスできるようにするための重要な原則と要件を知ることが不可欠です。 Web コンテンツ アクセシビリティ ガイドライン (WCAG) は、アクセシビリティ対応の Web コンテンツとユーザー インターフェイス (UI) コンポーネントを作成するための包括的なフレームワークを提供します。 このセクションでは、サイズ変更とリフローに関連する主なアクセシビリティの原則と要件について説明します。

アクセシビリティ ガイドラインの概要

WCAG 標準では、Web サイトとアプリが適応可能 (ガイドライン 1.3)、識別可能 (ガイドライン 1.4)、ナビゲート可能 (ガイドライン 2.4)、互換性があることを確認するための特定のガイドライン (ガイドライン 4.1) が提供されています。 これらの成功条件は、Web コンテンツとアプリの移動を容易にし、ユーザーにとって予測可能で一貫性のあるものにし、支援技術と互換性のあるものにすることに重点を置いています。 これらのガイドラインを満たすために、デザイナーと開発者は次のことを考慮する必要があります。

適応

このガイドラインでは、意味や機能を失うことなく、さまざまな形式で表示できる方法で情報が構造化されていることを確認することに重点を置いています。 ユーザーがテキストのサイズを変更したり、レイアウトが異なる画面サイズや向きに合わせて調整されたりしたときに、コンテンツにアクセスできるようにする必要があります (SC 1.3.4)。 また、プレゼンテーション形式が変更されたときに、意図した意味と関係 (SC 1.3.1) を保持する意味のある順序でコンテンツを表示する必要もあります。 さらに、コンテンツの読み取りとナビゲーションの順序は、サイズ変更やリフローによるレイアウトの変更に関係なく、論理的で意味のある (SC 1.3.2) ままである必要があります。

区別できる

このガイドラインでは、すべてのユーザーがコンテンツを区別してアクセスできるようにすることで、コンテンツを知覚可能にすることに重点を置いています。 これには、次のようないくつかの重要な要件が含まれています。

• テキストは、コンテンツや機能を失うことなく最大 200% サイズ変更できます (SC 1.4.4)。
• 支援技術なしでテキストのサイズを最大 200% に変更できるため、ユーザーは水平方向にスクロールしなくても、全画面表示ウィンドウでテキストの全行を読むことができます (SC 1.4.8)。
• テキストは、テキストの画像ではなく実際のテキストとして表示されるため、わかりやすくならずにサイズ変更とスタイル設定が可能になります (SC 1.4.5)。 テキストが画像内にある場合、そのサイズ、間隔、色を調整したり、読み上げたり、リフローしたりすることはできません。
• コンテンツは、情報や機能を失うことなく、水平スクロール (SC 1.4.10) を必要とせずに最大 400% ズームすると、ビューポート内でリフローできます。 垂直方向にスクロールするアプリは、ズームが適用される前のコンテンツのサイズである 320 CSS ピクセルの幅にリフローする必要があります。 同様に、水平方向にスクロールするアプリは 、256 CSS ピクセルの高さにリフローする必要があります。 リフローをテストする場合、多くの場合、 320 CSS ピクセル幅 と 256 CSS ピクセルの高い 基準の両方を適用します。

  

• ユーザーは、テキストの間隔、行の高さ、および文字の間隔を調整できます。これにより、テキストのサイズ変更時に読みやすさを維持できます (SC 1.4.8。例を参照)。 この画像には、1行間隔、1.5行間隔、および2行間隔の段落の例が表示されています。
• ユーザーは、コンテンツや機能を失うことなく、文字、単語、行間の間隔を変更できます (SC 1.4.12)。 水平方向に切り捨てられたテキスト、垂直方向に切り捨てられたテキスト、および重なり合うテキストはすべて、この条件を満たす失敗の例です。
• ホバー時またはフォーカス時に表示されるコンテンツは、コンテンツのサイズ変更またはリフロー時にアクセスできます (SC 1.4.13)。

ナビゲーション可能

このガイドラインでは、Web サイトとアプリで明確なナビゲーション メカニズムを提供することに重点を置いています。 これには、いくつかの重要な要件が含まれています。

• ユーザーが繰り返しコンテンツをスキップし、ページのメイン コンテンツに直接移動する方法を提供します。 コンテンツがより小さいビューポートまたはズーム後にリフローされるため、ユーザーは繰り返しセクション (SC 2.4.1) を不必要にスクロールしなくても、ブロックを効率的にバイパスできる必要があります。
• ユーザーがページのトピックや目的を理解するのに役立つ説明的で有益なタイトルがページにあることを確認します。 ページ コンテンツのサイズ変更やリフローを行う場合、このタイトルはユーザーがページの目的を理解するために不可欠なままです。 ズームまたはリフローされたレイアウトに依存しているユーザーは、視覚的なデザインが変更された場合でも、ページをすばやく識別する必要があります (SC 2.4.2)。
• 各リンクの目的が、リンク テキストのみ、またはリンク テキストとその周囲のコンテキストから明確であることを確認します。 コンテンツのサイズを変更してリフローする場合は、テキストを読みやすくし、リンクを切ったり視覚的に変更したりせずに簡単に認識できるようにする必要があります (SC 2.4.4、 SC 2.4.9)。
• 検索機能、サイト マップ、目次など、ユーザーが一連のページ内でページを検索するための複数の方法を提供します。 コンテンツのサイズを変更してリフローする場合は、コンテンツがより小さい画面またはズーム レベル (SC 2.4.5) に合わせて調整される場合でも、これらの代替ナビゲーション オプションがアクセシビリティと機能を維持することが不可欠です。
• わかりやすい見出しとラベルを使用して、ユーザーがコンテンツの構造と目的を理解するのに役立ちます。 テキストのサイズ変更やリフローが行われると、ユーザーがコンテンツを簡単に移動できるように、見出しとラベルは明確に保ち、階層を維持する必要があります。 リフロー中に見出しが歪んだり、ずれたり、視覚的に不明瞭になったりすると、ユーザーを混乱させ、ナビゲーションを中断する可能性があります (SC 2.4.6、 SC 2.4.10)。
• キーボード フォーカス インジケーターが表示されていることを確認して、レイアウトが変化した場合でも、ユーザーが現在フォーカスを持っている要素を理解できるようにします (SC 2.4.7)。
• 対話型要素のナビゲーション順序が論理的で直感的であることを確認します。

互換性がある

このガイドラインは、支援技術を含め、現在および将来の両方のユーザー エージェントとの互換性を最大化することを目的としています。 マークアップ言語を使用して作成されたコンテンツには、完全な開始タグと終了タグを持つ要素、適切に入れ子になった要素、重複する属性、および一意の ID が含まれる必要があることを示しています。 これにより、ユーザー エージェントがコンテンツを正確に解釈して解析できるようになります。 さらに、すべてのユーザー インターフェイス コンポーネントには、プログラムによって決定できる名前とロールが必要です。また、ユーザーが変更できる状態、プロパティ、値もプログラムで調整できる必要があります。

状態、プロパティ、または値に対する変更は、ユーザー エージェントに伝達する必要があります。これにより、支援技術がこれらのコンポーネントに関する情報を操作して提供できるようになります。 最後に、このガイドラインでは、フォーカスを受け取ることなく支援テクノロジによってユーザーに表示できるように、ステータス メッセージをロールまたはプロパティを使用してプログラムによって決定することを義務付けています。 これにより、スクリーン リーダーやその他の支援技術に依存しているユーザーは、コンテンツの重要な変更を中断することなく通知されます。