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

HTML5 フォームでのテーブルのデフォルト実装では、テーブルのレンダリングに HTML DIV 要素が使用されます。さらに、アクセシビリティ要件を満たす目的で ARIA ロールも使用されます。

ARIAロールを完全にはサポートしていないデータテーブルでのスクリーンリーダーのアクセシビリティの問題を回避するため、HTML5Formsではテーブル用の代替レンディションを提供しています。 これらのテーブルは、Designer で導入された新しいテーブル形式に基づいており、次の項目もサポートしています。

  • 行ヘッダー
  • 行幅

HTML5 フォームで新しい形式を使用するには、テーブルを複雑なテーブルとしてマークする必要があります。複雑なテーブルとしてマークするには、テーブルのサブフォームの XML ソースに extras タグを次のように追加します。

</extras>
 <text name="complexTable">1</text>
 </extras>

complexTable​とマークされたテーブルはネイティブHTMLレンディションに従い、特定のスクリーンリーダーに対してより高いアクセシビリティサポートを提供します。 行幅を作成するには、テーブル内の 1 つの列で連続する複数のセルを選択し、選択範囲を右クリックして、「セルの結合」をクリックします。

注:​行幅の作成は一番左のセルでのみ機能します。

行を行ヘッダーとしてマークするには、その行のすべてのセルを選択し、選択範囲を右クリックして、「ヘッダーをマーク」をクリックします。

セルを列ヘッダーとしてマークするには、その列内の任意のセルを選択し、選択範囲を右クリックして、「ヘッダーをマーク」をクリックします。

新しい​AccessibleTable​形式の制限:

  • テーブルに行幅を設定する場合は、拡大可能なフィールドを使用できない
  • ネストされたテーブル(テーブルのセルに含まれている別のテーブル)は使用できない
  • 行幅はヘッダー行とヘッダーセルのみに適用できる
  • 使用可能なテーブルは標準テーブルのみである
  • 行幅が 1 を超えるテーブルではデータを事前入力できない

このページ

Adobe Summit Banner

A virtual event April 27-28.

Expand your skills and get inspired.

Register for free
Adobe Summit Banner

A virtual event April 27-28.

Expand your skills and get inspired.

Register for free
Adobe Maker Awards Banner

Time to shine!

Apply now for the 2021 Adobe Experience Maker Awards.

Apply now
Adobe Maker Awards Banner

Time to shine!

Apply now for the 2021 Adobe Experience Maker Awards.

Apply now