デザイニングWebアクセシビリティ
言葉がわかりにくいサイトを改善する4つの解決アプローチ

平易な言葉に置き換えたり、補足を追加したりして内容を理解できるようにしましょう
このコーナーでは、書籍『デザイニングWebアクセシビリティ』の一部を特別公開しています。筆者陣によるオンライン講座「アクセシビリティ入門(全7回)」放送中。

ユーザーがコンテンツにアクセスできても、言葉がわからなければ内容を理解できません。専門用語や略語、難読語などは伝わらないことがあります。平易な言葉に置き換えたり、補足を追加して理解できるようにしましょう。

この記事では全9章の書籍から、第7章「コンテンツ設計」の言葉がわかりにくいサイトの改善ポイント、7-3「言葉がわかりにくい」の内容をお届けします。

難しい言葉は伝わらない危険性がある

業界用語のように一般的でない言葉を使うと、特定のユーザーにしか理解できなくなります。また、一般的な用語であっても、難しい言葉は伝わらないことがあります。ユーザーによって語彙力、理解力は異なることに注意しましょう。

言葉が読めない

ユーザーは、知らない単語が出てきても読めません。また、スクリーンリーダーが認識できないような略語は、うまく読まれなかったり、別の語のように読まれてしまうこともあります。外国語、略語、難読語などのほか、人名や地名、商品名といった固有名詞も問題になります。これらは、同じ表記でも異なる読まれ方をすることがあり、テキストの情報だけでは適切に読めないことがあります。

図
外国語、略語、難読語などが使われている例。ユーザーはこの単語を読めない可能性がある。また、スクリーンリーダーでも適切に読み上げられない可能性が高い。

言葉の意味がわからない

単語が読めたとしても意味がわからないことがあります。あまり一般的でない外来語や専門用語などは、多くのユーザーには理解できません。

図
外来語、専門用語などが使われている例。単語の発音はわかっても、その言葉が何を指すものか理解できない可能性がある。

言葉の意味が誤解される

言葉がわかるように思えても、意味を誤解してしまうことがあります。気の利いた言い回しは、一見意味が伝わりやすそうに見えても、ユーザーが誤解してしまう可能性が高くなります。

図
あまり一般的でないことわざや慣用句、一般的な意味と異なる業界用語などが使われている例。言葉の指す意味を誤解されてしまう可能性がある。

言葉が難しければ補足する

できるだけ難しい言葉は使わず、一般的でわかりやすい言葉を使うのが原則です。難しい言葉を使う必要がある場合は、かっこ書きや用語集などで補足を行い、ユーザーが理解できるようにしましょう。

ルビをつける

簡単な読みの説明だけであれば、ルビをつけるという方法もあります。ruby要素を使ってテキストにルビを振る方法は、今のところあまり使われていません。その理由のひとつに、Firefoxが長らくrubyに対応していなかったことが挙げられます。しかし、2015年5月にリリースされたFirefox 38がruby要素に対応したため、現在では主要なブラウザすべてでルビが使える状況になっています。

ただし、ルビは本文より小さな文字で表現されるため、ユーザーにとって読みやすいとは言えないことに注意しましょう。詳しい説明を書いたりせず、あくまで簡単な読み方を示す用途で使うべきです。

図
Firefox 38のruby対応の説明。ルビを使うと、意味や読み方を簡潔に示すことができる。
参考:Ruby support in Firefox Developer Edition 38

かっこ書きで補足する

専門用語や外来語を使わなければならない場合、言葉の読みや意味をかっこ書きで補足する方法があります。固有名詞の読み、難読漢字の読み、略語の正式名称などは、かっこ書きで対応するのが望ましいでしょう。ページ内に同じ単語が繰り返し出てくる場合は、初出のときにかっこ書きをつけます。

図
難読語の後ろにかっこ書きで読みを記述した例。補足によって読み方や意味を明確にできる。
※出典:Wikipedia https://ja.wikipedia.org/wiki/%E9%AD%81!!%E7%94%B7%E5%A1%BE#.E3.81.82.E3.82.89.E3.81.99.E3.81.98

かっこ書きの欠点は、読み飛ばしが難しいことです。用語を理解しているユーザーは説明を読み飛ばして本文の続きを読もうとしますが、かっこ書きは本文との区切りがわかりにくく、読み飛ばしが困難です。短い説明であれば問題ありませんが、説明が長くなる場合、かっこ書きは避けたほうが良いでしょう。

脚注で説明する

