table要素をスクリーンリーダーが表として扱うかはCSS次第だったりする件

2017年12月4日 著

みるく姐さん@milk54さんが、Web Accessibility Advent Calendar 2017の2日目のために、Re: A Responsive Accessible Tableという記事を書いてくださいました。その中で、A11YJ Slackの#q_and_aチャンネルにおける自分の発言を引用してくださったのですけど、それでふと思ったのがアクセシビリティオブジェクトの存在って実はあまり認知されていないかもしれない、ということです。別の表現をするなら、CSSをどう書こうともマークアップで意図したセマンティクスが変わることは無いと信じて疑わない人が少なく無いかもしれない、ということ（自分もかつてはその一人でした）。

@milk54さんの立てた「NVDAがなぜCSSでdisplay: blockにすると「テーブル」と読み上げないか？」という問いの裏には、なぜマークアップした通りのセマンティクスがスクリーンリーダーに渡されないのだろう、という疑問が透けて見えます。その疑問を解消するには、スクリーンリーダーなどの支援技術とブラウザーをあいだを仲立ちしている存在のアクセシビリティAPIやアクセシビリティオブジェクト、アクセシビリティツリーについて知る必要があり、その目的にうってつけと思い紹介したのが@Takenspcさんのスライド、アクセシビリティオブジェクトについてです。

加えて、とどめの一撃に紹介したのがSOTB5 - What even is a table? A quick look at Accessibility APIs - Edd Sowden on Vimeoという最高に笑える？プレゼン動画です。スライドはWhat even is a table? A quick look at Accessibility APIs // Speaker Deckで公開されています。このプレゼン/スライドによって、どういうマークアップからどういうアクセシビリティオブジェクトが生成されているかを、まさにtable要素を例に理解することができます。同僚の黒澤さんが2014年のCSUNでの講演に用いたスライド、Accessibility and the Power of CSS: Disparities between Ideals and Realityも合わせてご覧いただくと、さらに理解が深まるかと思います（こちらはCSSのみならずWAI-ARIAのrole属性との絡みにも言及されている）。

まぁ僕もいつの出来事だったか忘れましたけど、自分でマークアップした通りのセマンティクスでスクリーンリーダーに読み上げられない場合があると知った時には、それはもうひっくり返るくらい驚いたし（大げさ）、ブラウザーの野郎なんてことしてくれるんだ地獄の業火に焼かれるべきとか思いましたが（更に大げさ）、おかげでdisplayプロパティを使ってまで無理やりビューポート内に表を収めるような（世にレスポンシブテーブルなどと呼ばれる）実装は激しく忌避するようになりましたというか、そういう実装はしたことないです。だって表としてのセマンティクスが（ブラウザーによっては）伝わらなくなってしまうんですもの。