テーブルのアクセシビリティ対応

単純なテーブルのアクセシビリティ対応

テーブルはアクセシブルなフォームでコンテンツの整理や表示を効果的に行う方法の 1 つです。テーブルの行と列を適切に使用すれば、フォームのコンテンツに予測可能で一貫性のある構造を持たせることができます。

例えば、ユーザーがボディ行セルに移動すると、スクリーンリーダーがセルの位置を識別し、セルの内容を読み上げます。スクリーンリーダーは、行ヘッダーと列ヘッダーまたは行番号と列番号の組み合わせを使用してセルの位置を識別します。

セルの位置を特定することに加えて、スクリーンリーダーは、列の先頭行のセルの内容など、ヘッダー情報を指定することもできます。スクリーンリーダーはセルの内容が含まれているテーブル内の場所へユーザーをガイドするための情報を提供するので、テーブルのレイアウトはテーブルのアクセシビリティに直接影響します。

テーブルのレイアウトは単純にすることをお勧めします。単純なテーブルは単一のヘッダー行で始まり、それにボディ行が続きます。

アクセシビリティのために単純なテーブルをデザインする場合、次のポイントに留意してください。

  • テーブルのタブ順序はフォーム自身と同じように地理的順序に従います。テーブルの内容が左から右、上から下へと順に読み取られるように編成してください。

  • ほとんどのスクリーンリーダーはテーブル内の 1 行目をヘッダー行として解釈します。ボディ行セルの内容を読み取るとき、このようなスクリーンリーダーは、関連付けられたヘッダー行セルの内容を最初に読み取ります。各ヘッダー行セルの内容は、列の内容を説明するものにしてください。

  • 2 列以上にまたがるセル、階層化されたテーブル、テーブルセクションなどの使用は避けます。スクリーンリーダーは、このような機能を正しく解釈できない場合や使用できない場合があります。例えば、ボディ行内のセルが 2 列にまたがる場合、スクリーンリーダーは行内の次のセルを読み取るとき、ヘッダー列の正しいセル内容を参照できないことがあります。

アクセシブルなフォーム内のテーブルの操作

アクセシブルなフォームでは、スクリーンリーダーがテーブル内のカーソル位置に関する情報を読み上げます。ユーザーがフォーム内のテーブルセルの間を移動すると、スクリーンリーダーはセルの内容を読み上げます。ユーザーが階層化されたテーブルのあるセルに移動すると、スクリーンリーダーはセルと階層化されたテーブルの内容を読み上げます。

階層化されたテーブルにある編集可能なフィールドは、フォームでのタブ順序に含まれるフィールドです。そのため、ユーザーは矢印キーを使用して、階層化されたテーブルの中の編集可能なフィールド間を移動できます。ユーザーが階層化されたテーブルの中や外に移動すると、テーブルの初めと終わりが読み上げられます。

注意: JAWS を使用する場合、階層化されたテーブルの初めと終わりは、仮想カーソルモードでは読み上げられません。

結果

アクション

スクリーンリーダーは、現在のテーブルのセルを読み上げます。

Ctrl + Alt + 5(テンキーボード)

セル間を水平に移動します。

Ctrl + Alt + 左または右向き矢印キー

セル間を垂直に移動します。

Ctrl + Alt + 上向きまたは下向き矢印キー

複雑なテーブルのアクセシビリティ対応

アクセシビリティを備えたテーブルをデザインする場合、テーブルレイアウトを、後にボディ行が続く単一のヘッダー行がある単純なものにすることをお勧めします。ただし、内容によっては、テーブル形式での表示がその他の形式より適していても、より複雑なレイアウトが必要となる場合があります。例えば、内容を効果的に伝えるために、複数のヘッダーにまたがるセルを使用する必要がある場合があります。

複雑なテーブルを作成するには、テーブルオブジェクトを使用するか、サブフォームオブジェクトを組み合わせます。テーブルオブジェクトでは、列および行の挿入やサイズ変更のためのオプションなど、デザインプロセスをサポートするための機能を使用します。

デザインの経験と環境設定に応じて、サブフォームオブジェクトを組み合わせることによる複雑なテーブルの作成を選択できます。例えば、2 つの行を含む 1 つのサブフォームを作成し、テーブルのヘッダーとしてこのサブフォームを指定し、テーブルのボディ行に別のサブフォームを指定することができます。

テーブルオブジェクトではなくサブフォームオブジェクトを使用してテーブルを作成する場合、次の手順も実行する必要があります。

  • 各サブフォームのタイプを「配置済み」に設定します。 「サブフォーム」タブのサブフォームプロパティ を参照してください。

  • アクセシビリティパレットで、テーブルを構成する各サブフォームに適切なサブフォームの役割を設定します。例えば、ヘッダー行の役割をテーブルヘッダーとして使用されるサブフォームに割り当てます。 アクセシビリティパレットのアクセシビリティプロパティ を参照してください。

  • テーブルまたはその内容に関する情報を伝えているが、テーブルの一部とは見なされない行については、「なし」というサブフォームの役割を割り当てます。スクリーンリーダーはその行の内容を読み取ります。

    複雑なテーブルに対してどのような情報が読み上げられるかは、スクリーンリーダーがサポートしている機能によって決まります。例えば、ヘッダー行およびヘッダー行のあるセクションを含むテーブルがあるとします。ユーザーがテーブルセクション内のボディ行セルに移動したとき、スクリーンリーダーは次の内容をこの順序で読み上げると考えられます。

  • テーブルのヘッダー行に適したセルの内容

  • セクションのヘッダー行に適したセルの内容

  • 選択されたセルの内容

    スクリーンリーダーによっては、いずれか一方のヘッダー行にあるセルしか読み上げることができない場合があります。