タイトルが全てですが、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つであるような気がしますので、それが利用できないのは、惜しいですね。