第27回リクリセミナー「Webアクセシビリティ はじめの一歩、キホンの「キ」とアリアの「ア」！」に参加してきました。

2016年2月20日に中央会計セミナールームで行われた「第27回リクリセミナー「Webアクセシビリティ はじめの一歩、キホンの「キ」とアリアの「ア」！」」に参加してきましたので、そのレポートです。
当日のツイートはこちらにまとめてありますので、当日の雰囲気を確認したい方はこちらをご確認ください。
第27回リクリセミナー「Webアクセシビリティ はじめの一歩、キホンの「キ」とアリアの「ア」！」ハッシュタグのまとめ
今回のセミナーは、90分のセッションが2つということで、長時間じっくりアクセシビリティに向き合う非常に良い機会でした。
では感想を。

今日から始めるWebアクセシビリティ、まずはココから！

最初のセッションは、インフォアクシアの植木さんによるアクセシビリティの基礎講座です。
植木さんの基礎編アクセシビリティの話は、僕の場合聞くのが3回目とかになるのでさすがに新しい発見があるということはありませんでしたが、毎回気持ちを引き締め直されるというか、ついつい忘れがちな気持ちを思い返させてくれるいい内容でした。
ちなみに、3回目にはなりますが毎回違った切り口や手法で内容を構成されてきているので、テーマと軸は同じですが、聞いていて非常に楽しいということは特筆すべき点です。
個人的には、プロレスファンの植木さんらしく随所にプロレスネタが盛り込まれているところや、最新ネタをさらっと仕込んでいるところなど「アクセシビリティ」という少し硬いテーマを少しでも楽しんで見てもらえるようにしようとされている植木さんの心遣いなどが感じられるのが素晴らしいなと思うんです。
なお、今回の場合だと「新しいページを作る」という前提でセッション内容が構成される形で、初心者でも具体的にイメージがしやすいようにされているところなどがとてもわかりやすいと感じました。
また、各要素での実際のroleの使用法やそのコードを丁寧に紹介されているので、まさに入門編として最適な内容だったと思います。
個人的にここは気をつけようと思ったのは以下でした。

• aria-lalbelledby属性で関連性を持たせるのは実際に使っていこう
• 使用時のストレスがサイトの印象を悪くする
• ラベルとしてplaceholderは使わない
• altはスクリーンリーダーで一気読みされる
• 必須を必須と分かるようにする

今回のセッションではユーザビリティの権威「ヤコブ・ニールセン」さんの名言bot（@jakob_usability）から幾つか名言が引用されていたのが面白かったです。
いくつか面白かったものを紹介します。

箇条書きにすると、ページの右側が余白になりやすいため、視線の動きが左側に固定され、各項目が目立ちやすくなる。通常文よりもユーザビリティが47%も高いという結果もある。

— ヤコブ・ニールセン (@jakob_usability) 2016, 2月 9

ウェブは「読む」のではなく、「ざっと見る」ものであることが数多くのユーザビリティの調査結果から証明されている。ウェブの文章を書くのなら、この事実を認識しておくべきである。

— ヤコブ・ニールセン (@jakob_usability) 2016, 1月 25

リンク名には「ここをクリック」といった具体性のない表現を使わないこと。

— ヤコブ・ニールセン (@jakob_usability) 2016, 1月 14

あと、アクセシビリティとは直接関係はありませんが、文章を読みやすくするテクニックの一つとして「箇条書きを利用する」ということを紹介されていたのも印象的でした。
上記で思った気をつけようというポイントもあえて箇条書きにしているんですが、箇条書きにすることによって文章の中の要素がデータ化され、人間が情報を認識しやすくなるという効果があります。
アクセシビリティが「すべての人が情報にアクセスできる環境」であることを考えれば、そこからさらに「理解を深める」「わかりやすく情報を表現する」ということもアクセシビリティの延長線上にあるものだと思っているので、この話のくだりはすごく心に刺さるポイントでした。
セッションの最後には質問コーナーがあったんですが、そこの流れがすごくよかったので、エピソードとして紹介します。
質問は「ユーザビリティが47%向上」したというセッション内で使われた話についてです。
この「47%上がった」というのは、僕もこの47％って根拠はどこなんだろうなとうっすら思ってたのにスルーした項目だったんですけど、この質問を受けた植木さんが、その場ですぐに根拠となるデータを紹介することができなかったんです。
セッションのためにデータを用意はされてたはずなんですが、パッと言われてこれですって即答できるのは難しいこともあると思うので、そのこと自体が悪いとも思わないんですけど、植木さんがすごいなと思ったのはそのあとのフォローです。
植木さんは次のセッションの終了後に、きちんとデータはどこからのものであるかというところを出したり、それについての植木さんの解釈をお話しされました。
この丁寧な対応と真摯な態度は植木さんの人間性をよく表しているなと思いますし、きちんと真面目に一つ一つのことに取り組む姿勢は学ぶべき点です。
また、同時にセッションで話された内容の信頼性につながるとも思うので、こういう姿勢には気持ちを引き締められました。

