-webkit-alt プロパティ

• PUAアイコンフォントのアクセシビリティ - Unreviewed

これを読んでいて、内容とはまったく関係ないのだけれど -webkit-alt プロパティのことを思い出した。昨年11月に実装されたgenerated contentの読みを提供するためのプロパティだ。

• Changeset 159591 – WebKit — AX: Implement CSS -webkit-alt property
• [webkit-dev] AX: Implement CSS -webkit-alt property (text alternative for generated content pseudo-elements ::before and ::after)

実装された時期的にSafari 8/iOS8 Safariに入っててもおかしくないのだけれど、どうなのかな。誰か確かめておくれ。

装飾的なテキストをつける場合に、擬似要素にぶっこむという方法がある。

[data-new]::after {
  content: "\2730”; /* a.k.a. ✰ , literally “shadowed white star”  */
}

これでOKとおもいきや、どうやらVoiceOverはgenerated contentも読み上げてしまって、この星印を“shadowed white star”と読んでしまうらしい。DOMに存在してたらARIAの属性つけられるけれど、擬似要素なのでそうもいかない。そこで読みを提供するプロパティを導入したいと。

[data-new]::after {
  content: "\2730”;
  -webkit-alt: "New";
}

attr() も使えるので、ローカライズもしやすいとのこと。

[data-new]::after {
  content: "\2730”;
  -webkit-alt: attr(data-new);
}

ふうむ。擬似要素にテキストぶっこむというケースがどれくらいあるのかわかんないのだけど、広くサポートされる時代はすごく先になりそうだなあ。

---

これもまた全然関係ないのだけれど、絵文字を見る機会が増えてきた。ただ、グリフのデザインがよくないのか「これなんだろう？」と思ってしまう文字が多いのだよね。とくにぼくはケータイ持つのが遅くて絵文字の読解に慣れてないというのもあり、ハンディキャップというかなんかそういうのを感じている。絵文字イリテラシーというのかね。