D2D アクセシビリティ勉強会 ～WAI-ARIAでアクセシブルにしてみよう～ ― 2017年03月20日 12時09分

先日大阪で開催された「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 で行うというチームもありました。サーバー側でやるかクライアント側で付与やるかはさておき、指定を (そしてできることなら検証も) 自動化していくのは、広く利用されるために重要なことでしょう。

WAI-ARIA のウィジェットロールの指定は React のような宣言的な UI 記述と相性がよさそうです。「WAI-ARIA 対応のアクセシブルなタブ UI を React で実装する ::ハブろぐ」という記事もあります。

一方、[aria-hidden="true"] { display: none !important; } のように CSS の属性セレクタを使うという話もありましたが、こちらは BEM などの命名規則と組み合わせるとどうなるのか、気になるところです。

懇親会では tabindex 属性に二つの意味があって分かりづらいという話が出ました。その要素にフォーカスできるかどうか (tabindex 属性が存在するかどうか) と、Tab ナビゲーションの順序はどうなるか (tabindex 属性の値が 0 以上のとき) です。この辺りは IE 5 の拡張 (HTML 4 ではリンクとフォームコントロール要素にしか付けられなかった tabindex 属性を、どんな要素にも付けられるようにした) に根差すことでしょうから、今考えるならもう少しうまくできるのではと思ってしまいますね。

勉強会後に Windows 用スクリーンリーダー NVDA をインストールしてみました。開発者向けには「ポータブル版を作成」し、必要に応じて起動したほうがよいとのことです。ポータブル版作成時に、指定したフォルダの直下にファイルが展開されるので、新規にフォルダを作ってそれを指定するのがよさそうです。

by nanto_vi [Web 関連技術] [コメント(0)｜トラックバック(0)]