CSSの疑似要素に"speak:none"を追加する

[sounisi5011]

ブラウザの音声読み上げツールなどは、CSSの疑似要素も読み上げの対象にします。
装飾目的で疑似要素を追加している場合、このような疑似要素を読み上げるべきではありません。
そこで、こういった疑似要素にspeak:noneプロパティを追加することを提案します。

参照：Font Awesomeでも使われている「area-hidden="true"」とはなんだろう | MONOCHROME DESIGN｜東京 阿佐ヶ谷のフリーランスWEBデザイナー。WordPressによるホームページ・ウェブサイト制作

一つ注意点として、:beforeなどの擬似要素を使ってフォントアイコンを指定する場合もあるかと思います。スクリーンリーダーは:beforeなど擬似要素のcontentも読み上げるので、その場合はcssで、speak:none;と指定することにより、読み上げをスキップできます。