第7回okayama-js勉強会「実践 WAI-ARIA」に参加

写真:グループワーク後のまとめが行われている様子
昨日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-expandedaria-hiddenの解説、属性を追加する位置などを発言させていただきました。普段JavaScriptでウィジェットを実装する際にWAI-ARIAを実装している(=JavaScirptにaria-*属性を記述している)ことからHTMLに直にaria-*属性を追加する発想がなく、最初からハードルを上げすぎたと反省しております。

aria-*属性を操作するにはJavaScriptの知識も必要となりますし(jQueryの操作で時間を取られたり...)、webアクセシビリティの基本知識も大事だと思うので、グループワークを進めるのはなかなか大変だなと感じました。

講師の澤田さん、主催の前川さん、ありがとうございました。