よりアクセシブルなコンテンツを書くための簡易ガイド
Oct 02, 2022この記事はMediumのブログ: A brief guide to writing more accessible contentの翻訳転載です。著者のエリック・チャンさんの許可を得て公開しています。
Photo by Alexander Dummer on Unsplash
UXデザイナーは共感を得る達人、であるはずです。
それなのに、なぜデザイナーは多くのユーザー層を無視するのでしょうか？
障がいのある人々は、デザイン設計のプロセスで無視されがちです。彼らは、ユーザーリサーチやテストから除け者にされ、それがそのまま最終的なプロダクトの体験に落とし込まれています。
もちろん、一時的または状況的な障がいを経験する人も多くいます。そのためデジタルプロダクトを使う際に、同じようなフラストレーションを経験することになるのは言うまでもありません。
アクセシビリティの低さが原因で、訴訟に発展した企業もあります。プロダクトにアクセシビリティを組み込むことで、企業が訴えられることもなく、より多くの人々がアクセスしやすいプロダクトに仕上げることができます。
(Source: UsableNet — WHAT’S HAPPENING WITH DIGITAL ACCESSIBILITY IN 2022)
デジタルアクセシビリティの中で鍵を握るのは、すべてのユーザーに普遍的に受け入れられる、アクセスしやすいコンテンツを書くことです。
なぜデザイナーはアクセシブルなコンテンツを書くべきなのか？
コンテンツデザインの根底にあるのは、問題解決です。デザイナーは、ユーザーが問題を解決し、ゴールを達成するために、どのような情報が必要なのかを理解する必要があります。
「コンテンツデザインとは、一つの考え方である」
コンテンツデザインとは、データと証拠を用いて、オーディエンスが必要とするものを、必要とする時に、彼らが期待する方法で提供することです。
優れたコンテンツデザインは、より良いビジネスの成果をもたらします。事実、コンテンツはガイダンスや説明を提供することで、ユーザー体験全体に貢献し、ユーザーの定着率や顧客満足度を高めることができます。
コンテンツデザインとは、すなわち「理解すること」です。
- ユーザーが問題を解決し、ゴールを達成するために必要なコンテンツは何か？
- ユーザーはいつそのコンテンツを見るべきか？
- ユーザーはどのような方法でそのコンテンツを見たいのか？
- どのような語彙やトーンでコンテンツを表現すべきか？
ここでは、コンテンツをよりアクセシブルにするためのベストプラクティスをご紹介します。
言葉遣い
アクセシブルなコンテンツを書くためには、誰もが理解できる言葉を使わなければなりません。
多くの企業は、UXライターを雇い、ユーザーが理解しやすいシンプルで明快な言葉を使ってメッセージを作成しています。もし、あなたがUXライターやコンテンツデザイナーと一緒に働けるのなら、彼らをデザインプロセスに巻き込んでコピーを見直し、使われている言葉がブランドに合致していることを確認しましょう。
言葉遣いのベストプラクティス：
- 短く、分かりやすい文章と段落で書く。
- むやみに複雑な単語やフレーズを使用しない。
- 最初に頭字語を使うときに展開する。例えば、WCAGを「Web Content Accessibility Guidelines 」と表記するなど。
- 読者が知らない用語がある場合は、用語集の提供を検討する。
言葉遣いに関するさらなる情報は、W3.org - Keep content clear and conciseをご覧ください。
リンク
別のページにリンクするコンテンツを書くときは、そのリンクテキストがユーザーにとって説明的で意味のあるものであるものにします。
スクリーンリーダーのユーザーが、ページをタブ操作で移動すると、スクリーンリーダーは周囲のテキストを読み飛ばし、リンクにのみ焦点を合わせます。リンクにフォーカスが当たると、スクリーンリーダーは「リンク{テキスト}」と読みますので、そのテキストは文脈から意味がわかるようにしなければなりません。
「さらに詳しく」や 「ここをクリック」などの曖昧なテキストは使用しないでください。
たとえば、リンクのテキストが「エリックのMediumのプロフィール」であれば、スクリーン・リーダーは「リンク、エリックのMediumのプロフィール」と読み上げます。そうすると、ユーザーは、そのリンクがエリックのMediumのプロフィールにつながっているのだろうと知ることができます。
その反対に、リンクのテキストが「ここをクリックしてください」であれば、スクリーンリーダーは「リンク、ここをクリックしてください」と読むため、ユーザーは混乱した状態になります。
もし、リンク先が添付ファイルであれば、ファイルの種類やサイズなど、リンク先の内容を記述し、関連情報を含めるようにします。
例えば、「調査研究報告書（PDF、2MB）」のように。
リンクに関する詳しい情報は、W3.org - Link Purpose (In Context)をご覧ください。
画像の代替テキスト（altテキスト）
代替テキスト（altテキスト）は、画像にフォーカスが当たっているときに、スクリーンリーダーが読み上げるテキストです。また、画像の読み込みに失敗した場合、画像の代わりに表示されます。
画像のaltテキストは、視覚障がいのあるユーザーが、ページにどんな画像があり、それが他のコンテンツとどのように関連しているかを理解できるように、画像を説明するものです。テキストは、説明的で簡潔でありながら、詳細である必要があります。
Twitterの最新機能では、画像にaltテキストを追加するようユーザーに促しています。これは、アクセシブルなプロダクトを作るための良いステップと言えるでしょう。
(Source: The Verge — Twitter’s latest feature is a tool to make your feed more accessible)
代替テキストに関するベストプラクティス：
- 画像内のテキストはすべて要約するか、書き出す。
- 決して “～の画像"や “～の写真"で締めくくってはいけません。
- イラスト、チャート、スクリーンショットなど、画像の種類を説明する。
- キャプションですでに画像を説明している場合は、altテキストを簡素化し、キャプションの繰り返しを避ける。
代替テキストに関する詳しい情報は、W3.org - Image text alternatives ("alt text")をご覧ください。
ガイダンス
コンテンツは、ユーザーが特定のアクションを完了できるようにガイドとして使われることがよくあります。ガイダンスは、学習の過程でーザーがサポートされているように感じるのに役立ちます。
ユーザーは、事前のビデオチュートリアルやアクション完了後のフィードバックなど、さまざまな場面でガイダンスを期待することでしょう。
ガイダンスは、エンプティステート、手順プロセス、エラーメッセージなど、指示の形式で提供されます。
(Source: W3 — User Notification)
ガイダンスのベストプラクティス：
- ガイダンスは、あらゆる年齢層や知識レベルの人々にとって、明快で理解しやすいものにすること
- パスワードや日付の形式など、入力に関する条件を明記する。
- ユーザーによっては理解するための知識や文脈を持ち合わせていない場合があるので、むやみに専門的な言葉を使わないようにする。
- エラーメッセージを表示する際は、ユーザーを責めるような表現は避ける。
- 軽快なトーンや中立的なトーンでエラーを知らせ、解決策を示す。
- 読み上げツールを使ってメッセージを再生し、言葉が正しく、適切に聞こえることを確認する。
ガイダンスに関する詳しい情報は、Microsoft社の「Designing for Guidance（ガイダンスのためのデザイン）」のブックレットをご覧ください。
キャプションとトランスクリプト
ポッドキャストやオーディオブックの人気上昇に伴い、コンテンツ制作者は従来の読み物を音声で利用できるようにし、ユーザーがマルチタスクできるようにしました。しかし、聴覚に障がいのある人や言葉が不自由な人のために、リスニングの代わりとなるキャプションを提供すべきです。
また、動画でも、ユーザーが視覚的な内容を理解できるように、説明的なトランスクリプトを提供する必要があります。
こうすることで、誰もが同じコンテンツにアクセスする公平な機会を得られます。
テレビでよく見られるキャプションの例
キャプションとトランスクリプトのベストプラクティス
- キャプションとトランスクリプトには、音声情報を含める。
- 「落ち着いた音楽が流れている」、「ドアが閉まる」など、背景や文脈を示す音を記述してください。
- ビデオトランススクリプトでは、重要なビジュアルコンテンツの説明を含める。
- ライブストリーミングの場合は、音声実況のトランススクリプトと、視覚障がい者のための手話を提供してください。
キャプションとトランスクリプトの詳細については、W3.org - Captions/Subtitles and Transcriptsを参照してください。
ツールチップ
ツールチップは、アイコンメニューを表示する際に役立つもので、必須の機能である場合もあります。アイコンにラベルがない場合、アイコンの上にカーソルを置くと、ツールチップが表示されます。
すべてのアイコンが万人に認識されているわけではないので、ツールチップを表示することで、そのアイコンの意味をユーザーに説明しやすくなります。
また、一般的なアイコンの場合でも、視覚障害のあるユーザーがスクリーンリーダーで読み上げられるように、ツールチップで説明を行います。
Mediumのアイコンメニューは、各アイコンにカーソルを合わせるとツールチップが表示されます。
ツールチップは、ボタンなどのUI要素が無効化されている理由を説明するのにも役立ちます。無効化されたアクションが表示され、それを有効にする方法がわからないのは、ユーザーにとってフラストレーションになります。
アクションを無効にする前に、その要素をクリックしたときに、より適切な説明やエラーメッセージを表示するなど、代替案を検討してください。
どうしてもデフォルトで無効にしたい場合は、ツールチップを表示することで、ユーザーに明快さを与え、UIをより理解してもらうことができます。
ツールチップを読んで、公開ボタンが無効になっている理由がわかりました
- ツールチップには、重要な情報を含めないでください。ユーザーがプロダクトや機能の使い方を見つけるのが難しくなります。
- ツールチップには、アイコンの説明や無効になっている要素を有効にする方法など、補足情報のみを含めるようにします。
- マウスやキーボードの操作でツールチップを開いたり閉じたりできるようにします。
- WCAG 2.1では、マウスを置いたり、フォーカスが当たった時に表示されるコンテンツは、消せること、ホバーできること、または持続的に表示されることが求められています。
ツールチップに関する詳しい情報は、W3.org - Content on Hover or Focusを参照してください。
インターナショナリゼーション
完全にインクルーシブでアクセシブルなプロダクトをデザインするには、まずプロダクトがどんな言語をサポートすべきかを知るために、ユーザを理解しなければなりません。
その良い例が、イケアのインターナショナリゼーションです。多国籍企業であるイケアの家具の組み立て説明書は、図とイラストのみで、テキストや翻訳の必要がありません。
またIKEAは、米国政府がUFOに関する待望の報告書を発表した後、宇宙人用の組み立て説明書まで発表しました。実にアクセシブルな会社ですね。
30％ルール
言語が異なると、画面上で占めるテキストのスペースが大きくなったり小さくなったりするので、翻訳を考慮したUI設計を心がけましょう。経験則では、UIコンポーネントのテキストの周りに少なくとも30%のスペースを確保することです。
コンポーネントに充分なスペースがあるかを確認するために、コンテンツを翻訳してデザインをテストし、UIにどのように収まるかを見てください。
翻訳したテキストがコンポーネント内に収まらない場合は、テキストの行をどのように切り詰めたり、まとめたりすべきかを考えてみてください。
インターナショナリゼーションのためのベストプラクティス：
- 短く、完結した文章を書く。
- 口語体、ダジャレ、特有の専門用語は避ける。
- 用語を定義し、一貫して使用する
- 画像内に埋め込まれたテキストを翻訳する
- 30%ルールを適用する
インターナショナリゼーションに関する詳しい情報は、W3.org - Internationalizationをご覧ください。
アクセシブルライティングのための追加リソース：
- Accessible Writing Style
- Write Accessible Content
- Writing for Accessibility | Mailchimp Content Style Guide (日本語)
お読みいただきありがとうございます!
