[アクセシビリティ] 絵文字に対する適切なマークアップ方法

概要

絵文字はテキストベースのコミュニケーションにおいて感情や意図を伝える重要な要素となっている。しかし、スクリーンリーダーでの読み上げはブラウザや支援技術によって異なるため、意図した情報を正しく伝えられない場合がある。

状況

WCAGでの位置付け

WCAGでは H86: Providing text alternatives for emojis, emoticons, ASCII art, and leetspeak というテクニックを公式に提供している。これは WCAG 達成基準 1.1.1「非テキストコンテンツ」（レベルA） を満たすためのテクニック（Sufficient Technique）として位置付けられている。

絵文字は技術的にはフォント（Unicode文字）だが、意味的には画像に近い。スクリーンリーダーは絵文字に遭遇しても「これは絵文字である」とは通知せず、Unicode名をそのまま読み上げる。そのため、ユーザーはそれが絵文字なのか実際に書かれたテキストなのか判断できない場合がある。

スクリーンリーダーの読み上げ

素の <span>🥺</span> の場合、スクリーンリーダーによって読み上げが異なる。多くのスクリーンリーダーは絵文字をCLDR名（Unicode Common Locale Data Repository）で読み上げる（例：🥺の場合「pleading face」など）。

ただし、環境や絵文字の種類によって読み上げ方に差異があり、一部のスクリーンリーダーでは一貫性に欠ける場合がある。

2025年現在のネイティブサポート

NVDA 2025.xではeSpeak NGとUnicode CLDRが更新され、絵文字のローカライゼーションデータも追加されている。現代のスクリーンリーダーは絵文字をネイティブでかなり正確に読み上げるようになった。

ただし、以下の問題は存在している。

Unicode名と実際の使用意図の不一致（例：Unicode名が「pleading face」でも、日本語では「甘え」「お願い」「ぴえん」などの意図で使用される）
複数の絵文字を組み合わせた場合、個別に読み上げられると意味が伝わらない
絵文字の修飾子（肌の色、性別など）が冗長に読み上げられる

方法

マークアップ方法は以下の通り。

意味のある絵文字

<span role="img" aria-label="お願い">🥺</span>

role="img"とaria-labelを指定することで、スクリーンリーダーは aria-label の内容を画像として読み上げる（例：「お願い、画像」または「お願い、グラフィック」）。

装飾的な絵文字

<span aria-hidden="true">🥺</span>

装飾的な利用をしているのであれば、aria-hidden="true"を指定することでスクリーンリーダーの読み上げを無効にする。

複数の絵文字を組み合わせる場合

<span role="img" aria-label="あなたは最高">👉🤘</span>

個別のUnicode名（例：「指差し、人差し指と小指を立てた手」など）で読み上げられるのを防ぎ、制作者の意図した意味を伝えられる。

判断フロー

絵文字を使う
  ├─ 意味がない（装飾的で意味を伝える必要がない）
  │    └─ aria-hidden="true"
  │
  └─ 意味がある
       ├─ Unicode名で意図が伝わる
       │    └─ 素のままでOK
       │
       └─ Unicode名と意図が異なる
            └─ role="img" + aria-label

理由

H86によると、このマークアップが必要な理由は以下の通り。

<span> には alt 属性が使えない
汎用要素に直接 aria-label を付けることはARIA仕様で禁止されているため、role="img" で画像要素として定義する必要がある

role="img" を付けることで、ブラウザはアクセシビリティツリー上で絵文字を画像として公開し、aria-label の値をアクセシブル名として使用する。これにより、どのスクリーンリーダーでも一貫した読み上げが保証される。

概要

状況

WCAGでの位置付け

スクリーンリーダーの読み上げ

2025年現在のネイティブサポート

方法

意味のある絵文字

装飾的な絵文字

複数の絵文字を組み合わせる場合

判断フロー

理由

参考資料