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

スクリーンリーダーは絵文字をどう読み上げるか

スクリーンリーダーは絵文字に遭遇すると、Unicode CLDRが定義した名前を読み上げます。CLDRは日付や通貨のフォーマットなどを各言語向けに収録した国際化データベースで、絵文字のアノテーション（短縮名とキーワード）もその一部です。日本語では😂が「嬉し涙の顔」、🔥が「炎」、💯が「100点」と登録されています。

VoiceOverで「今日は楽しかった😂」を読み上げると「今日は楽しかった、嬉し涙の顔」と聞こえます。絵文字が文中に現れるたびにその名前が挿入されるため、絵文字の多いテキストほど音声体験は煩雑になります。

CLDRのアノテーションはUnicode ConsortiumのCLDR Technical Committeeが管理しており、Survey Toolというオンラインツールを通じて翻訳の提案や修正が行われています。Unicode本体とは独立した6か月サイクルでリリースされるため、新しい絵文字の名前がスクリーンリーダーに反映されるまでにはOSのアップデートを挟む時間差があります。

スクリーンリーダーごとの挙動の違い

VoiceOver、NVDA、JAWS、TalkBackはいずれもOS側の絵文字データを通じてCLDR名を取得しますが、読み上げの仕方には差があります。

NVDAは絵文字を1つずつ忠実に読み上げます。同じ絵文字が3つ並んでいても「クラッカー、クラッカー、クラッカー」と3回繰り返します。「クラッカー x3」のようにまとめて報告する機能は要望されていますが、絵文字がUTF-16で2文字分（サロゲートペア）として扱われるため、単純な繰り返し検出が難しく、実装には至っていません。

JAWSはCLDR名を使いますが、一貫性に欠ける場合があります。たとえば国旗絵文字がOSのフォントで正しくレンダリングされずフォールバック表示になると、ウェールズの旗を「黒い旗」と読み上げてしまうことがあります。

こうした差異があるため、特定のスクリーンリーダーだけでテストして「問題なし」と判断するのは危険です。可能であればVoiceOverとNVDAの両方で確認するのが現実的な選択肢です。

よくある問題

連続する絵文字が冗長な読み上げになる

SNS投稿で「おめでとう🎉🎉🎉✨✨」と書いた場合、スクリーンリーダーは「おめでとう、クラッカー、クラッカー、クラッカー、キラキラ、キラキラ」と全て読み上げます。視覚的には気持ちの強調ですが、音声では同じ名前の繰り返しが続き、本文の内容が埋もれます。

書き手の意図とCLDR名が一致しない

絵文字の日常的な使われ方とCLDRの正式名称はしばしば食い違います。

🙏 →「お願いします」のつもりでも、CLDR名は「合わせた手」
💀 →「笑いすぎて死ぬ」のつもりでも、CLDR名は「ドクロ」
🙃 → 皮肉を込めて使っても、CLDR名は「逆さまの顔」

スクリーンリーダーはCLDR名をそのまま読み上げるため、書き手が込めたニュアンスは伝わりません。文脈に依存した絵文字の使い方は、音声環境ではコミュニケーションの障壁になります。

ZWJシーケンスと肌色修飾子の冗長さ

Zero Width Joiner（ZWJ）で複数の絵文字を結合した家族絵文字（👨‍👩‍👧‍👦）や職業絵文字（👩‍💻）は、CLDR名が長くなりがちです。👨‍👩‍👧‍👦は「家族: 男性、女性、女の子、男の子」のように読み上げられます。

肌色修飾子も読み上げを長くします。デフォルトの👋は「手を振る」ですが、肌色を変えると「手を振る: やや明るい肌色」のように修飾語が付きます。絵文字の肌色はFitzpatrick Scaleに基づく5段階が用意されており、どの段階を選んでもCLDR名に肌色の説明が追加されます。アクセシビリティの観点では、特に理由がなければデフォルトの黄色を使う方が読み上げが短く済みます。

絵文字だけのUI要素

🔍を検索ボタン、🏠をホームリンクとして配置しているWebサイトがあります。スクリーンリーダーはそれぞれ「虫眼鏡」「家」と読み上げますが、ナビゲーションの機能としては伝わりません。WCAG 2.1の達成基準1.1.1「非テキストコンテンツ」（レベルA）は、操作可能な要素にその目的を示す代替テキストを求めています。絵文字のCLDR名は見た目の描写であって機能の説明ではないため、この基準を満たせません。

プラットフォーム間の見た目の違い

同じUnicodeコードポイントの絵文字でも、Apple、Google、Samsung、Microsoftで見た目が異なります。ミネソタ大学の研究（2018年）は、この違いが誤解を生むことを実証しました。「grinning face with smiling eyes」の絵文字はAppleでは顔をしかめた表情に見えますが、Google、Samsung、Microsoftでは明らかに陽気な顔として描かれていました。

この研究では、Twitterユーザーの少なくとも25%が、自分が投稿した絵文字がフォロワーの端末では異なって表示される可能性があることを知らなかったと報告されています。プラットフォーム間の表示差を見せられた後、回答者の20%がツイートを編集するか送信しなかっただろうと回答しました。

