@kazuhito
Kazuhito Kidachi's Personal Web Site Since 2000

Re: 音声出力環境における擬似要素(::before, ::after)の内容(content)の読み上げについて

音声出力環境における擬似要素(::before, ::after)の内容(content)の読み上げについて|Web制作 W3Gを読んでの感想。文章中に「WAI-AREA」という誤記が何度か登場するの(正しくはもちろんWAI-ARIA)、いまだに修正されていないのはさておき( [ 2015-01-20 追記 ] 既に修正していただけました)。

スクリーンリーダーや音声ブラウザなどの音声出力環境で::before擬似要素、::after擬似要素にcontentプロパティで生成した内容は多くのソフトウェアで読み上げることができます。使い方次第で、薬にも毒にもなりえます。

音声読み上げ環境は、あくまで多種多様にあるWeb閲覧環境のひとつでしかありません。音声読み上げ環境での読み上げられ方、を殊更に取り出して使い方次第などとするのは、Webコンテンツの実装を語るにはやや狭量に感じます。何事にも長所・短所がつきものである以上、薬にも毒にもなりえるのは当然のこととして。

ただし、NVDAのようにスクリーンリーダーの場合は、ソフトウェア同士の組み合わせに依って動作が異なり、NVDAはFirefoxで使用することが推奨されており、NVDA + Firefoxでは読み上げるが(NVDA + Chrome, NVDA + Operaも可)、NVDA + Internet Explorerだけ読み上げないといった結果になったため、CSSで生成した内容を読みげあげるのかどうかについては現在出回っている多くの音声出力環境のソフトウェアで読み上げることができると言えそうです。

この段落、ちょっと意味がよくわかりませんでした。ブラウザとスクリーンリーダーの組み合わせによっては読み上げられない、というのがなぜ多くの音声出力環境のソフトウェアで読み上げることができるという結論になるのでしょうか。組み合わせに関わらず読み上げられる、という現状ならば、その結論で違和感は無いのですけど。

abbr要素にあるtitle属性の内容は通常HTML文書中に表現されることのない内容ですが、それを:after擬似要素によってtitle属性の内容を生成しています。

通常HTML文書中に表現されることのない内容、というのも意味が通じないように思います。title属性はHTML文書中に存在しているわけですから。文脈から察するに、閲覧環境が視覚系であれ非視覚系であれ「通常、ユーザーに対し表示されることのない内容」みたいに書くべきところかなと思います。

UAのサポートの強化が進んでいないという理由からtitle属性に頼ることをHTML5勧告時点(2014年10月28日)においては推奨しないことになっていますが、それなりの普及・認知がある属性だけにこのまま見捨てられるのは惜しく、CSSの内容生成が視覚環境でも・非視覚環境においても活用されるようになれば、title属性も見直されるかもしれません。

title属性の話と、CSSのcontentプロパティでもってその内容を表示させる話とが、いつの間にか一緒くたに扱われてしまっていてよくわからなくなってくるのですが......title属性を使って提供する情報は所詮、補足的な情報のはずです。title属性にしろcontentプロパティにしろ、UAのサポート状況にかかわらずユーザーに伝えるべき重要度をもった情報であるならば、それはtitle属性で提供すべきではないと思います(本文中に書き記すとか)。

上記の部分は「現在位置は トップページ リンク から 会社案内 リンク の中にある 会社概要」と読み上げます。多くのサイトでパンくずリストには、その階層構造を視覚的に表現する目的で大なり(>)の記号がよく用いられます。

「から」とか「中にある」といった言葉を、いわゆる「パンくずリスト」のなかで使うことの是非について。あまり階層が深くないところに位置するページであれば、それほど違和感も覚えないのですけど、深くなるにつれ大なり記号の登場回数、すなわちこの実装例において「から」という言葉の挿入される回数が増えるわけで、それを音声で聞くユーザーが果たして本当により認知しやすいのか、という点は疑問に思っています。第1回アクセシビリティBAR~初夏のパンくず祭でも、わりあい批判的な意見が多かったわけで。同様にして、

パンくずリストの例のように、他にもmain要素の最初に「ここから本文」、nav要素の最初に「ここからナビゲーション」といったコンテンツを認知しやすいように読み上げ時の支援を高める目的での利用方法は、HTMLを編集することなくCSSファイルひとつに書き加えるだけで簡単にサイト内の全ページに実装できるので実用的ではないでしょうか。

という考えにも自分は賛同しません。それが実用的である、便利であると感じるユーザーもゼロではないかもしれません。しかし、上記のような文言をわざわざ仕込むのは、音声読み上げ環境での利用にやや偏った実装と映ります。当然、Webはそのような音声読み上げ環境のユーザーだけが使うものではありません。かつてRe: 第18回 XHTMLの設計〜状況に合った要素選び(3)〜で書きましたが、単にそれを耳障りに感じる利用者もいるだろうといったことではなく、特定の利用者や環境に対し歩み寄れば、それ以外では当然逆のことが起こりうる(場合によっては不便を強いることになる)と考えるからです。

使い方次第では現状まったく活用できていないtitle属性を、視覚環境でも・非視覚環境でも活かせるように一役買ってくれるかもしれない。

繰り返しますが、視覚環境でも・非視覚環境でも活かしたいほど重要な情報であれば、それはtitle属性で実装すべきではないと思います。

音声出力環境のみ読み上げ、視覚環境では表示させたくないという用い方をしたい場合、(WAI-AREAには支援技術を提供するソフトウェアにのみ認識できるラベルを付けられるaria-labelがあるが、)生成内容にdisplay : block; width : 0; heihgt : 0; visibility : hidden;などのスタイルを加えて、視覚的に隠してしまうだけで済むので、HTMLを編集する必要がなく簡単に実現できる点では優れている。

視覚的に隠す、という発想がどうも馴染めません。確かに、結果としてそうせざるを得ない場面というのは無くはないのですが、本来であればWebコンテンツを利用するのが視覚であろうと聴覚であろうと、いずれにも同等に利用できるようにする、というのが本筋のはず。その前提に立てば、ある情報を一方にのみ提供し他方には隠す(ましてやそれを優れていると評する)、という発想に一種の捩れを感じるのですね。完全に個人の主観ですが。

ただ、視覚障碍を持つユーザがJavaScriptやCSSをオフにしているというのは迷信に過ぎず、わざわざ制作者のCSSをオフにして利用している可能性は限りなく低いと言えます。なぜなら、制作者のCSSでは、display : none;で余計なものを読み上げることがないように配慮するためのものでもあるのですから、制作者のCSSまでオフにした上で、アクセシビリティがサポートされているウェブサイトとなると厳しすぎませんかね...もちろん、CSSがオフの際でも情報が入手可能になっているに越したことがないのは確かでしょう。

最初の一文は、WebAIMのアンケート調査結果をみる限り確かにそうかなと思うのですが(5回目の調査ではJavaScriptの有効/無効につき97.6%が有効にしていると回答)、しかしその後に続く文章はまったく理解することができませんでした......。

[ 2015-01-20 追記 ] @momdo_さんがRe: 音声出力環境における擬似要素(::before, ::after)の内容(content)の読み上げについての追補 - 水底の血という記事を書かれていました。勉強になります!

現在地:ホーム > 覚え書き > 月別アーカイブ > 2015年1月 > Re: 音声出力環境における擬似要素(::before, ::after)の内容(content)の読み上げについて
Google カスタム検索を利用しています