tableoverflowプロパティ使いたさでtabledisplay:blockしてはいけない

 タイトルが全てですが、RWD対応でtable要素にoverflowプロパティ使いたさで table要素に直接display:blockをしてしまうこと、結構されがち(な気がします)。これをしてしまうと、スクリーンリーダーがtable要素をテーブルを認識できないというアクセシビリティ上の問題が発生します。

 ブラウザが支援技術にテーブルとしてアクセシビリティオブジェクトを渡さないことが原因で、詳しくは以下の @kazuhito さんとみるくさんのブログに詳しいです。

例えば、スクリーンリーダーには、表に特化した機能を備えていますが、display:blockされることで利用できなくなる可能性が高いです。

overflowプロパティはサイズの確定されたブロック要素に効くようです。display:blockを使用せずにtableoverflowプロパティ使う場合は

  1. table要素にきっちり高さと幅を指定する(tableもブロック要素なのでこれで効くみたい。なお、サイズ指定はmax-widthなどでは不可らしい)
  2. table要素の上にdiv要素などの別のブロック要素でラップしてそのdiv要素などにoverflowプロパティを指定する(div要素は幅は横にめい一杯などサイズを指定しなくてもサイズをデフォルトで備えている、のか?)
  3. (2018/12/30 @mondo_ さんのツィートを受けての追記)table要素にtableの属性値をrole属性を追加する(Chromeはそれでdisplay:blocktableでもテーブルとしてアクセシビリティオブジェクトを生成するようです)。   

のいずれかでしょうか。サイズを固定する1はRWD対応の中ではなかなかしんどいので、現実的には2なのでしょうか。3も選択肢になりますが、role属性に対応していないUAも視覚障害者の利用する環境にはあるようですので、そのUAの対応次第かなと。

 なお、いわゆる「レスポンシブテーブル」というものも、少なくとも現時点では、tabledisplay:blockにする必要があるようですので、同じ理由でアクセシビリティ的にはやらない方がよいようです。モバイル端末などの小さいスペースの画面では、「レスポンシブテーブル」は、わかりやすい表のUIの1つであるような気がしますので、それが利用できないのは、惜しいですね。

コメントを残す

メールアドレスが公開されることはありません。 * が付いている欄は必須項目です

このサイトはスパムを低減するために Akismet を使っています。コメントデータの処理方法の詳細はこちらをご覧ください