Re: CSSの content プロパティーを使いこなそう！

2015年4月10日 著

まず先に結論を書いてしまうと、Webクリエイターボックスの「CSSの content プロパティーを使いこなそう！」という記事には、アクセシビリティ的に好ましくない事例が掲載されているので注意しましょうね、ということです。また同記事の著者は、「文章として扱いたい場合は、CSSを使わず、ちゃんとHTML内に記述しましょう」と呼びかけていますが、これは誤解を招く表現だと思っています。文章の体をなしているかどうか、が論点ではないでしょう。閲覧環境を問わず、より多くの人により確実に届けたいと思う情報であれば、contentプロパティに頼らず、本文中にマークアップすべきと考えます。記事の末尾に

擬似要素と content プロパティーでできることの多くは、装飾としてデザインに付け加える程度のものが多いかと思います。

と書かれていますが、むしろ装飾の意味合いでしかcontentプロパティ（というかCSS全般）を使うべきではないというのが自分の立場です。もちろん絶対にcontentプロパティを使うな、などと言うつもりもありません。何が装飾で何が装飾でないか曖昧な、グレーゾーンというのは確かに存在するでしょう。しかし、この記事でなぜか一緒に紹介されているtitle属性と同様、それで仕込まれた情報がどの程度の確度でユーザーに伝わるかについては、不確実と言わざるを得ません。であればこそ、確実にユーザーに伝えたいコンテンツには使えない、使うべきではない実装方法だと思います。

たとえば、同記事で最初に登場する「テキストを表示」の事例では、「NEW!」というテキストをcontentプロパティで挿入・表示させています。しかし、これではCSSが無効な閲覧環境や、擬似要素の読み上げに対応していないスクリーンリーダーのユーザーに対し、どれが新商品ないし新規に追加された情報かというのがまるで伝わりません。それが環境によって伝わったり伝わらなかったりしても良い程度の、重要性の低い（≒装飾として位置づけられる）情報と判断のうえならば、contentプロパティで実装するのもアリでしょうね。僕だったら、よほどのことが無い限り、このお題に対してそういう実装は避けると思いますけど（僕の認識では「NEW!」は装飾なんかじゃない）。F87: 達成基準 1.3.1 の不適合事例 － CSSの :before や :after 疑似要素及び 'content' プロパティを用いて、装飾目的ではないコンテンツを挿入している｜WCAG 2.0 実装方法集も参照していただければ幸い。

アクセシビリティおじさんからは以上です。