レイアウト用テーブルは落とし穴

以前、開発者はtable要素を使ってページのレイアウトを構築していました。その習慣は古いコードに残っており、現在でもアクセシビリティに実害を及ぼしています。

スクリーンリーダーは、すべてのテーブルをデータとして扱います。レイアウトに対しても行、列、セル数を読み上げるため、意味のない構造でユーザーを圧倒してしまいます。

レイアウト用テーブルでは、コンテンツが分かりにくい順序でセルに分散されることがよくあります。表示順序と読み上げ順序がずれてしまい、ユーザーは混乱します。

現代のレイアウトは CSS で行います。ページを配置するにはflexboxや grid を使い、table 要素は本当の表形式データにだけ使用してください。

項目を行または列に並べる場合、flexboxが自然な選択です。テーブルの意味論に妨げられることなく、コンテンツに合わせてレイアウトを調整できます。

行と列を組み合わせる場合は、CSS のgridによって本格的なレイアウトシステムを利用できます。ページの見た目と、マークアップが表す意味を分離できます。

CSS でレイアウトすれば、HTML で header、nav、main などの実際のランドマークを使用できます。スクリーンリーダーのユーザーには、セル数ではなく意味のあるページ構造が伝わります。

どうしても古いレイアウト用テーブルを削除できない場合は、role=presentationを追加してください。テーブルの意味論が取り除かれ、支援技術はそのグリッドを無視します。

role=presentationは一時的な応急処置として扱ってください。本当の解決策は CSS へ移行することです。問題を隠すのではなく、取り除くことができます。

caption がなく、th もなく、セルに値ではなくセクション全体が入っている場合は要注意です。このパターンは、ほぼ確実にリファクタリングすべきレイアウト用テーブルを示しています。

どのテーブルにも、簡単な問いを投げかけてください。関連する値を行と列で構成されたデータとして示していますか。そうでなければ、それはレイアウト用テーブルなので、CSS に置き換えるべきです。

tableでページをレイアウトしてはいけません。flexbox または grid を使い、table は実際のデータのために確保してください。role=presentation は古いコードに対する一時的な回避策としてのみ扱います。