UXライティングとウェブアクセシビリティの関連性
UXライティングにおいて欠かせない観点の一つが、利用者が操作に迷わないように、分かりやすく書くことです。ただし「分かりやすさ」の基準は人によって異なることが明らかになっています。漢字とひらがなの使い分けを例に取ると、「漢字が何割、ひらがなが何割が読みやすい」という通説がありますが、研究では、人は自分が読み慣れている文章ほど読みやすいと感じることが分かっています。どの領域においても一貫して読みやすい文章はなく、最終的には読み慣れている文章に近いことが読みやすさにつながります。
出典：ひらがな文と漢字まじり文の読みやすさの比較研究
では分かりやすさの基準が人によって異なるとするならば、指針として一体何を用いればよいのでしょうか。いくつかの考え方がありますが、そのうちの一つがウェブアクセシビリティです。
例えば、全盲の方はテキストだけでサービスを体験します。視覚的なサポートはなく、スクリーンリーダーで読み上げられるテキストを頼りに、目的の操作を進めます。このとき例えば以下のようなテキストが書かれていたとしたらどうでしょうか。
この項目には分かる範囲で、一般的な平日に行っているようなスケジュールの中でも特に頻繁に行うような内容を記載してほしいですが、昨年までに居住していた遠方の地域で間接的に経験した内容は除いて、今年経験したことだけを記載してください。特に注意してほしいのが、次に赤字で記載している内容です。
後半に重要なことが書かれているうえに、文が複雑で、指示がよく分かりません。読み飛ばしていけば言いたいことが分からないでもありませんが、視覚に障害がなくても分かりにくい文章です。
そこで参考にしたいのがウェブアクセシビリティの指針です。指針にのっとって先ほどの文章を書き直すと、以下のようになります。
平日によくすることを教えてください。過去に住んでいた地域での経験は書かずに、今年になってからの経験だけを書いてください。
このように、ウェブアクセシビリティの原則にのっとってプロダクトのテキストを書くことは、「ほとんどの利用者にとっての分かりやすさ」につながるものだと言えます。
UXライティングを行う際に参考にしたい「WCAG」とは
では実際にどのようなウェブアクセシビリティの指針に従ってライティングを行うのがよいのでしょうか。まず把握しておきたいのがWCAG（ダブリューシーエージー）の定める「Web Content Accessibility Guidelines (WCAG) 2.1」です。WCAGのガイドラインは国際標準化機構であるW3C（World Wide Web Consortium）によって公開されているもので、日本国内で多くの企業やサービスが採用している指針の一つです。
WCAGのガイドラインでは、テキストの書き方に関するものを含む多くの指針が示されています。例えばコントラスト比、画像などに対する代替テキストの設定、音声コンテンツに対するキャプションの付与などです。多くはUXライターが行う業務の範囲外で対応されるものですが、ライティングに関連する項目は理解しておきたいところです。
ウェブアクセシビリティを高めるライティング技術
WCAG2.1の中でUXライターの仕事に特に関連するのが、以下に挙げるような項目です。多くの内容はUXライティングの原則とも一致していますが、中にはさらに深掘りして検討すべき項目も含まれています。
適切な代替テキストを用意する
画像や映像などに対して代替テキストを設定します。代替テキストのライティングでは、対象となる画像や映像の内容が理解できるように簡潔に書くのが原則です。
デジタル庁の公開する「ウェブアクセシビリティ導入ガイドブック」では、「代替テキストの長さは80字を目安にする」「図に大量の文字が含まれている場合は本文に書き起こす」「図を見ないと分からないようなテキストは避ける」といった記載もあります。
一方で、利用者が利便性以外のことを求めているページにおいては、簡潔さだけではなく、利用者の立場に立ったライティングも求められます。例えば、犬の写真に対する代替テキストを作成する際、実用的なページでは「犬」と書きますが、利用者が癒やしや楽しみを求めているページでは「雨の中、駅前で飼い主の帰りを待ち遠しそうに待っている白い犬」のように書くこともできます。
関連情報：達成基準 1.1.1 非テキストコンテンツ「利用者に提示されるすべての非テキストコンテンツには、同等の目的を果たすテキストによる代替が提供されている」
一貫性のある構造で書いて、上から順に読んで理解できるようにする
スクリーンリーダーで音声を読み上げる場合、上から順に読み上げを行うため、関連する重要な情報が下に記載されていると、ユーザーは正しく理解することができません。例えば「購入する」ボタンの下にだけ「購入後14日以内のキャンセルは無料ですが、キャンセルボタンを押さない場合には自動的に請求が行われます」といった重要な情報が記載されていた場合、利用者は気がつかないまま購入してしまう可能性があります。
関連情報：達成基準 1.3 適応可能「情報、及び構造を損なうことなく、様々な方法 (例えば、よりシンプルなレイアウト) で提供できるようにコンテンツを制作すること。」
色で注意事項などを示さない
テキストを書く際には、色や下線といった視覚的な要素に頼らないと理解できないような書き方をしません。例えば、重要なテキストを赤文字にしたうえで「赤字で記載されている点は特に重要です。必ず守ってください」「左側のボタンをクリックしてください」などのような書き方は避けます。
関連情報：達成基準 1.4.1 色の使用「色が、情報を伝える、動作を示す、反応を促す、又は視覚的な要素を判別するための唯一の視覚的手段になっていない」
タイトルや見出しが内容を表すようにする
h1やh2で表現されるようなタイトルや見出し要素を書く際には、タイトルや見出しが、それ以下の内容を適切に表現するように書きます。特にプロダクトにおいては、タイトルや見出しの独立性、伝達性に配慮します。独立性とは他の概念と区別できるという観点です。例えば「プロジェクト」と「ケース」というラベルが並んで書かれていても利用者は区別することができません。伝達性とは、その言葉単体で意味が伝わるという観点です。例えば「リライアビリティー」と書くと、人によっては言っている意味がよく理解できず、何を示しているのか把握できない場合もあります。このような命名は、利用者のアクセシビリティだけではなく、開発速度の向上やプロジェクト全体のコミュニケーションの取りやすさにも寄与します。
参考：タイトル
関連情報：達成基準 2.4.6 見出し及びラベル「見出し及びラベルは、主題又は目的を説明している。」、達成基準 2.4.10 セクション見出し「セクション見出しを用いて、コンテンツが整理されている。」、達成基準 2.4.2 ページタイトル「ウェブページには、主題又は目的を説明したタイトルがある。」
テキストだけでリンクの内容が把握できるようにする
リンクはテキストだけで、どのページに遷移するのかが分かるように書きます。例えば補足情報がないまま「詳しくはこちら」や「詳細」と書くのではなく、「ガイドラインの詳細」や記事名などを書くことによって、リンク先が明確になるように書きます。
関連情報：達成基準 2.4.4 リンクの目的 (コンテキスト内)「それぞれのリンクの目的が、リンクのテキスト単独で、又はリンクのテキストとプログラムによる解釈が可能なリンクのコンテキストから判断できる。ただし、リンクの目的がほとんどの利用者にとって曖昧な場合は除く。
独自用語を使わない
業界用語や独自の用語など、一般的ではない用語はできるだけ使いません。例えば、出版業界では外部の校正者に依頼する原稿を「外校（そとこう）」と呼びますが、出版業界以外の方にとっては、耳にしたこともない用語である場合がほとんどです。
もし使う必要のある場合には、意味が把握できるように注釈を加えたり用語集にリンクしたりすることによって、利用者が理解できるようにします。
関連情報：達成基準 3.1.3 一般的ではない用語「慣用句及び業界用語を含めて、一般的ではない、又は限定された用法で使われている単語、又は語句の、明確な定義を特定するメカニズムが利用できる」
略語を使わない
用語を省略した略語はできるだけ使用せずに、本来の名称で書きます。ただし「高等学校」を「高校」と書いたり、複雑な名称の制度名を省略して書いたりするなど、略語が一般的な場合や、名詞が長すぎる場合には略語を使う場合もあります。
やむを得ずに略語を使う場合には、必要に応じて注釈や用語集で、本来の名称を明記しておきます。
関連情報：達成基準 3.1.4 略語「略語の元の語、又は意味を特定するメカニズムが利用できる」
原因が特定できるエラーメッセージを書く
エラーメッセージを書く際には、利用者が自身で解決できるようにすることを目指して、状況の説明、解決方法を明確にします。例えば「エラーがあります」「未入力の項目があります」ではなく、「住所を入力してください」といった書き方をします。
エラーメッセージの書き方についてさらに詳しく確認したい場合は「エラーメッセージ」をご覧ください。
関連情報：達成基準 3.3.1 エラーの特定「入力エラーが自動的に検出された場合は、エラーとなっている箇所が特定され、そのエラーが利用者にテキストで説明される。」
複雑な文を書かない
おおむね中学校卒業程度の方が理解できる文章で書きます（UNESCOの分類する「lower secondary education level（前期中等教育レベル）」）。
具体的には、以下の6点に配慮することによって、中学校卒業程度の方が理解できる文章に近づけることができます。
関連情報1：達成基準 3.1.5 読解レベル「固有名詞や題名を取り除いた状態で、テキストが前期中等教育レベルを超えた読解力を必要とする場合は、補足コンテンツ又は前期中等教育レベルを超えた読解力を必要としない版が利用できる」
関連情報2：「テキストを読みやすくする」
1. 常用漢字を使用する
「常用漢字表」に存在する漢字を使用することによって、読解レベルを一定水準にすることができます。常用漢字とは中学校卒業までに学習する漢字のことです。
漢字の使い分けについてさらに詳しく確認したい場合は「漢字とひらがなの使い分けルールと最適なバランス」をご覧ください。
2. 可能な範囲で重文・複文を避ける
単文・重文・複文のうち、可能な範囲で重文や複文を避けます。重文や複文を一切使用せず、単文のみで文を書くこともできますが、かえって読みにくくなる場合もあります。そのため複雑な文章を発見した場合にはできるだけ分割できないか検討します。
関連情報：「文の長さは、前期中等教育レベルで典型的に許される範囲とする。(注記: 英語では 25 ワードである)」、「長い文は二つに分割することを検討する。」、「一つの文に三つ以上の接続詞を用いないようにする。」
3. 難しい単語を使わない
難しい単語は避けるようにします。特に、抽象度の高い単語は認知が難しくなります。例えば「プロセスが属人化する」は「仕事の流れが属人化する」や「仕事のやり方が他の人に分からない状況」と書くことでより多くの人に理解してもらうことができます。プロダクトの特性に応じて、言い換えられる場合にはより一般的な言葉に言い換えて書きます。
参考：「文の意味を変えずにより広く使われる言い回しに置き換えられるような複雑な単語又はフレーズを取り除く。」
4. 並列構造の文章は箇条書きにする
並列構造の文章は箇条書きで書きます。例えば、「持ち物は、身分証明書、筆記用具、受験料です。」といった文章については、デザインの制約がない場合には以下のように変更することができます。
持ち物
- 身分証明書
- 筆記用具
- 受験料
関連情報：「コンマで区切られた一連の長い単語又はフレーズを含む段落の代わりに、箇条書き又は番号付きリストを使用する」
5. 不要な指示語は使わない
必要のない指示語は使わないようにします。可能な場合には指示語を崩して名詞を再び記載します。もし使用する場合にも、「それ」ではなく「そのカード」といったように名詞を補足して書くようにします。
関連情報：「代名詞による参照及び文中の他の箇所への参照は明確なものにする。」
6. 受動態と能動態を使い分ける
原則として能動態で文章を書いて、受動態で書いたほうが分かりやすい場合には受動態で書きます。例えば「誰が行っているかが重要ではない場合、公の場合、動作を受ける対象を強調したい場合は受動態の文章のほうが分かりやすくなります。
受動態と能動態についてさらに詳しく確認したい方は「能動態と受動態」をご確認ください。
関連情報：「英語及び他の一部の欧米系言語で書かれる文書では、受動態を使う特別な理由がない限り、能動態を用いる。たいていの場合、能動態の文章は受動態よりも短く、理解しやすい。」
まとめ：ウェブアクセシビリティを意識したUXライティングへの道
今回の記事を通じて、ウェブアクセシビリティの重要性とUXライティングの密接な関連性を探りました。WCAGに基づくライティングは、単に要件を満たすだけでなく、あらゆるユーザーにとって分かりやすいコンテンツを作ることに直結するものです。略語の回避、簡潔で明瞭な表現、読みやすいテキスト構造は、障害を持つ人だけでなく、幅広いユーザーにとってのアクセシビリティを向上させる鍵です。
UXライティングを行う際には、これらの原則を念頭に置くことで、誰もがアクセスしやすく使いやすいプロダクト開発を目指すことができます。この記事が、プロダクトのライティングに関わる皆様にとって、毎日の業務の中でアクセシビリティについて考えるきっかけになれば幸いです。
参考情報
参考情報を以下にまとめます。必要に応じてご活用ください。
- デジタル庁「ウェブアクセシビリティ導入ガイドブック」]
- UXライティングガイド