説明が長くなる場合、脚注で説明する方法もあります。対象の言葉の後ろにリンクを置き、コンテンツの末尾などに置いた脚注エリアに飛ぶようにします。リンクテキストを「※」のような記号のみにすると、ページ内で重複したり、読み上げできない可能性があるため、「脚注1」のようなテキストを使うと良いでしょう。また、脚注から元の言葉にリンクを張っておくと、すぐに本文に戻ることができます。

図
用語に脚注へのリンクをつけ、脚注で説明を書いている例。脚注に飛んだ後、脚注から元の単語に戻ることもできる。
※出典:株式会社ツクロア http://tuqulore.com/webdesign-communication/shiraishi.html

用語集で説明する

説明が必要な言葉がサイト内に何度も登場する場合は、説明を用語集として独立させる方法もあります。用語集は単独でもコンテンツとして成立し、説明のほかにさまざまな情報を盛り込むこともできます。

ただし、用語集の説明を参照するためには用語説明のページへ移動しなければならないため、同ページ内に用語が何度も出てくると、画面を行ったり来たりする必要があります。簡潔な説明で済む場合は、かっこ書きや脚注を使ったほうが良いでしょう。用語集へのリンクを新規タブにしたり、ポップアップで表示させることについては、「5-3 勝手に新規タブやポップアップが開く」を参照してください。

図
用語集に説明を書いた例。サイト内で何度も登場する単語からリンクされている。
※出典:アクサダイレクト保険|アクサのネット生保 http://www.axa-direct-life.co.jp/spn/knowledge/glossary/detail/sa_23.html

『デザイニングWebアクセシビリティ
アクセシブルな設計やコンテンツ制作のアプローチ』

  • 著者:太田良典、伊原力也
  • 定価:本体3,000円+税
  • 発行:ボーンデジタル
  • ISBN:978-4-86246-265-7

本書はアクセシビリティのガイドラインを解説した内容ではなく、サイトの制作プロセスに沿った実践的な内容となっています。それぞれのプロセスの概要と注意点、ユーザーにとって問題が起きるポイント、そして解決アプローチを紹介しています。

本書に書かれた内容を実践し、問題として挙げている点をクリアすれば、WCAG 2.0のレベルAおよびAAの達成基準のほとんどを達成することができます。巻末には、WCAG 2.0の達成基準と本書の内容との対照表を掲載していますので、ガイドラインに沿う場合の参考としてお使いいただけます。

なお、本書では基本的にHTMLとCSSで作られた静的なコンテンツを扱っています。動画や音声、アプリケーションなどについては、基本的な考え方を示すにとどめました。JavaScriptを駆使したWebアプリケーションのアクセシビリティについては、本書の姉妹書である『コーディングWebアクセシビリティ』が入門的な内容となっていますので、あわせて参考にしていただければ幸いです。

この記事が役に立ったらシェア!
tweet44このエントリーをはてなブックマークに追加
みんなが読んでるWeb担メルマガで、あなたも最新情報をチェック
  • SEOやアクセス解析のなどノウハウをゲット
  • 事例やインタビューも見逃さない
  • 要チェックのセミナー情報も届く
  • 編集長コラムを一足先に読める
日本赤十字社 東日本大震災 義援金募集
みんなが読んでるWeb担メルマガで、あなたも最新情報をチェック
  • SEOやアクセス解析のなどノウハウをゲット
  • 事例やインタビューも見逃さない
  • 要チェックのセミナー情報も届く
  • 編集長コラムを一足先に読める

今日の用語

専用線
ネットワーク接続の(契約)方式。 ... →用語集へ

連載/特集コーナーから探す

インフォメーション

Web担のメルマガを購読しませんか?
Web担の記事がコンパクトに毎週届くメールマガジン「Web担ウィークリー」は、10万人が読んでいる人気メルマガ。忙しいあなたの情報収集力をアップさせる強い味方で、お得な情報もいち早く入手できます。

Web担に広告を掲載しませんか?
購読者数10万人のメールマガジン広告をはじめとする広告サービスで、御社の認知向上やセミナー集客を強力にお手伝いいたします。

サイトマップ
RSSフィード


Web担を応援して支えてくださっている企業さま [各サービス/製品の紹介はこちらから]

GOLD SPONSOR
さくらインターネット株式会社株式会社KDDI ウェブコミュニケーションズ株式会社日本レジストリサービスオープンテキスト株式会社トランスコスモス株式会社株式会社ハイパーボックスDomain Keeper
SPONSOR
株式会社キノトロープ株式会社アイレップ株式会社ニューズ・ツー・ユーシックス・アパート株式会社ウェブアンテナ株式会社サイバーエージェント富士通株式会社Sitecore