WEB アクセシビリティーとリストタグ

Web Accessibility Advent Calendar 2014 12月16日を担当しますchabin_desugaです。よろしくお願いします。身体に障害があります。

さっそく本題

今年6月にTwitterでこんなことをつぶやきました。

list-style-typeでつけられた番号ってスクリーンリーダーで読みあげれるのだろうか?先生に聞いてもよくわからない。。

そうです。案件で箇条書きにする必要があったのです。色の話・スクリーンリーダーの話・リンクボタンの話・・・いろいろWEBアクセシビリティで取り組まなくてはいけないものはいろいろありますが、今は「これスクリーンリーダーでは読み上げるの?」の一点止まりになってしまっています。この点は、来年以降の自分の課題になっていくと思われます。

とりあえず

リストタグを使ったテストページを作り、友人のスクリーンリーダーユーザーに「これどう読み上げるの?」的に投げてみました。

ページとcssの構造は以下のとおり。(ページ内容はつけましたが適当に他の人のページをコピペしたのとそれがこのエントリーの目的ではないので、今回は割愛します。)

ソース

テストソース1 数字を手入力
1.hoge<br>
2.hoge<br>
3.hoge<br>
4.hoge<br>
5.hoge<br>
テストソース2  数字で表示
<ol>
<li>hoge</li>
<li>hoge</li>
<li>hoge</li>
<li>hoge</li>
<li>hoge</li>
</ol>
テストソース3 <ol style="list-style-type:desimal;/*数字で表示(上のolタグと同じ)*/">
<li>hoge</li>
<li>hoge</li>
<li>hoge</li>
<li>hoge</li>
<li>hoge</li>
</ol>
テストソース4 <ol style= "list-style-type:upper-alpha;/*大文字アルファベットで表示*/">
<li>hoge</li>
<li>hoge</li>
<li>hoge</li>
<li>hoge</li>
<li>hoge</li>
</ol>

ブラウザ



仮説


「スタイルシートは読まないと思うが、olタグは読むのではないか?」

読んでもらった

スクリーンリーダーにはいくつかありますが、今回は「PC-Talker(株式会社 高知システム開発製)」・・「FocusTalk」(株式会社スカイフィッシュ製)・NVDA(任意団体 NVDA日本語チーム製)とiphoneの「voiceover」の4つで試し読みを実施しました。
NVDAでは、olタグ・スタイルシートとも読みますが、アルファベットで記述したところ(テストソース 4)も数字で読んでしまいます。「PC-Talker」・「FocusTalk」・「Voiceover」ではなにも読みませんまない。協力してもらったスクリーンリーダーユーザーからは「ホームページを見ていて番号付きの箇条書きはみないな」という声をもらいました。

そうですか。

リストタグでマークアップするとリスト部分の1段右に行くので見栄え的にはいいから今後も積極的に使っていきたいが、アクセシビリティ的にはまずいのか・・・。

WAI-ARIA??

このアドベントカレンダーでも取り上げられている"WAI-ARIA"。
W3Cが2014年3月20日に勧告したもの、
詳しい説明は他の方のエントリーを見てもらうとして、もしかするとこの勧告で発効されたプロパティで読ませることはできないかと思いました。文字列が指定できるプロパティは、"aria-label"と"aria-value-text"のみ。そこで、以下のソースを用意し再び読んでもらいました。

ソース

<ol>
  <li aria-label="1">hoge</li>
  <li aria-label="2">hoge</li>
  <li aria-label="3">hoge</li>
  <li aria-label="4">hoge</li>
  <li aria-label="5">hoge</li>
</ol>
次はスタイルシートで数字をつけて aria-valuetextで
<ol style="list-style-type:decimal;">
<li aria-valuetext="1">hoge</li>
<li aria-valuetext="2">hoge</li>
<li aria-valuetext="3">hoge</li>
<li aria-valuetext="4">hoge</li>
<li aria-valuetext="5">hoge</li>
</ol>
最後はスタイルシートで大文字アルファベットをつけて aria-lebel
<ol style="list-style-type:upper-alpha">
<li aria-label="A">hoge</li>
<li aria-label="B">hoge</li>
<li aria-label="C">hoge</li>
<li aria-label="D">hoge</li>
<li aria-label="E">hoge</li>
</ol>
<ol style="list-style-type:decimal;">
<li aria-valuetext="A">hoge</li>
<li aria-valuetext="B">hoge</li>
<li aria-valuetext="C">hoge</li>
<li aria-valuetext="D">hoge</li>
<li aria-valuetext="E">hoge</li>
</ol>

ブラウザ



結果は?


「PC-Talker」・「FocusTalk」・「Voiceover」ではなにも読みません。NVDAですが、スクリーンリーダーユーザーからは「数字部分は読むが、アルファベットは読まず数字で読むな。」という回答でした。だが実際に自分も「NVDA」をいれ確認したところ、「NVDA」と相性が良いとされるブラウザ「Firefox」で読ませたところ、アルファベットも読みました。

まとめ

まず、数字が記述されるolタグがスクリーンリーダーで読まれないということは驚きでした。"WAI-ARIA"という勧告の概要もこのエントリーをまとめていく中でなんとなくわかりました。そのなかで勧告にスクリーンリーダーの機能が追いつけていないという現状もなんとなく見えてきました。今回はリストタグを例に書いてきたわけなのです。勧告は勧告なわけでそれにパーフェクトに答えても「実は・・・」ということが今回わかりました。

スクリーンリーダーユーザーは好みのスクリーンリーダーを使っています。詳細はよくわかりませんが、スクリーンリーダーと相性の悪いソフトもあるようなのです。風の声でよく聞こえてくるのは、skypeのバージョンを上げた途端スクリーンリーダーでまったく読まなくなったとか、「skypeのあのバージョンはよかったよね」という話があります。スクリーンリーダーユーザーのWEBブラウジングに関していえば、ただ、「勧告に従えぱ、対応が完了!ではなく」ということをまずはざっくり把握することが必要と思うのです。


投稿者

RSS 2.0 Login