Show Menu
トピック×

アクセス可能な複雑なテーブルを HTML5 フォームで作成する

HTML5 フォームでのテーブルのデフォルト実装では、テーブルのレンダリングに HTML DIV 要素が使用されます。さらに、アクセシビリティ要件を満たす目的で ARIA ロールも使用されます。
データテーブルで使用されるARIAの役割を完全にサポートしていないスクリーンリーダーでのアクセシビリティの問題を回避するため、HTML5フォームでは、テーブルの代替レンディションを提供しています。 これらのテーブルは、Designer で導入された新しいテーブル形式に基づいており、次の項目もサポートしています。
  • 行ヘッダー
  • 行幅
HTML5 フォームで新しい形式を使用するには、テーブルを複雑なテーブルとしてマークする必要があります。複雑なテーブルとしてマークするには、テーブルのサブフォームの XML ソースに extras タグを次のように追加します。
</extras>
 <text name="complexTable">1</text>
 </extras>

The tables which are marked as complexTable follow the native HTML rendition, and provide better accessibility support for certain screen readers. 行幅を作成するには、テーブル内の 1 つの列で連続する複数のセルを選択し、選択範囲を右クリックして、「 セルの結合 」をクリックします。
行幅の作成は、一番左のセルに対してのみ機能します。
行を行ヘッダーとしてマークするには、その行のすべてのセルを選択し、選択範囲を右クリックして、「 ヘッダーをマーク 」をクリックします。
セルを列ヘッダーとしてマークするには、その列内の任意のセルを選択し、選択範囲を右クリックして、「 ヘッダーをマーク 」をクリックします。
Limitations in new AccessibleTable format:
  • テーブルに行幅を設定する場合は、拡大可能なフィールドを使用できない
  • ネストされたテーブル(テーブルのセルに含まれている別のテーブル)は使用できない
  • 行幅はヘッダー行とヘッダーセルのみに適用できる
  • 使用可能なテーブルは標準テーブルのみである
  • 行幅が 1 を超えるテーブルではデータを事前入力できない