音声出力環境における擬似要素(::before, ::after)の内容(content)の読み上げについて｜Web制作 W3G
Re: 音声出力環境における擬似要素(::before, ::after)の内容(content)の読み上げについて | 覚え書き | @kazuhito
ざっくり目を通す前は、まあまあかなとか思ったんですが、よくよく読むといろいろと変だった、と。
おかしな箇所については木達さんがいろいろと指摘されているので別の視点から。
策定中のCSS3では、半角コロン(:)を1つ用いる擬似クラスのセレクタと区別できるように擬似要素については半角コロン(:)を2つ用いるように変更され、
音声出力環境における擬似要素(::before, ::after)の内容(content)の読み上げについて｜Web制作 W3G::before、::afterと記述します。
そこは概念としてのCSS3ではなく、モジュールとしてのセレクタ Level 3を参照するところでは。セレクタ level 3はもうW3C勧告であり策定完了しているんでものすごい違和感なんですよね。（CSS Snapshotはまだですか？）
で、title属性についてですが、グローバル属性としてのtitle属性とabbr要素のtitle属性をあたかもまったく同じ意味を持つとするかのように読めるので、これまた激しい違和感なんですよね。ここで仕様を当たってみましょう。
title属性は、ツールチップに適するような要素に対する助言的な情報を表す。リンクでは、これはタイトルまたは対象リソースの記述であるかもしれない。画像では、画像のタイトルや説明であるかもしれない。段落では、テキストの脚注や解説であるかもしれない。引用では、ソースに関する詳細情報かもしれない。インタラクティブコンテンツでは、要素の用途に対する分類や指示などかもしれない、などである。値はテキストである。warnings:
title属性に依存することは、多くのユーザーエージェントがこの仕様で要求されるようなアクセス可能な方法で属性を公開しないため、現在推奨されない（たとえば、ツールチップを出現させるマウスなどのポインティングデバイスが必要になり、これはモダンな携帯端末やタブレットをもつ人のような、キーボードのみのユーザーとタッチのみのユーザーを締め出す）。（中略）
3.2.5.2 title属性 — HTML5 日本語訳
link、abbr、inputのような一部の要素は、上記で説明されるセマンティックを越えてtitle属性に対する追加のセマンティックを定義する。
4.5.9 abbr要素 — HTML5 日本語訳
abbr要素は、任意でその完全表記を伴う、略語や頭字語を表す。title属性は、略語の完全表記を提供するために使用されてもよい。属性が指定される場合は、略語の完全表記を含まなければならず、他には何も持たない。
とまあ、abbr要素のtitle属性は特別な意味を持つんですよ、ということは強調しておきたいですね。そして、グローバル属性としてのtitle属性が推奨されないのはツールチップがマウス依存だから、ということです（warningsとしての注扱いではありますが）。
ここのところをきちんと区別しておかないと、じゃあlink要素のtitle属性もやっぱり非推奨なんでしょう？とかいうあさってな方向に行きかねないと思うんですが。
さて疑似要素の読み上げですけれども、実装がどうなってるのかは知らないですが、"本来的には"メディアクエリーで解決すべきことなんじゃないですかね。多分こんな感じで書ける…はず。
@media speech { abbr[title]:after { content: attr(title); } }
これがnvdaで読み上げられるかっていうと、それはまた別問題みたいですが。
