タイトルが全てですが、RWD対応でtable
要素にoverflow
プロパティ使いたさで table
要素に直接display:block
をしてしまうこと、結構されがち(な気がします)。これをしてしまうと、スクリーンリーダーがtable
要素をテーブルを認識できないというアクセシビリティ上の問題が発生します。
ブラウザが支援技術にテーブルとしてアクセシビリティオブジェクトを渡さないことが原因で、詳しくは以下の @kazuhito さんとみるくさんのブログに詳しいです。
- table要素をスクリーンリーダーが表として扱うかはCSS次第だったりする件 | 覚え書き | @kazuhito
- Re: A Responsive Accessible Table – White Stage
例えば、スクリーンリーダーには、表に特化した機能を備えていますが、display:block
されることで利用できなくなる可能性が高いです。
overflow
プロパティはサイズの確定されたブロック要素に効くようです。display:block
を使用せずにtable
にoverflow
プロパティ使う場合は
table
要素にきっちり高さと幅を指定する(table
もブロック要素なのでこれで効くみたい。なお、サイズ指定はmax-width
などでは不可らしい)table
要素の上にdiv
要素などの別のブロック要素でラップしてそのdiv
要素などにoverflow
プロパティを指定する(div
要素は幅は横にめい一杯などサイズを指定しなくてもサイズをデフォルトで備えている、のか?)- (2018/12/30 @mondo_ さんのツィートを受けての追記)
table
要素にtable
の属性値をrole
属性を追加する(Chromeはそれでdisplay:block
なtable
でもテーブルとしてアクセシビリティオブジェクトを生成するようです)。
のいずれかでしょうか。サイズを固定する1はRWD対応の中ではなかなかしんどいので、現実的には2なのでしょうか。3も選択肢になりますが、role
属性に対応していないUAも視覚障害者の利用する環境にはあるようですので、そのUAの対応次第かなと。
なお、いわゆる「レスポンシブテーブル」というものも、少なくとも現時点では、table
にdisplay:block
にする必要があるようですので、同じ理由でアクセシビリティ的にはやらない方がよいようです。モバイル端末などの小さいスペースの画面では、「レスポンシブテーブル」は、わかりやすい表のUIの1つであるような気がしますので、それが利用できないのは、惜しいですね。