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字を目安にする」「図に大量の文字が含まれている場合は本文に書き起こす」「図を見ないと分からないようなテキストは避ける」といった記載もあります。

一方で、利用者が利便性以外のことを求めているページにおいては、簡潔さだけではなく、利用者の立場に立ったライティングも求められます。例えば、犬の写真に対する代替テキストを作成する際、実用的なページでは「犬」と書きますが、利用者が癒やしや楽しみを求めているページでは「雨の中、駅前で飼い主の帰りを待ち遠しそうに待っている白い犬」のように書くこともできます。

一貫性のある構造で書いて、上から順に読んで理解できるようにする

スクリーンリーダーで音声を読み上げる場合、上から順に読み上げを行うため、関連する重要な情報が下に記載されていると、ユーザーは正しく理解することができません。例えば「購入する」ボタンの下にだけ「購入後14日以内のキャンセルは無料ですが、キャンセルボタンを押さない場合には自動的に請求が行われます」といった重要な情報が記載されていた場合、利用者は気がつかないまま購入してしまう可能性があります。

色で注意事項などを示さない

テキストを書く際には、色や下線といった視覚的な要素に頼らないと理解できないような書き方をしません。例えば、重要なテキストを赤文字にしたうえで「赤字で記載されている点は特に重要です。必ず守ってください」「左側のボタンをクリックしてください」などのような書き方は避けます。

タイトルや見出しが内容を表すようにする

h1やh2で表現されるようなタイトルや見出し要素を書く際には、タイトルや見出しが、それ以下の内容を適切に表現するように書きます。特にプロダクトにおいては、タイトルや見出しの独立性、伝達性に配慮します。独立性とは他の概念と区別できるという観点です。例えば「プロジェクト」と「ケース」というラベルが並んで書かれていても利用者は区別することができません。伝達性とは、その言葉単体で意味が伝わるという観点です。例えば「リライアビリティー」と書くと、人によっては言っている意味がよく理解できず、何を示しているのか把握できない場合もあります。このような命名は、利用者のアクセシビリティだけではなく、開発速度の向上やプロジェクト全体のコミュニケーションの取りやすさにも寄与します。
参考：タイトル

テキストだけでリンクの内容が把握できるようにする

リンクはテキストだけで、どのページに遷移するのかが分かるように書きます。例えば補足情報がないまま「詳しくはこちら」や「詳細」と書くのではなく、「ガイドラインの詳細」や記事名などを書くことによって、リンク先が明確になるように書きます。

独自用語を使わない

業界用語や独自の用語など、一般的ではない用語はできるだけ使いません。例えば、出版業界では外部の校正者に依頼する原稿を「外校（そとこう）」と呼びますが、出版業界以外の方にとっては、耳にしたこともない用語である場合がほとんどです。

もし使う必要のある場合には、意味が把握できるように注釈を加えたり用語集にリンクしたりすることによって、利用者が理解できるようにします。

略語を使わない

用語を省略した略語はできるだけ使用せずに、本来の名称で書きます。ただし「高等学校」を「高校」と書いたり、複雑な名称の制度名を省略して書いたりするなど、略語が一般的な場合や、名詞が長すぎる場合には略語を使う場合もあります。
やむを得ずに略語を使う場合には、必要に応じて注釈や用語集で、本来の名称を明記しておきます。

原因が特定できるエラーメッセージを書く

エラーメッセージを書く際には、利用者が自身で解決できるようにすることを目指して、状況の説明、解決方法を明確にします。例えば「エラーがあります」「未入力の項目があります」ではなく、「住所を入力してください」といった書き方をします。

エラーメッセージの書き方についてさらに詳しく確認したい場合は「エラーメッセージ」をご覧ください。

複雑な文を書かない

おおむね中学校卒業程度の方が理解できる文章で書きます（UNESCOの分類する「lower secondary education level（前期中等教育レベル）」）。

具体的には、以下の6点に配慮することによって、中学校卒業程度の方が理解できる文章に近づけることができます。

1. 常用漢字を使用する

「常用漢字表」に存在する漢字を使用することによって、読解レベルを一定水準にすることができます。常用漢字とは中学校卒業までに学習する漢字のことです。

2. 可能な範囲で重文・複文を避ける

単文・重文・複文のうち、可能な範囲で重文や複文を避けます。重文や複文を一切使用せず、単文のみで文を書くこともできますが、かえって読みにくくなる場合もあります。そのため複雑な文章を発見した場合にはできるだけ分割できないか検討します。

3. 難しい単語を使わない

難しい単語は避けるようにします。特に、抽象度の高い単語は認知が難しくなります。例えば「プロセスが属人化する」は「仕事の流れが属人化する」や「仕事のやり方が他の人に分からない状況」と書くことでより多くの人に理解してもらうことができます。プロダクトの特性に応じて、言い換えられる場合にはより一般的な言葉に言い換えて書きます。

4. 並列構造の文章は箇条書きにする

並列構造の文章は箇条書きで書きます。例えば、「持ち物は、身分証明書、筆記用具、受験料です。」といった文章については、デザインの制約がない場合には以下のように変更することができます。

5. 不要な指示語は使わない

必要のない指示語は使わないようにします。可能な場合には指示語を崩して名詞を再び記載します。もし使用する場合にも、「それ」ではなく「そのカード」といったように名詞を補足して書くようにします。

6. 受動態と能動態を使い分ける

原則として能動態で文章を書いて、受動態で書いたほうが分かりやすい場合には受動態で書きます。例えば「誰が行っているかが重要ではない場合、公の場合、動作を受ける対象を強調したい場合は受動態の文章のほうが分かりやすくなります。
受動態と能動態についてさらに詳しく確認したい方は「能動態と受動態」をご確認ください。

まとめ：ウェブアクセシビリティを意識したUXライティングへの道

今回の記事を通じて、ウェブアクセシビリティの重要性とUXライティングの密接な関連性を探りました。WCAGに基づくライティングは、単に要件を満たすだけでなく、あらゆるユーザーにとって分かりやすいコンテンツを作ることに直結するものです。略語の回避、簡潔で明瞭な表現、読みやすいテキスト構造は、障害を持つ人だけでなく、幅広いユーザーにとってのアクセシビリティを向上させる鍵です。

UXライティングを行う際には、これらの原則を念頭に置くことで、誰もがアクセスしやすく使いやすいプロダクト開発を目指すことができます。この記事が、プロダクトのライティングに関わる皆様にとって、毎日の業務の中でアクセシビリティについて考えるきっかけになれば幸いです。

参考情報

参考情報を以下にまとめます。必要に応じてご活用ください。

• デジタル庁「ウェブアクセシビリティ導入ガイドブック」]
• UXライティングガイド