2017年3月5日日曜日の14時00分から開催されたD2D アクセシビリティ勉強会 ～WAI-ARIAでアクセシブルにしてみよう～で、いつものように私は司会進行と説明を務めました。

まず、講師の澤田(@SawadaStdDesign)さんから「WAI-ARIAの考え方と使い方を整理しよう」をテーマにお話ししていただきました。その時に使用された澤田さんの資料です。

澤田さん曰く早口の弾丸トークだったらしいのですが、誰も早口だという事には気づかないくらい、いつも通り分かりやすい説明をしていただきました。

グループに分かれて「タブメニューと新着情報」か「アコーディオンと新着情報」かを選んでアクセシブルにしてみよう

4グループに分かれてもらい(1グループ4名)、事前に用意しておいたWAI-ARIAの記述が入っていないタブメニュー、アーディオン、新着情報それぞれにWAI-ARIAの記述を追記してアクセシブルなものに仕上げてもらう作業を行いました。

グループ内で活発に意見交換をしながら作業を進めていただいてたのですが、思っていたより作業時間がかかってしまい1時間では時間が足らなかったので、時間を延長してそれぞれ2つの課題を仕上げていただきました。

議論しながらゴリゴリコードを書いている参加者の皆さんの様子

各グループ 出来上がったものを発表

グループごとに、どのようにWAI-ARIAの記述をしたのか又苦労した点、議論に上がった事等感想も合わせて発表してもらい、最後に実際にスクリーンリーダー(Mac OS X VoiceOver)でどのように読み上げるかの確認まで行いました。

グループAの発表内容

アコーディオン

• 追加のロール指定は出来ないかと、どんなロールがあるか見たけれどぴったりくるのがなかった。
• タブというロールもあるけど、タブは基本的に1度に1つのパネルしか開かないのに対し、このアコーディオンは1度に2つのパネルが開くのでタブではなさそう。
• h2要素の中にbutton要素があるなら、h2要素にrole="button"をつければいいのでは？という意見が出たが、それではボタンの中にボタンがある構造になってしまうので良くないのではないかという事になりこちらも不採用にし、ロールは特に付けないでいこうという事になった。
• aria-expanded属性で開閉状態を表現し、ボタンとパネルの関係を明示するのにaria-controls属性を使い、さらにパネルの表示・非表示を伝えるのにaria-hidden属性を使った。
• その後、まだ追加出来るステートはないかと議論し、「aria-selected属性が付けられないか？」という意見が出たけど、適用出来るロールにbutton要素がなかった。
• 「aria-selected属性を使うのにoptionを使うのはどうか？」という意見も出たけれど、optionはlistboxロールの中にoptionがあるという構造であって、listboxというのは、HTMLのselectedのようなものだから、このアコーディオンとはまた違うという事で、listboxロールもaria-selected属性も使わない事になった。

グル－プAが作成したアコーディオンはこちら

新着情報

• どんなロールが適用できるか話し合った。
• dl,dt,dd要素にはデフォルトのロールがARIA in HTMLで指定されていて、ddのdefineは用語の定義というような意味なので「このままでいいのか？」と気にはなったが、かといってこれといって付けるものがなかったので、role属性は付けなかった。
• dt要素とdd要素の関係についての話が出てdt要素はラベルではないかという事になり、dd要素にaria-labelledby属性を付けてdt要素を参照するようにした。
• 更に、日付部分は何の日付かと言うと新着情報の日付だから、単に日付だけ読み上げられるより新着情報の日付であるとした方が良いのではという事になり、aria-describedby属性を使ってh2要素を参照するようにした。
• 続きを読むリンクは3つあり、リンクの区別がつかないからどうすれば区別出来るだろうという疑問が出た。
• リンクの区別を付ける方法として2つ意見が出た。1つ目は、aria-label属性を付けて違うラベルを付けるという事。2つ目は、aria-describedby属性を付けて直前のp要素と関連付けるという事。けれど、読み上げは上から順に読み上げるからかえって冗長になるだけじゃないかという事になり何も付けなかった。