スクリーンリーダーはCLDR名で読み上げるため見た目の差異には影響されませんが、晴眼者同士でも同じ絵文字を別の感情として受け取る可能性があるという点は、絵文字をコミュニケーションの主な手段にすることのリスクを示しています。436人を対象とした別の研究（2017年）では、年齢、性別、文化のすべてが絵文字の解釈に影響を与えることが確認されており、iOSの絵文字はAndroidの絵文字よりも親しみやすく意味が明確だと評価される傾向がありました。

スクリーンリーダー以外のアクセシビリティ

低視力のユーザー

絵文字のアクセシビリティはスクリーンリーダーだけの話ではありません。低視力のユーザーにとって、小さな画面で表示される絵文字は判別が難しくなります。「思慮深い顔」「安心した顔」「失望した顔」といった類似の表情絵文字は、拡大しなければほぼ同じに見えます。絵文字を意味の伝達に使っている場合、この判別の難しさはコミュニケーションの障壁になります。

認知的アクセシビリティ

認知障害や神経多様性のあるユーザーにも絵文字は影響を与えます。

言葉の代わりに絵文字を使うと、すべての人の認知負荷が増加します。密集した絵文字列は、特に神経多様性のあるユーザーにとってメッセージの処理を困難にします。珍しい絵文字や文脈によって意味が変わる絵文字は、認知障害のあるユーザーにとって特に混乱を招きやすくなります。

一方で、テキストに添える形で絵文字を使うと、認知障害のある人や言語に不慣れな人が情報を理解しやすくなるケースもあります。天気予報に晴れや雨の絵文字を添えることで、テキストだけよりも視覚的な手がかりが増えるのはその例です。絵文字が障壁になるか助けになるかは、使い方次第です。

自閉症の人にとって、絵文字は自分の感情を伝える助けになることがあります。あるアクセシビリティコンサルタントは、絵文字を使って不安を軽減し同僚との関係を築けたと報告しています。ただし、累積的で色彩豊かな絵文字の使用や、皮肉を込めた絵文字の使い方は避けるのが一般的な推奨です。人によって好みが異なるため、個人の好みを尊重することが重要です。

チャットツールでの絵文字

SlackやMicrosoft Teamsのようなチャットツールでは、HTMLのARIA属性を自分で付けることはできません。プラットフォーム側が絵文字の読み上げを制御するため、ユーザーが個別に対処する手段は限られます。スクリーンリーダーはメッセージ中の絵文字をUnicode名で読み上げます。

Slackは公式に、絵文字は1〜2個に抑え、文末に配置し、テキストで意味を伝えた上で絵文字を補助的に使うことを推奨しています。Microsoftも同様に、メッセージ全体を絵文字で伝えようとせず、強調のために時々使うよう案内しています。

SlackやDiscordではカスタム絵文字が使えますが、カスタム絵文字にはCLDR名がありません。スクリーンリーダーはカスタム絵文字の内部名（エイリアス）を読み上げます。たとえば :shipit: という名前で登録されたカスタム絵文字は「shipit」と読み上げられるため、登録時の命名が意味の伝達に直結します。Discordのステッカーにはアップロード時に説明フィールドがあり、スクリーンリーダー向けの文脈を提供できます。

Webでの対策

HTMLで絵文字を使う場合、その役割によって実装方法を使い分けます。W3CのH86テクニックでは、span要素にrole="img"とaria-labelを組み合わせる方法を示しています。spanにはalt属性が使えず、汎用要素にアクセシブルネームを付けるにはこの組み合わせが必要です。

用途	問題のある実装	アクセシブルな実装
装飾的な絵文字	そのまま記述	`<span aria-hidden="true">🎉</span>`
意味を持つ絵文字	そのまま記述	`<span role="img" aria-label="お祝い">🎉</span>`
絵文字ボタン	`<button>🔍</button>`	`<button aria-label="検索">🔍</button>`

装飾的な絵文字は aria-hidden="true" でスクリーンリーダーから隠します。意味を持つ絵文字には role="img" と aria-label で意図に合った代替テキストを付けます。ボタンやリンクには aria-label で機能を明示します。

なお、Webアプリケーションで絵文字ピッカーを実装する場合は、ピッカー自体のアクセシビリティも考慮が必要です。カテゴリ切り替えにはタブパネルパターン（role="tab" と role="tabpanel"）を使い、矢印キーでのフォーカス移動に対応させます。

コンテンツ作成時の指針

絵文字はテキストの補助として使い、絵文字だけで意味を伝えない
同じ絵文字を繰り返さない。1つで十分に伝わる
絵文字は文やメッセージの末尾に置く。途中に挟むと、読み上げ時に文の流れが途切れる
CLDR名が自分の意図と合っているか確認する。macOSなら文字ビューア、Windowsなら絵文字パネルで名前を確認できる
ZWJシーケンスや肌色付き絵文字は読み上げが長くなることを意識する
カスタム絵文字を登録する際は、意味が伝わる名前を付ける
1つのメッセージに含める絵文字は数個に留める

絵文字を全て取り除いても文意が通じるなら、そのテキストは音声環境でも伝わります。