アクセシビリティを意識したUIライティング

Michael J. Metts

Michaelは人間を大事にしながら、チームが素晴らしいプロダクトを作り上げる手助けをしています。ジャーナリストというバックグラウンドを生かし、便利で実用的なユーザー体験のデザインにおいて言葉が果たす役割を説いてきました。

この記事はA List Apartからの翻訳転載です。配信元または著者の許可を得て配信しています。

Standards for Writing Accessibly
この記事は、Rosenfeld Media出版の『Writing Is Designing』の一部を抜粋しています。

WCAG2(Web Content Accessibility Guidelines 2.0)のスタンダードを満たしながら書くということは困難かもしれませんが、間違いなく価値があることです。典型的な天才であり、物理学者であるアインシュタインは、かつてこんなことを言いました。

「どんな愚か者でも、物事を大きく、複雑に、暴力的にすることはできる。しかしこの逆を行うためには、ほんの少しの才気と莫大な勇気が必要である」

ありがたいことにこの本は、よりアクセシビリティを意識して書くことの役に立ちます。今まで、次のようなことを学んできました。

  • なぜわかりやすさが重要なのか
  • エラー状態やストレスケースにおけるメッセージの作り方
  • 自分が書いた言葉の有効性をテストする方法

いずれも、必要なユーザーには追加の説明を与え、また解析しやすいような書き方をするなど、スクリーンリーダーにとってより良い書き方をするためのヒントになるべきものです。

しかし、これらのページを読んだ後でさえも、あなたが考えもしないであろういくつかのポイントがあります。

スクリーンリーダーのための書き方

視力があまり良くない人、あるいはまったく目が見えない人は、目がよく見える人とはまったく違う方法でアプリやWebサイトに触れます。スクリーンリーダーは画面上の要素を可能な限り解析し、それをユーザーのために読み上げます。その過程では、解釈を間違えてしまうようなことが多くあります。スクリーンリーダーに最適な文章として読み上げてもらうには、インターフェイスのライターであるあなたの役割がもっとも重要かもしれません。

スクリーンリーダーについては覚えておくべきことがいくつかあります。

  • 目が見える読者の平均的な読解スピードは英語の場合、1秒あたり2〜5単語です。スクリーンリーダーがユーザーが読み上げられたテキストを理解するスピードはこれより若干速く、1秒あたり35音節程度です。追加で説明することがある場合には特にですが、内容をわかりやすくするために文が長くなってしまうことを恐れてはいけません。
  • 目を使おうが耳を使おうが、ユーザーはテキストをひとかたまりとして把握したいものです。ですから、長めの文章にはヘッダーを付け、短いパラグラフに分けて、またその他のコンテンツデザインにおける優れた手法を駆使して構成することが極めて重要です。

場所を意識して書くのではなく、時系列を意識して書く

時系列で書くとは、インターフェイス上の場所ではなく、物事の順番を説明するということです。これを実践することには多くの意味がありますが、スクリーンリーダーにとっては特にそれが有意義な理由があります。

ライティングにおけるツールチップや、オンボーディングの要素において、「続けるには下にあるOKボタンをクリックしてください」「ドキュメントを保存するには、上にあるインストラクションを参照してください」というような文言を目にすることが多いと思います。

スクリーンリーダーはこれらの指示をそのまま読み上げますが、その音声を聞く人は、聞き取った言葉とオブジェクトの位置関係を目で見ることができません。それでもユーザーは頑張って解釈してくれようとはするかもしれませんが、本来そんな必要はないのです。

言葉を書くときには、スクリーンリーダーのユーザーのことを考えましょう。誰にでも共有できる普遍的な体験を大切にし、彼らが「上にあるものを先に、下にあるものは後に」という枠組を自然に理解していることを信用するのです。図5-5に示したように、時系列を意識して書きましょう。

図5-5:パスワードフィールドの下にある、パスワードについてのヒントを記したマイクロコピーは、その位置に達するまでスクリーンリーダーのユーザーには伝えられません。

書き方の悪い例:

  • 続けるには下のOKボタンをクリックしてください
  • 上に戻る(ページ上部にスクロールするためのボタンのコピー)