HTML5で今日から使えるWAI-ARIA

2つ目のセッションは大藤さんのWAI-ARIAのセッションです。
WAI_ARIAはWeb Accessibility InitiativeというW3C内のグループが策定したAccessible Rich Internet Applicationsという仕様の略語です。
簡単に言うと、スクリーンリーダーなどの支援技術上でより便利にWebを使うことができるようになる仕組みのようなものです。
WAI-ARIAは既存の要素にある機能を上書きや追加して使用することができるようになるので、スクリーンリーダーなどが最新のWebの仕様に対応していない場合でもその仕組みを利用できるようになります。
一番わかりやすい例でいうと、HTML5で採用された「main」属性をスクリーンリーダーなどでは認識することができないわけですが、WAI-ARIAで決まった「role=”main”」を使用することで「main」属性と同じ意味としてスクリーンリーダーが認識してくれるようになります。
ですので、要素を追加できるということではなく、機能を付加するものであると考えるとイメージが掴みやすいかと思います。
こちらの内容も細かく具体例とコードを説明してもらうセッションでした。
僕が気になった点は以下です。

• HTML5のようその総数は108。煩悩と同じ数だけ要素がある
• role属性は「ランドマークロール」「文書構造ロール」「ウィジェットロール」「抽象ロール」の4種類
• role=”presentation”の守備範囲が異常に広い
• aria-*は「関係を示す属性」「ウィジェット属性」「ライブ領域属性」「ドラッグ＆ドロップ属性」の4つ
• h7とかの見出しレベルを作ることができる。例）「role=”heading” ria-level=”7″」

テーブルレイアウトとrole=”presentation”

このセッションの中で僕が一番面白いと思ったのが「role=”presentation”」。
「role=”presentation”」はその要素が「表示目的のために使われるものである」ということを明示するもので、それ自体に意味はないという無効化の側面も持つというものです。
例えば、テーブルレイアウトをしている時に使用することでテーブルはただのdivと同じということになるわけです。
この「role=”presentation”」のすごい？ところは、例えば見出しとして存在しているhタグに「role=”presentation”」を追加したらdivと同じ意味になるという強力さにあります。
つまり、見出しすら見出しではないと言い切ることができるということです。
さらに、この「role=”presentation”」はその影響範囲が、内包される子要素に対しても適用されるという点です。
(tableの場合は、tr,th,tdに適用されるという意味合い)
なんというか、なんでもありな感じがして興味津々です。

よく使われるaria-*属性ベスト3

大藤さんがよく使われるaria-*属性から抜粋して紹介された以下3つは覚えておく方がよさそうなので記事にも残しておきます。

• aria-label属性
• aria-labelledby属性
• aria-controls属性

aria-label属性

aria-labelは支援技術の場合のラベルとして使用される属性。
支援技術環境下でのみ異なるラベルを設定したいときに使える属性です。

aria-labelledby属性

idと連携して関係性を明示することができる属性。
セッション中紹介されたタブとタブコンテンツのように、関係性をマシンリーダブルなものにするときに使える属性。
なんと値の複数指定が可能という側面もある。

aria-controls属性

aria-labelledby属性に似ているが、意味合い的には反対で、タブが制御しているのはどのidなのかを関連付ける属性。

このセッションを聴いて感じた感想

セッションの中で何度も大藤さんがおっしゃってたことでもありますが、「WAI-ARIAは属性を覚えるだけですぐに追加でき、
アクセシビリティ上の問題点を解決できる機能もあるので、使わないのはもったいない。」
という最後の一言に集約されているなど思いました。
今まであまり積極的に意識してこなかったという点ですごく反省点がありますが、これを機会にやってみようと思います。

まとめ

180分間がっつりアクセシビリティのことを考えるというのはすごくいい機会でした。
今までもアクセシビリティの話は何回か聞いていて、少しづつ対応はしているものの、気を引き締め直すためにもこういう機会を大切にしないといけないなと思っています。
セミナーに参加して情報だけ知っているつもりになって実際に何もやっていないというのは登壇されたお二方に対しても失礼だと思うので、まずやってみることから始めていこうと思います。
お土産でいただいたチェックシートは取り組みを始める上ですごくいいフォーマットだと思うので、活用しようと思います。
(これにSEO面でのチェック項目やユーザビリティのチェック項目を追加すればより現実的に使えるものになるぞと心躍る僕)
お話いただいた植木さん、大藤さん、主催の小山さん、イベントのスタッフの皆さん、参加された皆さん、ありがとうございました。