# 意味ではなく名前で読み上げられる絵文字
Source: https://easeweb.dev/learn/emoji
Topics: 画像とメディア > 絵文字や記号が意味を伝えるか、飾りなら読み飛ばされる (WCAG 1.1.1)
The fix: 絵文字ごとに意味があるかを決め、名前を付けるか隠します。意味のある絵文字は role="img" と、その意味を表す aria-label を持つ要素で囲むか、意味をテキストとして隣に書き、絵文字は aria-hidden="true" で隠します。どちらの方法でも、飾りの絵文字は aria-hidden="true" にします。
Test with: screen reader
References: https://www.w3.org/WAI/WCAG22/Understanding/non-text-content.html https://www.w3.org/WAI/WCAG22/Techniques/aria/ARIA6 https://www.w3.org/WAI/WCAG22/Techniques/failures/F71 https://www.w3.org/WAI/WCAG22/Techniques/failures/F72 https://www.w3.org/WAI/WCAG22/Techniques/html/H86 https://unicode.org/emoji/charts/emoji-list.html https://developer.mozilla.org/en-US/docs/Web/Accessibility/ARIA/Reference/Roles/img_role
よくある問題を再現した学習用のサンプルです。実在のクライアントの診断結果ではありません。コードは出発点となる実装例のため、実際の製品でも確認してください。ここでは支援技術でのテスト結果は報告していません。
## 場面
あるパン屋は、Webサイトで注文を受け付けています。「✨ 本日の焼きたて ✨」という見出しの下に並ぶ商品には、アレルゲンの一覧の代わりに小さな絵文字が付いていて、リストの下の「マークの見方」に意味が書いてあります。🌾は小麦を含む、🥛は乳を含む、🥜は落花生を含む、🌱はヴィーガン向けです。見える人は、マークを見方と照らし合わせて、サワードウブレッドがヴィーガン向けで、クロワッサンには乳が入っていると分かります。スクリーンリーダーは、見出しを「きらきら 本日の焼きたて きらきら」と読み、続けて「サワードウブレッド、稲、新芽」「バタークロワッサン、稲、牛乳入りのコップ」「ピーナッツクッキー、ピーナッツ、新芽」と読みます。絵文字はどれも、店が込めた意味ではなく、絵の名前で読まれます。小麦を避けたい人には、どの商品でも「稲」と聞こえ、ヴィーガンの人には「新芽」と聞こえます。見方はリストの後に「マークの見方：稲 小麦を含む」のように読まれるため、意味が分かるのは最後で、しかもどの商品にどの絵の名前があったかを覚えている場合だけです。意味どおりに読まれるのは、たまたまピーナッツだけです。
## 確認できる問題
絵文字はテキストの中の文字ですが、働きは小さな画像と同じです。意味は描かれた絵と、この例ではパン屋が独自に決めた約束事で決まります。スクリーンリーダーが読み上げるのは、絵文字ごとに決まった、絵を表す名前です。たとえばNVDAが使うのはUnicode CLDRの名前で、🌾は「稲」、🌱は「新芽」です。商品の行でマークが持つテキストは、この名前だけです。1.1.1 非テキストコンテンツは、マークと同じ目的を果たすテキストの代替を求めています。ここでの目的は「小麦を含む」「ヴィーガン」を伝えることですが、行の中ではどちらも読まれず、それを書いた見方はリストの後に読まれます。きらきらは、これとは逆の理由で1.1.1を満たしません。1.1.1は、飾るだけのものを支援技術が無視できるように実装することを求めていますが、きらきらは見出しに移るたびに、言葉の前後で2回読まれます。
## 利用者への影響
マークを選んだ人には分かりやすく見えても、その意味は約束事です。新芽がヴィーガン、稲穂が小麦を表すという決まりは、見方にしか書かれていません。また、絵文字はWindows、Apple、Androidでそれぞれ違う絵で描かれるため、店が選んだ絵と、利用者に見える絵は同じとは限りません。
## 自動チェックとAIの限界
axe などのツールには、絵文字を確認するルールがありません。見出しにもリストの項目にもテキストがあるため、ページは合格になります。仮にすべての絵文字を見つけるツールがあっても、意味のあるマークと飾りを区別したり、ここでの意味を判断したりはできません。この診断では、見出し、リンク、ボタン、ラベル、リストの項目、表のセルにある絵文字を、人が確認する候補として報告し、よく似た数学用の文字で書いた言葉を問題として報告します。AIによる手早い修正では、絵文字に絵の内容どおりの名前（「小麦」「新芽」）を付けて、意味ではなく見た目を伝えてしまうか、読み上げを止めるためにすべての絵文字を隠して、アレルゲンの情報そのものを消してしまいがちです。どのマークに意味があり、何を表すかは、メニューを知る人にしか判断できません。
## 修正前：アレルゲンのマークと見出しの飾りに絵文字をそのまま使う
```html
✨ 本日の焼きたて ✨
-
サワードウブレッド
🌾 🌱
-
バタークロワッサン
🌾 🥛
-
ピーナッツクッキー
🥜 🌱
マークの見方：
🌾 小麦を含む
🥛 乳を含む
🥜 落花生を含む
🌱 ヴィーガン
```
```css
.bakes li { display: flex; align-items: center; gap: 12px; }
.marks { margin-inline-start: auto; }
```
マークの意味はリストの後の見方にしか書かれておらず、商品の行でマークが持つテキストは絵の名前だけです。きらきらは何も伝えないのに、見出しの一部として読まれます。
## 修正後：マークに意味で名前を付ける
```html
✨
本日の焼きたて
✨
-
サワードウブレッド
🌾
🌱
-
バタークロワッサン
🌾
🥛
-
ピーナッツクッキー
🥜
🌱
マークの見方：
🌾 小麦を含む
🥛 乳を含む
🥜 落花生を含む
🌱 ヴィーガン
```
```css
.bakes li { display: flex; align-items: center; gap: 12px; }
.marks { margin-inline-start: auto; }
```
各マークを `role="img"` の `span` で囲んで一つの画像にし、このメニューでの意味を表す `aria-label` を付けます。この名前が絵文字自体の名前の代わりになり、スクリーンリーダーは「サワードウブレッド、小麦を含む、ヴィーガン」と読み、スクリーンリーダーによっては各マークの後に「画像」や「グラフィック」と加えます。きらきらは `aria-hidden="true"` で囲むため、見出しは「本日の焼きたて」と読まれます。見方の絵文字も同じように隠します。隣の言葉がすでに意味を伝えているからです。見た目は修正前とまったく同じで、それがこの方法の限界です。意味はスクリーンリーダーには届きますが、画面上の各マークは絵のままで、利用者は見方で一つずつ確かめる必要があります。また、`aria-label` を翻訳しないページ翻訳ツールもあります。
## 修正後：絵文字の隣に意味を書く
```html
✨
本日の焼きたて
✨
-
サワードウブレッド
🌾 小麦を含む
🌱 ヴィーガン
-
バタークロワッサン
🌾 小麦を含む
🥛 乳を含む
-
ピーナッツクッキー
🥜 落花生を含む
🌱 ヴィーガン
```
```css
.bakes li { display: flex; align-items: center; gap: 12px; }
.marks { margin-inline-start: auto; }
.mark { display: inline-block; border-radius: 999px; padding: 2px 10px; background: #f3ede4; }
```
各マークを、意味を書き込んだ小さなラベルにします。絵文字は言葉の隣の飾りになるため、`aria-hidden="true"` で隠します。スクリーンリーダーは「サワードウブレッド、小麦を含む、ヴィーガン」と、絵の名前も「画像」も挟まずに読みます。見える人にも見方は要らなくなるため、外します。言葉なので、ページのほかの部分と同じように翻訳や拡大ができ、見た目も変えられます。
## どの方法を選ぶか
どちらの方法でも、絵の名前がすべて意味に置き換わり、きらきらは読まれなくなるため、1.1.1を満たします。マークに名前を付ける方法はマークアップを変えるだけで、行はこれまでどおりコンパクトなままですが、その言葉は支援技術にしか届きません。画面を見る人は、新芽がヴィーガンを表すことを見方で確かめる必要があります。絵文字の隣に意味を書く方法は普通のテキストで済み、ページを読むすべての人に伝わり、ARIAに任せるものが残りません。代わりに、行の幅を取ります。こちらを使ってください。名前を付けた絵文字を使うのは、情報の詰まった表など、言葉を置く余白が本当にない場所だけにし、その場合は近くに凡例を表示します。
## 実装の判断
**名前を付けるか隠すかを、一つのコンポーネントで決める。** 多くのサイトでは、絵文字はメニューのマーク、バッジ、見出しなど、いくつかのテンプレートで追加されます。それらに共通のコンポーネントを用意し、ラベルを受け取るようにします。ラベルがあれば `role="img"` と `aria-label` を出力し、なければ `aria-hidden="true"` を出力します。こうすれば絵文字ごとに毎回判断する必要がなく、名前も `aria-hidden` もない絵文字がレビューで目立ちます。
**絵文字だけでなく記号も。** マークとして使う記号の文字も同じです。比較表の ✓ と ✗、評価の ★、「次へ」の意味の → などです。「チェック」のような名前で読まれるものも、飛ばされるものもあり、どうなるかはスクリーンリーダーと句読点の読み上げ設定によって違います。意味で名前を付けるか、意味を隣に書きます。
**利用者が書いた絵文字。** レビュー、コメント、チャットの絵文字は書いた人自身の言葉で、それぞれにどんな意味を込めたかはページには分かりません。そのままにしておきます。このガイドで扱うのは、サイト自身が加えるマークと飾りです。
**飾り文字。** 文字を 𝐛𝐨𝐥𝐝、𝘪𝘵𝘢𝘭𝘪𝘤、𝓈𝒸𝓇𝒾𝓅𝓉 のように変える変換ツールは、各文字を、Unicodeの数学用英数字記号にあるよく似た文字に置き換えます。スクリーンリーダーは1文字ずつ名前で読むか、読み飛ばします（W3Cの失敗例F71）。普通のテキストで書き、見た目はCSSで付けます。文字で描いたアスキーアートや顔文字（`¯\_(ツ)_/¯` など）も同じで、W3Cの達成方法H86のように、`role="img"` と `aria-label` を持つ要素で囲みます（失敗例F72は、それがないアスキーアートです）。
**絵は環境によって変わる。** 絵文字の絵は、プラットフォームごとに独自にデザインされています。同じ文字が、別のスマートフォンでは違う植物に見えることもあります。意味を絵の細部に頼ることはできず、これも言葉で書く理由の一つです。
## 修正の確認
1. ブラウザーのアクセシビリティツリーで、各マークが意味（「小麦を含む」「ヴィーガン」）を名前に持つ画像であるか、ツリーになく意味がテキストとしてあることを確認する。見出しの名前が、きらきらのない「本日の焼きたて」であることも確認する。
2. スクリーンリーダーで見出しから一覧を読む。各商品のマークが意味として一度だけ読まれ、「稲」「新芽」のような絵文字の名前が読まれないことを確認する。
3. メニューを知る人に、各名前や言葉とマークを見比べてもらい、表示されたマークがすべて読まれること、言葉が絵の内容ではなく、ここでの意味を表していることを確認する。
4. ページのソースで絵文字の文字を検索し、どれも `role="img"` と `aria-label` で名前を付けた要素の中にあるか、`aria-hidden="true"` の要素の中にあって意味がテキストとして隣にあることを確認する。
OS、ブラウザーと支援技術のバージョン、ビルド、実施日、各手順の実際の結果を記録してください。メニューのマークや、それを表示するコンポーネントを変更した際は、再度確認します。
## 制限
このサンプルは、どのアプリケーションでも同じ結果になることを保証するものではありません。クラス名、色、商品は仮のものです。絵文字の名前の出どころはスクリーンリーダーによって違い、バージョンや設定によっては読まないものもあるため、利用者が使う支援技術で確認してください。画像のアイコンやSVGを同じように使う場合も、同じ決まりに従います。[名前がない、または読まれてしまうSVGアイコン](/ja/learn/svg-icons)を参照してください。絵文字が飾りか意味を持つかは周りの内容で決まり、内容を知る人にしか判断できません。実際に使用する支援技術で、操作全体を確認してください。
---
このガイドをコーディングエージェントで使う: MCP https://easeweb.dev/mcp（設定は https://easeweb.dev/ja/services/developers）