アクセス可能な複雑なテーブルを HTML5 フォームで作成する create-accessible-complex-tables-in-html-forms
HTML5 Formsのテーブルのデフォルト実装では、HTMLDIV 要素を使用してテーブルをレンダリングします。 レンダリングでは、アクセシビリティ要件を満たすために ARIA ロールを使用する必要があります。
ARIA ロールとデータテーブルの組み合わせを完全にはサポートしていないスクリーンリーダーでアクセシビリティの問題が発生するのを防ぐには、HTML5 フォームでテーブル用の代替レンディションを使用します。これらのテーブルは、Designer で導入された新しいテーブル形式に基づいています。この形式では、次のものもサポートしています。
- 行ヘッダー
- 行幅
HTML5 Formsで新しい形式を使用するには、テーブルを複雑なものとしてマークします。 複雑なテーブルとしてマークするには、テーブルのサブフォームの XML ソースに extras
タグを次のように追加します。
</extras>
<text name="complexTable">1</text>
</extras>
complexTable としてマークされたテーブルはネイティブの HTML レンディションに従うため、特定のスクリーンリーダーのアクセシビリティの範囲が拡大します。行幅を作成するには、テーブル内の 1 つの列で連続する複数のセルを選択し、選択範囲を右クリックして、「セルの結合」をクリックします。
注意: 行幅の作成は、一番左のセルに対してのみ機能します。
行を行ヘッダーとしてマークするには、行のすべてのセルを選択し、選択範囲を右クリックして、 ヘッダーをマーク.
セルを列見出しとしてマークするには、列内の任意のセルを選択し、選択範囲を右クリックして、 ヘッダーをマーク.
新しい AccessibleTable 形式には次の制限事項があります。
- テーブルで行スパンが使用されている場合、拡大可能なフィールドがサポートされない
- ネストされたテーブル(テーブルセル内のテーブル)はサポートされません
- 行スパンのサポートは、ヘッダー行とヘッダーセルに限られています
- サポートは通常のテーブルに制限されています
- 行範囲が 1 を超えるテーブルでのデータの事前入力はサポートされません
recommendation-more-help
a6ebf046-2b8b-4543-bd46-42a0d77792da