以前からCSSでcontent:"▶";のように装飾としてテキストを付ける際、スクリーンリーダーに何か影響することはないものか気になっていたのですが、2014年1月17日に「Bulletproof Accessible Icon Fonts | Filament Group, Inc., Boston, MA」を読み、やはり装飾のつもりで付けたテキストが読み上げられることを知りました。
このサイトでも装飾としてテキストを付けていることもあり、実際にどのように読み上げられるのかを少しテストしてみました。テストはOS X 10.9.1のVoiceOverと、Windows 7のNVDAで行いました。
ちなみに、偶然にも本日「装飾的なテキスト — Website Usability Info」が公開されていましたので、そちらも読まれると良いかと思います。
NVDAでは装飾的なテキストが読み上げられた
まず、前述のBulletproof Accessible Icon Fontsの「Issues with Font Icons」で示されている次のようなコードで実験を行いました。
- HTML
<span class="icon-star">Favorite</span>- CSS
.icon-star:before { content: "★ "; }
結果、VoiceOverでは何も読み上げられませんでしたが、NVDAでは「黒星」と読み上げられました。読まれることを意図しない文字が読まれてしまうことに問題を感じました。点字ディスプレイなど、他のデバイスでの動作も気になるところです。
NVDAで装飾的なテキストがある前後の文字が読み上げられない場合がある
テスト中に気付いたのですが、a要素に:before / :after疑似要素で装飾的なテキストおり、なおかつテキストが「▶」の時やFont Awsomeのアイコンフォントの場合、NVDAは「リンク」と発するだけで、総称区的なテキストだけでなく周辺のテキストも読み上げなくなりました（但し、テキストが「記事・タグの一覧」の場合だと、「タグの一覧」は読まれる）。装飾的なテキストを表現することが出来ないためでしょうか。「★（黒星と読まれる）」や「※（米印と読まれる）」の場合は問題ありませんでした。NVDAのバグなのでしょうか...？ VoiceOverでは問題ありませんでした。
- HTML
<a href="#favorite" class="fa fa-star">Favorite</a>
次のようにspan要素を利用した場合は問題ありませんでした。
- HTML
<a href="#favorite"><span class="fa fa-star"></span>Favorite</a>
まとめ
実は装飾的なテキストを付ける為だけに空のspan要素やi要素を挿入することに疑問を感じてa要素の:before / :after疑似要素を利用してきたのですが、（多くの環境ではテストできていないにせよ）テスト結果を踏まえると、やはりspan要素を使いaria-hien="true"とする手法がアクセシビリティ上の問題が無く良いのでしょうか...。
- HTML
<a href="#favorite"><span class="fa fa-star" aria-hedden="true"></span>Favorite</a>
※i要素は次のような仕様になっていたため、私はspan要素を使う方が良いかなと考えました。
The i element represents a span of text in an alternate voice or mood, or otherwise offset from the normal prose in a manner indicating a different quality of text, such as a taxonomic designation, a technical term, an idiomatic phrase from another language, transliteration, a thought, or a ship name in Western texts.
よりよいのは、「HTML for Icon Font Usage | CSS-Tricks」に書かれているように、speak: none;がどの環境においても完全に働くことなのかなと考えています。