絵文字のアクセシビリティ

生成AIの登場で、添付スクリーンショットのような文中に絵文字をふんだんに使った文章を目にする機会が増えてきました。

「絵文字って機種依存文字じゃないのか？」「読み上げの時はスルーされるのだろうか？」などアクセシビリティが気になったので、実際に読み上げソフトを使いながら調べました。

使用する場合どうすればいいか

読み上げさせない

絵文字をspanタグ等で囲い、aria-hidden="true"属性を付与することで読み上げをスキップさせることが可能です。

大抵の場合、絵文字は装飾目的で使用されていると思うので、正規表現などで絵文字を見つけ次第以下のように囲ってしまうのが簡単かつ有効な解決策になると思います。

<span aria-hidden="true">👉</span> 見出しcopy_all

任意の読み上げ文章を指定する(WCAG的にはこっち推奨？)

文章の一部として扱う場合、aria-label属性によって適切な読み上げ文章を設定することも可能です。

<span aria-label="ここを読み上げる" role="img">😱</span>copy_all

最初に試した結果のように、ソフトによって読み上げ方が異なっているため、hiddenを指定しないのであればこの指示は必須だと思います。

なお、何故かChromeのリーディングモードはaria-labelの指示に従わず「恐怖」と読み上げを行いました。

hiddenは効いた（リーディングモードでも読み飛ばした）のでやはり読み上げさせないのが一番考えることが少なくて楽だと思います。

ただ、WCAGのガイドラインにはhiddenのことは書いておらず、aria-labelが書かれているので推奨的にはこっちなんでしょうか？

結局どうすればいいのか

マークアップを行わずに絵文字を使う場合、アクセシビリティ的には「🌍の表面積のうち7割は海」のように、文章の一部として扱うのが適切な使用方法ではありそうだなと思います。

とはいえ、実情としては装飾として使う人が大半であったり、文章の一部として使っていてもソフトによって読み上げが異なっているため完璧な調整を行うのは不可能に近いと思います。

例えば、「👉を見て」という文章はChromeのリーディングモードであれば「ミギを見て」と読み上げられます。
しかし、Windowsのナレーターでは「右指差し文字を見て」という文章になり、「方向としての右」を見るのか、「右指差し文字」という文字を見るのか分からなくなります。

また、この例だと音声を聞く人は「右を見て」という意味だと分かりますが、逆に目で見ている人（音で聞いていない人）はこの絵文字が何を示しているのか考える必要があり、解釈によっては正確な意図が伝わらなくなってしまう危険もあると思います。

とはいえ、このレベルであれば、音声であれ目視であれ実際にはどういう意味か文脈で理解できることは多いと思いますが、それにしても生成AIで作った記事を聞く人は、こんな音声が大量に読み上げられるとなると相当に理解にストレスがかかることは間違いないでしょう。

基本的には文章保存の段階で、「絵文字がある場合、装飾としてしか使えない」旨の警告を出して推敲を行わせ、全ての絵文字にaria-hidden="true"を付与してしまう、というのが手っ取り早いと思います。

対策PHP

正規表現で絵文字を検知し、aria-hidden付きのspanタグでマークアップするようにします。

<?php

$sentence = "
<h1>💻 コードで見る「ここに任意のタイトル」</h1>
<p>任意の文章👉💻<br>任意の文章</p>
<h2>💡 なぜ「ここに任意のタイトル」なの？</h2>
<p>任意の文章😱</p>
";

$result = preg_replace('/(\p{So}+)/u', '<span aria-hidden="true">$1</span>', $sentence);

echo $result;
// 出力は以下のようになります。
// <h1><span aria-hidden="true">💻</span> コードで見る「ここに任意のタイトル」</h1>
// <p>任意の文章<span aria-hidden="true">👉💻</span><br>任意の文章</p>
// <h2><span aria-hidden="true">💡</span> なぜ「ここに任意のタイトル」なの？</h2>
// <p>任意の文章<span aria-hidden="true">😱</span></p>copy_all

preg_replace関数で、\p{xx}という指定をすることで、指定したUnicode文字にマッチさせることが出来ます。
公式ドキュメントによると、So が「その他の記号 (Other symbol)」にマッチし、「絵文字(emoji)も含む」ということなのでこれを使うことで比較的多くの絵文字にマッチさせることが可能です。
（「絵文字も」ということなので絵文字じゃない記号も拾ってしまいそうなのもちょっと懸念。）

※なお、絵文字を正規表現で完璧に網羅するのは難しそうです。
（Wikipediaの絵文字リストを上記処理にかけると漏れがあります。）
とはいえざっくり頻出の絵文字を囲えるだけでも十分な対策になるので細かいことは気にしないことにします。

後はspanタグで囲んだ文章に置き換えるだけのシンプルなコードです。

おわりに

色々偉そうに書いてますが、実際の人間でスクリーンリーダーを利用する方はこの手の話には慣れっこなので対策しなくても文脈で理解はしてくれてしまうと思います、悲しいことに。

とはいえ、検索エンジンのクローラーもテキストを読み取る存在です。
絵文字がそのまま生データとして処理されるよりも、適切にマークアップして人間にもクローラーにも優しいサイトにしておく方が良いと思います。

よって、とりあえず「絵文字はaria-hiddenでスキップ」だけでも入れておくというのが一番対応のコストとアクセシビリティの対応のバランスが取れているのではないかと思います。

参考

• Technique H86:Providing text alternatives for emojis, emoticons, ASCII art, and leetspeak
  WCAGの絵文字と顔文字についてのアクセシビリティ情報。
• UnicodeのEmojiの一覧
  絵文字検知処理の確認に使用した一覧。
• Unicode 文字プロパティ
  PHPの正規表現について。