アクセシビリティの観点から見た絵文字・ステッカー：スクリーンリーダーはどのように読み上げるのか
- 同じ絵であっても、解釈の仕方は異なります。
- 画面上で1行の絵文字が、耳に長く聞こえる理由。
- 絵文字は自動的に読み込まれますが、その意味が保証されるわけではありません。
- 代替テキストは、短く、役割に合った内容で記述する必要があります。
- アクセシビリティを考慮した文章構成とDecoBlocks。
- 自分で修理する際に、最も頻繁に問題となる箇所。
- 私の文章において、何をどのように修正すればよいでしょうか。
- よくある質問
- Q. 私のウェブサイトでは、絵文字とステッカーをどのようにして分類し、確認すればよいでしょうか？
- Q. WordPressの絵文字は、スクリーンリーダーで常に同じ言葉で読み上げられますか？
- Q. この問題をツールを使って簡単に解決できますか？ どのようなツールを使用すればよいですか？
- Q. アクセシビリティのチェックを完了した長い文章の構造は、どのように表示すればよいでしょうか？
- WordPress関連のプラグイン
画面には、笑顔の人物がわずかに映っています。しかし、スクリーンリーダーを使用している読者にとっては、その画像が全く異なる言葉で表現される可能性があります。
WordPressに入れた絵文字とキャラクターステッカーは、どのように読み上げられるのでしょうか？ 視覚的に親しみやすい要素を音声環境でも負担なく伝えるには、どのように表示すればよいでしょうか？
同じ絵であっても、解釈の仕方は異なります。
絵文字は、文字のように扱われることがよくあります。これらは、Unicodeという文字体系に含まれる文字であるか、複数の文字が組み合わさって作られたものとして扱われます。
Unicodeには、各絵文字に対して短い名前と検索用のキーワードが用意されています。これらの名前は音声で読み上げることができますが、実際の表示は、ユーザーの言語設定やデバイスの環境によって異なる場合があります。
一方、キャラクターステッカーは通常、画像です。スクリーンリーダーは、画像に描かれたキャラクターを直接表示するのではなく、画像に付随する代替テキストや、アクセス可能な名前を読み上げます。
絵文字は、自動解釈が行われる文字に近いです。 ステッカーは、運営者が表示する名前を決定する必要がある画像に近いです。
同じ画像でも、結果は異なります。
画面上で1行の絵文字が、耳に長く聞こえる理由。
ブログの記事を読んでいたある読者が、複数の絵文字に遭遇したとしましょう。 読者の目には、5つの笑顔の絵文字が一度に見えるかもしれませんが、スクリーンリーダーはそれらを順番に読み上げることができます。
NVDAプロジェクトの公開された問題点には、繰り返される絵文字が一つずつ読み上げられるため、発話が長くなるという問題が取り上げられていました。2018年7月11日に登録されたこの事例は、装飾のように見える繰り返しが、音声環境においては大きな読み上げの負担になる可能性があることを示しています。
W3Cも、絵文字の基本的な名前が、投稿者が意図した意味と異なる可能性があると説明しています。投稿者は「大丈夫」という意味で絵文字を使用しましたが、音声ではその絵文字の形状を表す名前だけが伝わる可能性があります。
目に見える意味と耳に聞こえる意味が一致しないことです。
そのため、ブログの運営者は「見た目が美しいだけでは十分ではないのではないか」という疑問を改めて抱くことになります。
絵文字は自動的に読み込まれますが、その意味が保証されるわけではありません。
簡潔に答えると、以下のようになります。絵文字は、デバイスや音声合成装置によって解釈された名前として読み上げられる可能性がありますが、キャラクターステッカーの場合、代替テキストが事実上全てです。
絵文字が読み込まれるだけで、それが全てではありません。
同じ絵文字は、ユーザーの言語や実装環境によって、異なる名前で認識されることがあります。新しい絵文字や組み合わせが追加されると、バージョンによって解釈が異なる場合があります。
そのため、文中で必要な意味を単一の絵文字だけに委ねることは避けるべきです。見た目よりも、その要素が読者にどのような意味を伝えるべきかをまず決定する必要があります。
絵文字の基本的な名前が文脈と合わない場合、役割と名前を直接定義して説明することも可能です。W3Cは、そのような場合に、絵文字の役割を指定し、アクセス可能な名前を提供する方法について説明しています。
代替テキストは、短く、役割に合った内容で記述する必要があります。
アクセシビリティにおいて最も重要な基準は、絵文字やステッカーが情報に貢献しているかどうかです。単に画面を装飾しているのか、内容を説明しているのか、クリック可能な機能を持っているのかを区別してください。
- 装飾用：本文の意味を変えない範囲で、内容が読めないようにします。
- 情報：文脈に必要な意味を簡潔に説明します。
- 機能：見た目ではなく、ボタンやリンクの目的を記述します。
装飾用のステッカーの場合、画像の代替テキストを空白にすることができます。説明文を付加すると、スクリーンリーダーが不要な情報を読み上げ、本文の流れが途切れる可能性があるためです。
装飾は静かであるべきだ.
一方で、情報画像の場合、重要な内容を簡潔に記述する必要があります。周囲の文章が既に同じ意味を説明している場合は、空白の代替テキストを使用することで、冗長な読み上げを防ぐ方が適切です。
クリック可能なキャラクターの場合、「笑顔のキャラクター」などと記述しないでください。「コメントを見る」や「次の記事へ」のように、その要素がどのような機能を持つのかを具体的に記述する必要があります。
機能性画像は、見た目よりも目的が重要です。
アクセシビリティを考慮した文章構成とDecoBlocks。
アクセシビリティを確認した後でも、文章の視覚的な流れを整理することができます。DecoBlocksは、WordPressの記事に吹き出し、ボックス、強調表示、目次、装飾効果などを追加できるプラグインです。Section Box (Solid)を使って、案内や注意書きをまとめ、Divider Line – Solidを使って、領域を区切ることができます。
ステッカーを追加する際には、「Insert Character Sticker」でインストールしたステッカーパックに含まれるキャラクターステッカーを追加できます。ただし、ステッカーが装飾用であるか、情報提供用であるか、機能的なものであるかを運営者が個別に判断する必要があり、代替テキストとアクセス可能な名前も、その役割に合わせて適切に設定する必要があります。
自分で修理する際に、最も頻繁に問題となる箇所。
実際に問題が発生するのは、WordPressに画像を挿入した後の段階です。ファイル名を代替テキストのように使用したり、キャラクターの外見を詳細に記述したり、装飾用の画像ごとに同じ説明を繰り返したりすることが容易です。
絵文字を複数使用して感情を表現した文章は、より理解が困難です。画面上では可愛らしいように見えるかもしれませんが、スクリーンリーダーを使用すると、同じ名前の絵文字が連続して読み上げられるため、読者が本文に到達するまでに時間がかかる場合があります。
可愛らしさが、読む上での負担になる場合もあります。
実際に確認する場合にも、限界があります。私のコンピューターで一度正常に聞こえたとしても、すべての訪問者に対して同じ音が保証されるわけではありません。
ブラウザ、オペレーティングシステム、スクリーンリーダー、音声合成機の組み合わせによって、読み込み方や表示が異なる場合があります。代替テキストを省略すると、一部のスクリーンリーダーがファイル名を読み込む可能性があります。
一方で、アクセシビリティを考慮すると謳いながら、装飾用のステッカーに説明文を付けると、読み上げがさらに長くなります。優れた説明とは、多くの情報を詰め込むのではなく、必要な役割のみを果たす説明です。
自動検査は、意味までを判断することはできません。
自動検査が意味を特定できない場合、文章の視覚的な構造と文の意味をそれぞれ確認する手法が必要となります。DecoBlocksのAuto Table of Contentsは、投稿後に文章のH2およびH3の見出しに基づいて目次を作成します。
長い文章の内容を把握するために必要な見出し構造を目次として表示することができます。目次やボックスなどの装飾要素は、代替テキストやアクセシブルな名前を代替するものではないため、それらの判断は別途行う必要があります。
私の文章において、何をどのように修正すればよいでしょうか。
まず、文章に含まれる絵文字とステッカーを3つのカテゴリーに分けます。装飾用であれば、内容を読まないようにし、情報提供を目的とする場合は、意図した意味を簡潔に記述し、機能的な場合は、クリック後に起こることを記述します。
感情や状態を補う絵文字は、形状の名前よりも文脈に基づいて考えるべきです。例えば、読者が知るべきことが「笑顔」ではなく「お祝いの気持ち」である場合、伝えるべき意味もその点に合わせる必要があります。
繰り返しは避けることが安全です。文章の最後に同じ絵文字を何度も続けて使うよりも、必要な感情や状態を短い言葉で一緒に記述する方が、音声環境においてはより適切です。
繰り返しよりも、文が明確です。
公開後、NVDAまたはVoiceOverのいずれかを使用して、実際に読み上げを聞いてみてください。装飾が適切に表示されているか、情報が意味通りに伝わるか、ボタンが意図した機能を果たしているかを確認します。
結局、基準は「画面上で美しいか」ではありません。「読者が実際に利用できない場合でも、同じ意味と機能を提供できるか」が基準です。
同じ意味と機能が重要です。
絵文字やステッカーを使用する際には、画面の装飾よりも、読者が受け取るべき意味と機能をまず決定する必要があります。その後、実際にスクリーンリーダーで読み上げを確認し、必要な部分のみを視覚的に整理すれば問題ありません。
DecoBlocksは、吹き出し、ボックス、目次、区切り線、キャラクターステッカーなどをWordPressの記事に挿入し、このような構成作業を支援します。ただし、アクセス可能な名前と代替テキストの判断は、各要素の役割に応じて、運営者が直接行う必要があります。
よくある質問
Q. 私のウェブサイトでは、絵文字とステッカーをどのようにして分類し、確認すればよいでしょうか？
A. まず、装飾用、情報提供用、機能用というように分類してください。
装飾的な要素は読み上げられないように設定し、情報に関わる部分は必要な意味を簡潔に記述し、機能に関わる部分は、クリック後に起こる動作を記述してください。公開後には、NVDAやVoiceOverなどのスクリーンリーダーを使用して、実際に読み上げられる内容を確認してください。
Q. WordPressの絵文字は、スクリーンリーダーで常に同じ言葉で読み上げられますか？
A. いいえ。読み込まれる名前や表現は、言語設定、ブラウザ、オペレーティングシステム、スクリーンリーダー、音声合成器の組み合わせによって異なる場合があります。
Q. この問題をツールを使って簡単に解決できますか？ どのようなツールを使用すればよいですか？
A. アクセシビリティ検査ツールとスクリーンリーダーを組み合わせて使用することができます。ただし、自動検査だけでは文脈における意味を判断することが難しいため、公開後に実際に読み上げを聞いて確認することが安全です。
Q. アクセシビリティのチェックを完了した長い文章の構造は、どのように表示すればよいでしょうか？
まず、タイトルと文章の流れを整理し、必要な箇所のみを視覚的に区切ればよい。
DecoBlocksのAuto Table of Contentsは、投稿後にH2およびH3の見出しに基づいて目次を作成し、Section Box (Solid)は、関連する内容をボックス内にまとめて表示します。目次とボックスは、スクリーンリーダーが読み上げる名前や代替テキストを自動的に設定する機能ではありません。そのため、画像や機能要素の意味は、別途確認する必要があります。