書き方の良い例:

  • 続けるにはOKを選んでください
  • 始めに戻る

左から右に、上から下に書く

文章の中に場所を示すような言葉を入れたくないとしても、場所についての順番は意識しなければなりません。

サービスやプロダクトを購入した後で、支払いの前には気づかなかった条件があることを知ったというような経験はありませんか? ガジェットにバッテリーが同梱されていないことに気づかなかった、SNSに登録することが第三者の広告出稿者にデータを提供することを暗黙に同意することになることを知らなかった、などというものです。

スクリーンリーダーのユーザーはこうした問題に常に直面しています。

ほとんどのスクリーンリーダーは、情報を左から右に、上から下に解析します。書いた言葉の順番や場所を見直すときには、いくつかのことに気をつけてください。行動を起こしたり決断を下したりするために不可欠な情報が、図5-5のように、アクションの後(つまり右または下)に配置されていないでしょうか。もしそうであれば、インターフェイスの上の方に移すことを検討してください。

行動を起こすのに不可欠な情報(パスワード設定ルールや、先に進む前に使用条件に同意すること)は、テキストフィールドやアクションボタンの前に置きます。たとえツールチップや「情報」のボタンに隠れているとしても、ユーザーが決定を下すポイントに辿りつく前に表示される必要があります。

色やアイコンを単独で使わない

目が見えるアメリカ人のデジタルプロダクトのユーザーが赤色で書かれたメッセージを見たら、まず間違いなくそれは警告メッセージであるか、何かが間違っていると解釈するでしょう。また、緑色のメッセージを見れば、うまく行っている証拠だと思うはずです。このような特定のタイプのユーザーに意味を伝えるには色が有効ですが、伝えるべきユーザーの文化が異なれば、同じ意味を受け取られるとは限りません。

たとえば、赤は一般的に言ってアメリカでは興奮や危険を示しますが、他の文化においてはまったく違う意味になります。

  • 中国では、幸運を意味します
  • 旧ソビエトの東欧諸国では、この色は共産主義と強く関連づけられています
  • インドでは、純粋さを表します

黄色は、アメリカでは「注意」の意味で使われることが多いですが(メンタルモデルが信号機の色を借用しているからです)、他の文化の人々にとっては違う意味になるでしょう。

  • ラテンアメリカでは、黄色は死に関連づけられています
  • 東洋、アジアの国々では高貴な色、聖なる色であり、王を表す色であることも多いです

それでは、色覚異常を持つ人、あるいは視覚がほとんど、あるいはまったく無い人はどうでしょうか。インターフェイスの色が潜在的に持つ意味は、彼らにとっては何の意味もありません。読み上げられた場合でもその内容が理解できるように、図5-6のように言葉を追加することを心がけてください。

図5-6:左のように、次に進む前に内容を保存するように促すアプリ内におけるシンプルなユーザーへのメッセージも、赤色と警告を表すアイコンを使えば効果的で、視覚的にわかりやすいものになります。しかし、可能であればもっと説明を追加すべきです。右側の例は、内容を保存しなければ次に進めないということを明示的に伝えています。

動作ではなく、行動を説明する

近年ではタッチインターフェイスが一般的になり、キーボードとマウスによるインターフェイスに置き換わってきていますので、ユーザーはもはやリンクやボタンを「クリック」することはありません。しかし、音声入力や追加デバイスを使う場合には特に、「タップ」する必要すらないのです。

「クリックする」「タップする」「押す」「見る」というような動作を表すマイクロコピーではなく、「決める」「選ぶ」「考える」のように、インターフェイスに関係ない行動を説明するような、デバイスを選ばない言葉を使ってみてください。

この法則には例外もたくさんあります。インターフェイスにおいて特定の機能を実行する必要があり、ユーザーに彼らの動作がどのようにインターフェイスに作用するのか(「つまんでズームアウトする」など)を教える必要がある場合は、もちろん動作を説明しなければなりません。しかし一般的には、インターフェイスにおける行動に忠実にしていれば、あなたの書くコピーはもっとシンプルで、一貫性のあるものになるでしょう。


Welcome to UX MILK

UX MILKはより良いサービスやプロダクトを作りたい人のためのメディアです。

このサイトについて