昨日10日、倉敷市の倉敷物語館で開催された『第7回okayama-js勉強会「実践 WAI-ARIA」』に参加してきました。WAI-ARIAは2010年頃から社内外で開催されている勉強会で学んできていたので、知識の確認・アップデートを目標として参加させていただきました。また、主にFacebookで参加している「広島フロントエンド勉強会」においてもしWAI-ARIAを題材として話すとしたら...ということも考えたいという思いがありました。（まだやるとは言っていませんw）
勉強会はまず講師の澤田さんからWAI-ARIAの概要について、図解やVoiceOverでの読み上げを交えながらわかりやすく解説して頂きました。「ARIA in HTML」や昨年10月に勧告候補となっている「Accessible Rich Internet Applications (WAI-ARIA) 1.1」をよく確認しなければと改めて思った次第です。また、「ARIA Validator」もインストールしただけで使用していないので、試してみたいと思いました。
休憩をはさんだ後はいよいよグループワーク。澤田さんがjsdo.it準備された「アコーディオンウィジェット」と「タブウィジェット」について、WAI-ARIAを用いて下記の3点（スライドから引用）を改善してみようという内容でした。
- そのUIオブジェクトは何なのかは分からない
- 開／閉、選択／非選択状態は視覚でのみ伝わる状態
- コントローラ（ラベル）とパネル（コンテンツ）の関係も不明
グループワークなのでWAI-ARIAを普段使っている私が答えをストレートに話してもいけないと思い（僭越ながら）、アコーディオンをどのようにしていくと目標が満たせるのか、aria-expandedやaria-hiddenの解説、属性を追加する位置などを発言させていただきました。普段JavaScriptでウィジェットを実装する際にWAI-ARIAを実装している（＝JavaScirptにaria-*属性を記述している）ことからHTMLに直にaria-*属性を追加する発想がなく、最初からハードルを上げすぎたと反省しております。
aria-*属性を操作するにはJavaScriptの知識も必要となりますし（jQueryの操作で時間を取られたり...）、webアクセシビリティの基本知識も大事だと思うので、グループワークを進めるのはなかなか大変だなと感じました。
講師の澤田さん、主催の前川さん、ありがとうございました。