先日大阪で開催された「D2D アクセシビリティ勉強会　〜WAI-ARIAでアクセシブルにしてみよう〜」に参加しました。Web ページ (特に JavaScript を使った動的なもの) のアクセシビリティを高めていくための話と演習です。

前半

前半は SAWADA STANDARD DESIGN の澤田さんによる発表「WAI-ARIAの考え方と使い方を整理しよう」です。

• WAI-ARIA は要素 (の役割) と属性を追加する
  • 構造や変化をユーザーエージェントに伝える
• ロール (役割) にはランドマークロール、文書構造ロール、ウィジェットロールがある
  • HTML にもともと同じロールの要素があるのならそれを使えばいい (無理に WAI-ARIA のロールを指定する必要はない)
• ロールは文書構造やウィジェットを示すだけであり、見た目や機能を変化させるわけではない
  • 見た目を変化させるには CSS が必要
  • 機能 (挙動) を変化させるには JavaScript が必要
• 実際に支援ソフト (スクリーンリーダーなど) が対応しているか
  • macOS / iOS には VoiceOver、Android には TalkBack、Windows にはナレーターが標準で付属している
    • VoiceOver のローター機能でランドマークを読み上げられる
  • 日本では PC-Talker のシェアが高いので、そこを押さえておきたい

後半

後半はグループごとに分かれ、実際に WAI-ARIA を使ってみる演習です。グループごとに「新着情報」「アコーディオン」「タブメニュー」の三つのお題の中から二つを選び、WAI-ARIA の属性を適宜追加していきました。回答発表時には VoiceOver での読み上げ確認も行われました。

• お題「新着情報」(回答一覧)
• お題「アコーディオン」(回答一覧)
• お題「タブメニュー」(回答一覧)

各グループでの議論のポイントおよび回答例はみるくさんの「D2D アクセシビリティ勉強会 〜WAI-ARIAでアクセシブルにしてみよう〜を開催しました。 - White Stage」に掲載されています。

感想など

「新着情報」では「続きを読む」リンクにラベルや説明を追加するか議論し、私のグループでは「過不足なく」という観点から (説明過剰にならないように) 結局追加しませんでした。しかし、視覚障碍者は Tab キーでリンクだけたどっていくこともあるので、リンクにも何の続きかわかるようラベル (aria-labelledby 属性、aria-label 属性) や説明 (aria-describedby 属性) を付けたほうがいいとのこと。

回答例を見ると、

<dl>
  ...
  <dt id="day01">2016年5月8日</dt>
  <dd>
    <p id="headline01">第6回 D2D アクセシビリティ勉強会でアクセシブルなフォームを作成！</p>
    <a id="more01" href="news01" aria-labelledby="day01 headline01 more01">&gt;&gt;続きを読む</a>
  </dd>
</dl>

のように aria-labelledby 属性に自分自身の ID を指定しており、そんなこともできるのかとびっくりです。

CMS で生成された内容に適用しやすいよう、新着情報への WAI-ARIA の属性の指定を JavaScript で行うというチームもありました。サーバー側でやるかクライアント側で付与やるかはさておき、指定を (そしてできることなら検証も) 自動化していくのは、広く利用されるために重要なことでしょう。