グル－プAが作成した新着情報はこちら

グループBの発表内容

タブメニュー

• タブのul要素に対してrole="tablist"を付け、li要素にはrole="tab"を付けた。
• 状態を示すためのaria-selected属性を付け、tabindex属性は元から付いていたのでそのままにした。
• section要素には、role="tabpanel"とaria-hidden属性を付け、aria-labelledbyでタブの操作する方と関連付けた。
• JavaScriptでタブの「Section 2」を選択するとそのaria-selected属性の値はtrueになり、タブの「Section 1」のaria-selected属性の値はfalseになるようにした。
• パネルもJavaScriptで選択と共にaria-hidden属性の値が変わるようにした。

グル－プBが作成したタブメニューはこちら

新着情報

• h2要素にidを付け、dl要素にaria-labelledby属性を付けてWhat's Newとdl要素を関連付けた。
• a要素にaria-labelledby属性を付けて直前のp要素にidを付けて関連付けた。(関連付けた内容だけ読み上げて、a要素のテキスト「続きを読む」は読み上げなかった)
• ちゃんと関連付けたのに意図したようにスクリーンリーダーが読み上げてくれなかったので「なんでだろう？」と30分も悩み、もう一度じっくりコードを見直してみるとariaの記述が抜けていた。

グル－プBが作成した新着情報こちら

グル－プCの発表内容

アコーディオン

• 記述はグループAと一緒。
• 初め、HTMLにWAI-ARIAの記述を書き、その後CSSとJavaScriptの記述を見ておかしい事に気づき「JavaScriptを修正するんだ！」とわかったけど、どこを直せばいいかわからないという意見が出ながらも試行錯誤しながら仕上げた。
• スクリーンリーダーでの確認はしてない。
• JavaScriptの記述を少し間違えた。

グル－プCが作成したアコーディオンはこちら

新着情報

• dl要素はHTML5から説明付きリストに変わったので、dd要素の内容は、日付の説明じゃないという話をし、日付にidを付けdd要素にaria-labelledby属性を付けようとしたけど、「その後のa要素に秘密があるんじゃない？」という意見が出でa要素が怪しいとしたらどうしたらいいかを考え、今日初めて知ったaria-describedby属性を使ってa要素とdt要素とdd要素の中のp要素の2つを関連付けた。(a要素のテキスト「続きを読む」を最初に読み上げた後関連付けた内容を読み上げた)
• CMSを使われる事が多いというのと手書きでは大変だという事で、idとaria-describedby属性はJavaScriptで付けるようにした。
• 後で気づいたが、dl要素は順番にインデックスされていくので、dt要素もdd要素も上から1,2,3になってしまうので、インデックスのところを適当にやってしまった結果、1の次が2になってしまって残念な感じになってしまっているので、将来的に直さないといけない。
• CMSの場合は、自動で書き出して状態によって読み込まれる内容が変わったりするので、その事を考えるとその辺りをJavaScriptで行うのもありなんじゃないかという話し合いがあった。

グル－プCが作成した新着情報はこちら

グル－プDの発表内容

アコーディオン

• タブは見た目の話ではなく、見えてるか見えてないかがタブじゃないかと思ったので、ラップしている所をrole="tablist"にし、それを入れている子のh2要素をrole="tab"にした。
• 複数選択出来る事をaria-multiselectable="true"で明示し、button要素にaria-selected属性とaria-expanded属性を付けdiv要素にaria-hidden属性を付けた。
• p要素にrole="tabpanel"にしたけど、見直したらaria-hidden属性を付けているdiv要素に入れるべきだと気づいた。
• aria-labelledby属性もp要素ではなく、h2要素に入れるべきだった。
• この記述では「下位項目が隠されました」と読み上げないからなんでだろうかと思っていたけど、role="tab"じゃなかったんだと思った。(これはrole="tab"が原因ではなく、button要素に付けているaria-selected属性とaria-expanded属性をh2要素に付け、aria-labelledby属性ではなくaria-controls属性もh2要素に付けてdiv要素に振っているidと関連付けると開閉状態を読み上げる。by みるく サンプルコード)(aria-expanded属性で展開／折り畳みを行う場合は、要素またはaria-controls属性で親子関係にする by 澤田さん)

