意味ではなく名前で読み上げられる絵文字

マークの意味はリストの後の見方にしか書かれておらず、商品の行でマークが持つテキストは絵の名前だけです。きらきらは何も伝えないのに、見出しの一部として読まれます。

各マークを role="img" の span で囲んで一つの画像にし、このメニューでの意味を表す aria-label を付けます。この名前が絵文字自体の名前の代わりになり、スクリーンリーダーは「サワードウブレッド、小麦を含む、ヴィーガン」と読み、スクリーンリーダーによっては各マークの後に「画像」や「グラフィック」と加えます。きらきらは aria-hidden="true" で囲むため、見出しは「本日の焼きたて」と読まれます。見方の絵文字も同じように隠します。隣の言葉がすでに意味を伝えているからです。見た目は修正前とまったく同じで、それがこの方法の限界です。意味はスクリーンリーダーには届きますが、画面上の各マークは絵のままで、利用者は見方で一つずつ確かめる必要があります。また、aria-label を翻訳しないページ翻訳ツールもあります。

どちらの方法でも、絵の名前がすべて意味に置き換わり、きらきらは読まれなくなるため、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は、それがないアスキーアートです）。

絵は環境によって変わる。 絵文字の絵は、プラットフォームごとに独自にデザインされています。同じ文字が、別のスマートフォンでは違う植物に見えることもあります。意味を絵の細部に頼ることはできず、これも言葉で書く理由の一つです。