アクセシブルな絵文字の使用：読み上げてもテキストが理解可能であること

スクリーンリーダーで閲覧する人は、絵文字をその名称を通じて知覚することがよくあります。名称は、著者が意図した比喩的な意味と必ずしも一致するとは限りません。この点について、W3C H86 のガイドラインでも特に注意を喚起しています。 出典：W3C H86

伝えたいことをテキストで書き出す

短い例：

金曜日に ☕、その後 📞、最後に 📄。

この文は視覚的にも複数の解釈が可能です。コーヒーを飲むこと、電話での打ち合わせ、ドキュメントの送信を意味するのでしょうか？ これらはいつ行われ、誰の責任なのでしょうか？ 記号の名称を読み上げるだけでは、これらの質問には答えられません。

より正確なバージョン：

金曜日の 9 時にコーヒーを飲みながら会いましょう。その後、サプライヤーに電話し、午後に要約を送ります。

コーヒーにカップの絵文字を追加したい場合でも、文は完全な形を保ってください。告知では、日付、場所、価格、実行すべきタスクもテキストで記載してください。ソーシャルメディアのアクセシビリティに関する推奨事項も、この解決策を支持しています。 出典：NCDIT, Social Media Content Accessibility

長い記号列は読み上げると長いリストになる可能性がある

「おめでとうございます！ 🎉🎉🎉🎉🎉」というメッセージでは、スクリーンリーダーが同じ名称を何度も読み上げる可能性があります。単一の記号で試してみてください：「結果おめでとうございます！ 🎉」 このようにすれば、文をより短く聴き終えることができます。記号は、段落の末尾など、自然な区切り位置に置くのが効果的です。 出典：Section508.gov、ソーシャルメディア

インターフェースがサポートしている場合は、リストで実際のリスト形式を使用してください。各行の先頭に同じアスタリスク、チェックマーク、指の絵文字を挿入する場合、繰り返される記号がどのような情報を提供するか考えてみてください。シンプルな番号付けや組み込みのリスト形式の方が、追跡しやすい構造になることがよくあります。

一方で、絵文字自体がテーマとなる比較では、複数の記号を示すことが正当です。その場合は、名前と違いの説明を併記してください。これにより、読者は画像を区別できなくても、要点を把握できます。

自身のウェブサイトでは何ができるか？

絵文字が独自の意味を持つ場合、HTMLでアクセシブルな名前を割り当てることができます。W3C が紹介している方法に準拠した独自の例：

<span role="img" aria-label="送信に成功しました">✅</span>

この例では、アクセシブルな名前が送信の成功を伝えています。aria-label は視覚的な読者にはラベルとして表示されないため、重要な状態は目に見えるテキストでも書き出してください。ボタンのラベルは操作を明確に示す必要があります：例えば「コピー」。

画像ファイルとして挿入された絵文字の場合、img 要素の代替テキストは、画像の役割に基づいて決定してください。画像の横にすでに同じ情報が完全に記載されており、グラフィックが新たな意味を加えない場合、空の alt="" が適切かもしれません。W3C の画像に関するガイドラインでは、この状況依存の判断について詳しく説明しています。 出典：W3C, Decorative Images

検証は最終的なインターフェースで行うこと

ソーシャルメディアの投稿では、技術的な選択肢が一般的に制限されているため、よく書かれた文が特に重要です。アクセシブルな名称の扱いは、システムやアプリによって異なる可能性があります。単一のHTMLソリューションや成功したテストだけでは、ページ全体のアクセシビリティを保証できません。

実用的な検証のため、記号なしでテキストを読み、その後スクリーンリーダーを使って最終的なインターフェースで聴いてください。不要な情報がどこで繰り返されているか、文がどこで途切れているか、説明されていない示唆が残っていないかを確認してください。修正後、同じ場所でテストを繰り返してください。

まずは、よく使われる投稿や顧客メッセージを選んでください。不要な記号列を短縮し、欠落している単語を書き出すことは、具体的で検証可能な変更になります。