データの表として読まれたり、順番が崩れたりするレイアウト用の表

ある雑貨店が、毎週メールマガジンを送っています。「今週の新入荷」の欄には三つの商品が横に並び、それぞれ写真の下に名前と価格があります。$18のホーローマグ、$32のリネントート、$24の斑点マグです。このメールは、今も多くのメールと同じく表でレイアウトを組んでいます。従来版のWindows用OutlookはWordのエンジンでメールを表示し、CSSのレイアウトのほとんどを無視するためです。同じHTMLは「ブラウザーで表示」のページにもなります。

この並びが崩れる作り方には、よくあるものが二つあります。一つは、Foundation for Emails のように各列を th で書き出すメール用フレームワークのテンプレートを使う場合です。スクリーンリーダー利用者が商品の欄に来ると、行数と列数とともに表が読み上げられ、続いて各商品が列見出しとして読まれます。比べる数字の見出しのように聞こえます。もう一つは、格子を行ごとに組む場合です。写真を三つ並べた行、名前を三つ並べた行、価格を三つ並べた行に分けると、画面では列がきれいにそろいます。先頭から読むと「ホーローマグ、リネントート、斑点マグ、$18、$32、$24」と聞こえ、トートが$32だと知るには数えて戻る必要があります。

表のマークアップは、内容が見出しの下に行と列で並んだデータであることを支援技術に伝えます。WCAG 1.3.1「情報及び関係性」は、コードの構造が画面に示したものと一致することを求めています。商品を横に並べるだけの表に見出しのセルがあれば、存在しない構造を伝えることになります。失敗例F46は、レイアウト用の表の th、caption、summary を挙げています。ブラウザーは表がデータかどうかを推測します。Chromeは罫線も th もない表をアクセシビリティツリーでレイアウト用の表とし、スクリーンリーダーはレイアウト用の表のセルをただの内容として読みます。しかし th があれば、推測の余地はありません。Chromeのアクセシビリティツリーでは、一つ目の作り方の表は table になり、列見出しの名前は「Enamel mug $18」「Linen tote $32」になります。

スクリーンリーダーは表を1行ずつ、左から右へ、マークアップの順に読みます。WCAG 1.3.2「意味のある順序」は、順序が意味を持つときに、コードの順序が意味の通る順序であることを求めています。二つ目の作り方では、写真、名前、価格は列ごとに縦にまとまっているのに、読み上げは行に沿って横に進みます。順に読むと意味が通らないレイアウト用の表として、失敗例F49にあたります。この表に presentation を付けても、隠れるのは表であって、順序は変わりません。

スマートフォンでも、スクリーンリーダー利用者はメールをマークアップの順に一つずつスワイプして読みます。価格が名前から何回もスワイプした先にあるのは、パソコンで聞くときと変わりません。

10グループ中2グループに影響

• 全盲 （影響あり）
• 弱視 （影響なし）
• 色覚 （影響なし）
• ろう （影響なし）
• 難聴 （影響なし）
• 発話 （影響なし）
• 手の操作 （影響なし）
• 筋力・可動域 （影響なし）
• 認知 （影響あり）
• 光過敏 （影響なし）

• 視覚を使わない 商品の前に表が読み上げられ、各商品は列見出しとして読まれるため、比べる数字が続くのだと思ってしまいます。行ごとに組んだ格子では、商品名が三つ続いた後に価格が三つ聞こえ、どれがどれかを数えて戻る必要があります。
• 言語・認知・学習の能力が限られる ディスレクシアのある人が使うこともある読み上げツールもマークアップの順に読むため、行ごとに組んだ格子では、価格が商品名から離れたところで読まれます。

axe には、レイアウト用の表の見出しのセルを確かめるルールがありません。一つ目の作り方では th-has-data-cells ルールが見出しのセルを要確認として挙げるだけで、二つ目の作り方はこのルールを通ります。表がデータを持っているか、読む順に意味が通るかを、コードだけで判断できるツールもありません。この診断は、一つ目の作り方のように th が表をまるごと含んでいて、レイアウト用と分かる場合を問題として報告します。残りの、レイアウト用に見える表（ほかの表を含む表、presentation が付いた表、見出しのセルがなく画像の行が文字の行の上にある表）には、スクリーンリーダーが読む順にセルの文字を並べた確認候補を出します。画像の行が文字の行の上にあれば、そのことも伝えます。AIによるコード生成で Foundation for Emails の <columns> タグを使ってメールを書いても、ビルドすると同じ th のセルになります。th を書き出すのは、AIではなく、フレームワークのコンパイラーである Inky だからです。