DIVEJavaScriptの設定を有効にしてご利用ください。無効の場合、当サイトを正常にご利用できません。DIVE界隈で徐々に盛り上がってきているウェブアクセシビリティ熱。その波に乗り遅れまいと、ようやく本格的に勉強・実践を始めました。レベルAに準拠することが要件のお仕事をいただきまして、勉強しながら取り組んでいるところです。そんな私の前に立ちはだかったもの...それは...列固定・横スクロールのある表デザインデータには、表が横長〜に横たわっておりました。その下にはスクロールバー。固定表示された1列目のセル...経験上、スクロールあり+列固定のtableは、一筋縄ではいかないことを知っています。ある実装方法としては、固定部分とスクロール部分を分けて、別tableにしてしまう方法。それではアクセシビリティを確保することができません。ひとつのtableになっていなければ、音声読み上げ機能でそれぞれの内容を紐付けることができないからです。悩むこと半日...閃いた。それを読み上げないようにすればいいんじゃない?!ということで、やってみました。サンプルページやってみたことHTMLHTML側では、tableを包含するdiv要素を2重に配置します。内側のdivはtableをスクロールさせる用、外側のdivは複製した1列目だけのtableを位置固定で配置する用です。class属性)を付けておきます。data-scrollTable="true"></table></div></div>JavaScriptJavaScriptでは、ざっくり↓こんなことをします。0;等のスタイルを指定しておく)さらに音声読み上げ機能で2重に読み上げられることがないよう、aria-hidden="true"も加えておきますそれを、外側のdiv要素(ここではdiv.sample-wrapper)の子要素として挿入しますこれでもOKなのですが、このままだとスクロールバーが固定表示された列の下にまで広がっていて(その下に元の1列目があるから)、スクロールエリアじゃないのに、なんかカッコ悪い...ですよね...ということで、↓以下を追加します。作成した固定表示用のtableの横幅を取得しますその数値を、内側のdiv要素(ここではdiv.sample-scroll)のmargin-leftの値に設定します(borderがある場合は、線がダブるので、その分をマイナスします)元のtableにもclassを付与するなどして、1列目のセルを表示上つぶします(幅が0になるようにCSSで調整します)これで、スクロールバーがスクロールするエリアだけに付く形になりました。やったね!まとめ多少強引な方法ではありますが、アクセシビリティを損なうことなく、また、たとえJavaScriptが無効の状態でも問題ない(列固定なしのスクロールになるだけな)ので、まぁいいかなって。...?まぁ、こういう横長〜の表がそもそもアクセシビリティいまいちなんじゃないのかな...って気もしなくもないですが...。(誰も褒めてくれないので、自分で自分を褒めるスタイル)ウェブアクセシビリティの配慮、実践してみて思いましたが、要件としてアクセシビリティ対応を求められているからやる、ということではなく、これからはどんなウェブサイトでもきちんとアクセシビリティに配慮したコーディングを心がけていきたいなと。誰でも、どこからでも、どんなデバイスからでも、情報にアクセスできるというのがウェブの良さ。それを損なうようなコーディングではいけませんよね。良いウェブのために自分にできることを、しっかり実践していこうと、改めて思いました。ありがたいご指摘をいただきましたので、追記します。(2018.2.14)要約を付けましょうそもそもこういう横長〜の表を否応なしに読み上げ対応させること自体が、アクセシブルではないと思う、という旨のご指摘をいただきました。(まとめのところで自分でも軽〜くツッコミを入れつつもスルーしてしまっていました...ダメですね...配慮がまったく足りていませんでした。)ということで、表の要約を加えてあげると良いですね。要約の読み上げを聞いて、その上で詳細を見たいと思う場合には、お手数ですが表の内容を読み進めていただく。ない場合には、要約で概要をつかんだ上で次に進んでいただく。いうことが可能になります。その要約ですが、aria-describedby属性を使うのがいいかなと思います(summary属性はhtml5で廃止になってしまいましたし)。私の検証では、残念なことにiOSのVoiceOverでは読み上げてくれませんでした...が、読み上げ機能の利用者に対して説明を付けるなら、これがいいと思うのですよね。他になにかいい方法をご存知でしたら教えていただきたいです><表の「ヘッダ」について固定する列のことを、公開当初は「列ヘッダ」と表現していたのですが、列に対して「ヘッダ」という表現は適切ではない、という旨のご指摘をいただきました。確かに、どう表現したら良いのか(伝わるのか)悩んだ部分ではあります。ヘッダというのはtheadで表現される表頭のことで、行に対して使用すべき表現だそうです。「列ヘッダ」と書いていたところを「1列目」「固定表示された列」等の表現に修正いたしました。合わせて、本来表には正しい意味でのヘッダが必要とのことなので、サンプルページの表にもヘッダの行を追加いたしました。(あまり良いサンプルでなくて申し訳ないです...)追記のまとめマークアッパーとしましては(なのかどうかわからないですけども)、与えられたデザイン・与えられたデータ・与えられた条件の中で、なんとかしようとしてしまいがちですが、そもそもその形でないといけないの?!というところから考えてみることも必要かもしれません。いうことに、ご指摘をいただき気付くことができました。横長〜でスクロールしないと見られない表なんて、目で見てマウスで操作できる人であっても、決して見やすいとは言えないかもですし...。制限の中でなんとかするのもお仕事ですが、他のより良い伝え方を探るのもお仕事ですよね、そうですよね。今回は全体的に配慮の足りなさを知ることとなり、とても良い経験になりました。Typeではじめる構造化データモンスターダイブの2019年を振り返る。創業10周年を振り返る。Hot?中華製タフネススマホを買ってみた。