グル－プDが作成したアコーディオンはこちら

新着情報

• a要素にaria-label属性を付けた。
• dl要素、dt要素、dd要素にはそれぞれロールがあるので、a要素が怪しいと思った。
• a要素は「続きを読む」ばかりだから、aria-label属性の値にリンク先の内容を端的に記した内容を入れた。
• けれど、CMSで実装するには上記の方法では工数がかかってしまうと思った。

グル－プDが作成した新着情報はこちら

グループDがアコーディオンにrole="tablist"を使用した事から、このアコーディオンにrole="tab"を記述する事は有効なのか？という疑問が出て、「タブの定義とは？」についてみんなで意見を交わしました。その時出た意見は下記の通りになります。

• 操作性からタブではないのではないか。タブのキーボード操作は、左右の矢印キーで動かすけれどそれが出来ないのでタブは妥当じゃない。
• タブは複数開かないからタブという表現は合わない。
• 1つしか開かないアコーディオンだったらタブも有効。
• 全部隠しているからタブじゃない方が良かった。
• WAI-ARIA1.0の日本語訳には、単一の選択可能なとあるので複数選べるものはタブではないのではないか？
• WAI-ARIA1.0の原文には、複数選択可能とあるので複数選べるものでもタブとしても良いと思う。

澤田さんが勉強会後調査されてたので、それに私も加わり調査した結果、今回のアコーディオンは見出しとボタンがあり元の要素のセマンティクスを優先すべきなので、role="tablist"を適用すべきではないけれど、元の要素のセマンティクスを優先する必要性が低い（divとか）場合は、role="tablist"を適用しても構わないと判断しました。

そして、複数選択可能なものはタブとして良いのかどうかは、tablistロールで定義されるタブを複数同時に開いても、aria-multiselectable属性を設定すれば大丈夫という結論になりました。

タブメニューとアコーディオンと新着情報のアクセシブルな例の紹介

最後に私が作成したタブメニューとアコーディオンと新着情報のアクセシブルな例を紹介＆説明&VoiceOverでの読み上げを聞いていただいて勉強会を締めくくりました。

• タブメニューのアクセシブルな例
• アコーディオンのアクセシブルな例
• 新着情報のアクセシブルな例

上記の新着情報ですが、皆さんの発表内容を聞いて日付までa要素と関連付ける必要はないと思いました。

今回の勉強会でツイートされたものをまとめたD2D アクセシビリティ勉強会 ～WAI-ARIAでアクセシブルにしてみよう～ - Togetterまとめもご覧ください。

まとめ

今回は、久しぶりに予定時間をオーバーしてしまい「ワークショップと休憩の時間管理をもっと上手にしなきゃいけなかった」と反省しております。ただ、後半久しぶりに全員で1つの疑問について考え意見を出し合えた事はD2Dの勉強会らしく有意義な時間になったんじゃないかと思います。せっかく色んな職種の人が集まって一緒に作業するのだから、様々な意見が飛び交いみんなで考えてベストな答えを出していき切磋琢磨して1つでも多くの得れるものを持って帰ってもらいたいという想いでやっているので議論する時間はこれからも大事にしたいです。

今回、WAI-ARIAの話を初めて聞く方からもう使っている方までいらっしゃいましたが、それぞれに学んでいただける事があったように思います。WAI-ARIAはrole属性から始めれば入りやすいのですが、勉強すればするほど奥深く難しいと皆さんの発表を聞きながら思うと共に、やはりWAI-ARIAだけをテーマにした会を開催して良かったと実感しました。

最後になりましたが、年度末のお忙しい中ご参加いただいた皆様、ありがとうございました。また、勉強すべきテーマなど出てきましたら皆さんと一緒に勉強していければと思っております。