【ARIA】顔文字꒰｡•◡•｡꒱をアクセシビリティ対応する
Web ページを制作するなかで、コンテンツ中に顔文字やアスキーアートを記述したい場面があると思います。これらは文字を意味ではなく見た目として使用するもので、スクリーンリーダー等の支援技術では適切に読み上げられない場合があります。
顔文字をそのまま記述した場合
以下のように文章中に顔文字を直接記述した場合、スクリーンリーダーからはそれが顔文字であることがわからないため、つながった文章の一部として読み上げます。
<p>
ありがとう！ <span style="white-space: pre;">(๑>◡<๑)</span> うれしいです。
</p>
これはたとえば NVDA で、以下のように読み上げられます：
ありがとう感嘆符 大なり円弧下半小なり うれしいですマル
どの記号をどのように読み上げるかはスクリーンリーダーの実装によって異なりますが、少なくともスクリーンリーダー使用者には顔文字であることが伝わらず、文章中に変な記号が紛れているように聞こえます。
補足：顔文字やアスキーアートには white-space: pre; をつけるとよい
視覚的な配置のために空白や改行が重要な意味を持つ顔文字やアスキーアートは、CSS で空白や改行を維持してくれる white-space: pre; をつけるとよいです。今回の主題からはずれるので詳しい説明は割愛し、以降は記述を省略します。
参考：
role="img" と aria-label を使おう
顔文字部分に role="img" と aria-label を使用してみましょう。
<p>
ありがとう！ <span role="img" aria-label="喜んでいる顔文字">(๑>◡<๑)</span> うれしいです。
</p>
こうすると、たとえば NVDA では以下のように読み上げられます：
ありがとう感嘆符 喜んでいる顔文字 うれしいですマル
文の一部としての記号ではなく、独立した顔文字であることがスクリーンリーダーに伝わりました。
role="img" って？ aria-label って？
ARIA: img ロール - MDN Web Docs では、 img ロールは以下のように説明されています：
ARIA の img ロールは、ページコンテンツ内の複数の要素を単一の画像として扱うべきであると識別するために使用できます。これらの要素は、画像、コードスニペット、テキスト、絵文字、または視覚的に情報を提供するために組み合わせることができるその他のコンテンツである可能性があります。
上記の通り、 img ロールは画像やアイコンだけでなく、絵文字や顔文字を示すためにも使用することができます（同サイト内にも顔文字を img ロールで囲む例が紹介されています）。
aria-label はもう少し有名かもしれません。要素のアクセシブル名がなかったり、適切でないときに文字列をラベルづけすることができます。
じゃあ aria-label だけでよくない？
実は aria-label 属性は、そのままでは一部の HTML 要素に付与することができません。たとえば <span> 要素や <pre> 要素は、暗黙的に名前を持たない generic ロールを持っており、 aria-label 属性が禁止されています。
したがって、 role="img" によってロールを適切に上書きすることで、 aria-label でアクセシブル名をつけてあげることができるようになるのです。
参考：
Discussion