絵文字を使ったアクセシブルなコンテンツデザイン
Nov 10, 2021この記事はUX Writers Collectiveのブログ: Accessible content design for emojisの翻訳転載です。著者のジェイソン・フォックスさんの許可を得て公開しています。
絵文字は、デジタルの世界で感情を伝える方法を変えました。数々のブランドが顧客との関係を築くために絵文字を採用しています。しかし、スクリーンリーダーなどの読み上げ支援技術に頼っている人は、絵文字に依存しているコンテンツを理解するのが難しいかもしれません。では、コンテンツデザインを通じて、絵文字にアクセスしやすくするにはどうすればよいでしょうか？
このアクセシビリティへの配慮にはさまざまな手段がありますが、中には手間のかかるものもあります。まずは、次の3つの重要な問題から考えてみましょう。
1.絵文字のデフォルトの文字情報は、音声として読み上げられた場合、付随したテキストのメッセージの意味合いを変えてしまう場合があります。
2.絵文字のデフォルトの文字情報を読み上げると、重要な情報が失われてしまうことがあります。
3.似たような色や形の絵文字は、画面の拡大機能を利用しても、さまざまなレベルの視覚能力を持つ人々には見分けがつかない場合があります。
絵文字とのぶつかり合い
私が絵文字について考え始めたのは、Chimeのコンテンツデザイナーとしての最初の数週間でした。Chimeは絵文字が大好きで、コンテンツデザインの要素として絵文字を使うことについて、もっと学びたいというのが私たちの共通の意見でした。
そこで、私はSlackでContent Design Londonの絵文字ガイドラインについて話題を振ってみましました。
- 言葉の代わりに絵文字を使わない。
- 伝えようとしている感情を表現する唯一の手段として絵文字を使用しない。
- 広く認知されている一般的な絵文字を使用する。
- デバイス間でうまく変換できる絵文字を使用する。
- 絵文字は文末に配置し、繰り返し使用したり、多用したりしない。
- 顔文字ではなく絵文字を使用する。
- ダークモードとライトモードの両方で見えない絵文字は避ける。
チームとして、Chimeがプロダクト内で絵文字を使用している場面をContent Design Londonのガイドラインに照らし合わせて評価してみました。
ブラッド・モナハン氏より
このメッセージを見ただけで、この絵文字の使い方は、ガイドライン1の「言葉の代わりに絵文字を使わない」から外れています。この配慮は、絵文字がスクリーンリーダーによってどのように読まれるかという点で、アクセシビリティに影響します。これらの絵文字の代替(alt)テキストは何で、スクリーンリーダーはこの通知をどのように読み上げるでしょうか？
マイク・ホムニック氏より
私は個人的に、稲妻の絵文字の例が、いかに感情に訴えるものであるか、いかに一貫して使われているかという点で気に入っています。しかしこれは、ガイドライン2の「感情を表現する唯一の手段として絵文字を使用しない」を逸脱している可能性があります。もし、この感情に言葉や言い方を加えるとしたら、それはどのようなものでしょうか？ピカッ？ズドン？
アオニ・ ワン氏によるデザインの探求
絵文字を箇条書きにするのは、広く採用されているコンテンツパターンなので、Content Design Londonのガイドラインに含まれていないのは驚きです。では、これらの絵文字の代替テキストをスクリーンリーダーはどのように読み上げるでしょうか？
💰「3月の（賞金袋）はチャイムから無料でブーストがもらえます」
🎟️「（チケット）ブーストは延長しません」
「チケットブースト」は、新規会員には機能の名称と誤解させてしまい、ブーストについて知る過程で必要以上に混乱してしまう可能性があります。
絵文字は、ユーザーによっては理解しづらい場合がある
しばらく話しているうちに、Chimeのメンバーの中には、読み上げ支援技術に頼っている人がいて、絵文字を使ったコンテンツを理解するのに苦労するかもしれないことに気づきました。
そこで私たちは、3種類の読み上げ支援技術を使って絵文字を調査することにしました。
スクリーンリーダー
スクリーン・リーダーは、テキストと画像のコンテンツを音声または点字に変換します。スクリーン・リーダーを使用するのは、目の不自由な方、視覚障がいのある方、読み書きのできない方、学習障がいのある方などです。モバイルデバイスでは、スクリーンリーダーは絵文字のデフォルトの説明文を自動的に読み上げます。
拡大鏡
画面上の特定のエリアを拡大できるユーティリティ。このタイプのテクノロジーは、さまざまな視覚能力を持つ人がコンテンツにアクセスできるようにします。拡大鏡は、さまざまな種類の絵文字を識別して区別するのに役立ちます。
大きな文字
文字のサイズを大きくすることで、さまざまな視覚能力を持つ人が画面上の文字を快適に見ることができます。
スクリーンリーダーの使用に関する一般的なデータ
Chimeメンバーの何人が上記の支援技術を使用しているかはお見せできませんが、StackExchangeのスレッドで見つけた一般的なデータをいくつかご紹介します。
スクリーンリーダーの使用データ：
- 米国の人口は3億2,600万人(出典)
- 米国人口の88.5%がインターネットを利用している(出典)
- 米国人口の2.3%が視覚障がいを持っている(出典)
- 障がい者の54%がインターネットを利用している（出典、出典2）
- スクリーン・リーダーを使用している人の89.2％が障がい者（出典）
問題は不便さだけではない
デザイン性の低い絵文字コンテンツによる体験は、メンバーに大きな苦痛を与える可能性があります。具体的には、以下の3つのシナリオが考えられます。
シナリオ#1
絵文字のデフォルトの説明文は、音声として読み上げられた場合、付随するテキストのメッセージの意味合いを変えてしまう場合があります。
文章例：🚫手数料なし
スクリーンリーダーで読むと：（車両通行止め）手数料なし
シナリオ#2
絵文字のデフォルトの説明文を音声で読み上げると、メッセージから重要な情報が失われてしまうことがります。
文章例：⚡️の支払いのために、口座振り込みの詳細を🧐してください。
スクリーンリーダーで読むと：（雷）の支払いのために、口座振り込みの詳細を（片メガネをかけた真面目な顔）で確認してください。
シナリオ#3
似たような色や形の絵文字は、画面の拡大機能を利用しても、さまざまなレベルの視覚能力を持つ人々には見分けがつかない場合があります。
例：
カードはお手元に届きましたか？（黄色い何か）（黄色い何か）
デザインプロセスに絵文字への配慮を盛り込む
絵文字にアクセスできないという問題には、さまざまな解決策が考えられます。デザイン、プロダクト、リサーチ、エンジニアリングのパートナーと話し合い、チームにとって最適なアプローチを検討してください。
Chimeでは、最初にできること、やるべきこととして、（CDLの絵文字ガイドラインの表現に若干手を加えた）チェックリストを確認しました。その内容は以下の通りです。
- 絵文字が言葉の代わりに使われていないことを確認する。
- 感情を表現する唯一の方法が絵文字ではないことを確認する。
- 一般的で、広く認知されている絵文字を使用する。
- デバイス間でうまく変換できる絵文字を使用す。
- 絵文字は文末に配置し、繰り返したり、多用したりしない。
- 顔文字ではなく絵文字を使用する。
- ダークモードとライトモードの両方で見えない絵文字は避ける。
チェックリストに沿って作業を進めたら、最後にもうワンステップあります。その絵文字のデフォルトの説明文でメッセージを書き出してみて、意図した意味や感情が伝わっているか？伝わっていれば、次に進みます。そうでない場合は、付随するアクセシビリティラベルを書きます。
将来的には、どうすればいいのか？
Chimeのエンジニアであるルーシー・リュー氏のおかげで、現在および将来的にテストできる様々なソリューションを確認できました。
これらのソリューションを通して、コンテンツがどのように管理されているか、その状況を考慮することが重要です。例えば、コンテンツがハードコーディングされている（ソースコードに直接書かれている）場合、アクセシビリティラベルを埋め込むのは簡単ですが、アプリをアップデートしないと簡単に編集できないというデメリットがあります。
コンテンツがサーバー駆動型であれば、アクセシビリティラベルを提供する機能を埋め込むことができるかもしれませんが、これには追加の検討とエンジニアリング作業が必要です。
スクリーンリーダーに一貫したアクセシビリティラベルを提供する
ルーシーによると、スクリーンリーダーは、絵文字のデフォルトの説明文を自動的に読み上げます。これは、ほとんどのスクリーンリーダーのデフォルト設定です。しかし、代わりにカスタムのアクセシビリティラベルを読み上げるようにスクリーンリーダーに指示することもできます。たとえば、次のようになります。
<text accessibilityLabel=”Just kidding haha”>Just kidding 😂 </text>
アクセシビリティラベルを他の言語と一緒に提供する
{ title:
{ en: “Just kidding 😂” },
{ es: “<es uno broma> 😂” },
{ ac: “Just kidding haha” },
}
細部にまでこだわったアクセシビリティ
この記事でご紹介した内容は、アクセシブルなコンテンツデザインのほんの一部に過ぎません。結局のところ、これは絵文字に限った話です。しかし、細部を正しく理解するには時間がかかりますので、今すぐ始めてください。アクセシブルなコンテンツに向けて可能な限りのステップを踏むことで、さまざまな能力を持つ人々がデジタルプロダクトを利用できるようになります。
Chimeでは、絵文字のアクセシビリティへの配慮をデザインプロセスに組み込んでいます。また、アクセシビリティとインクルーシビティの精鋭が毎週ミーティングを行い、小さなステップでも前進していることをお互いに確認しています。
