第10回 ライティング全般の問題を考える | デザインってオモシロイ -MdN Design Interactive-
【サイトリニューアル!】新サイトはこちらMdNについて

第10回 ライティング全般の問題を考える


Webサイトのアクセシビリティの見地からライティングの問題を考えたとき、もっとも大切なのがコンテンツ上の誤記をなくすことです。当然のことと感じる読者の方も多いでしょうが、Webサイトの文章には誤記が多くアクセシビリティ上、問題となる事象にはライティングによって生じるものがもっとも多いということは、意外に知られていないのではないでしょうか。

今回は、誤記にはじまるWebアクセシビリティ上、特に問題とされるライティングの事例を挙げながら、アクセシビリティの向上のために、なぜそれが重要なのか考えていきます。

(解説:辻 勝利)

著者近影
[プロフィール]
つじ・かつとし●株式会社ミツエーリンクス アクセシビリティ・エンジニア。先天性の全盲で、インターネットをライフラインとして日常的に使用する。2001年よりWebアクセシビリティに関わる仕事に従事し、数多くの企業や自治体のWebサイトの音声読み上げ環境での検証を行う。現在は、アクセシビリティBlogでの情報発信や講演を通して、Webアクセシビリティの更なる普及・啓蒙活動を行っている。


誤記について


本連載の第2回「Webの閲覧環境とアクセシビリティ」でもお伝えした通り、音声ブラウザやスクリーン・リーダーはWebサイトのテキスト情報を音声に変換して利用者に伝えています。そのためWebサイト上に誤記があると、まちがった情報までそのまま利用者に伝えられてしまいます。

Webサイトを閲覧する際、視覚系ブラウザを利用していれば、周囲の装飾情報や画像などテキスト以外の情報も同時に閲覧することができるため、もしかすると小さな誤記には気がつきにくいかもしれません。しかし、音声読み上げ環境ではテキストが情報の中心ですから、テキスト情報が利用者に与える影響も大きいわけです。

なかには、大切な自社の商品名を誤って記述している企業サイトもあります。そのようなWebサイトが利用者に与える企業イメージも決してよいものではないでしょう。

それでは、音声読み上げ環境で気になる誤記の一例を紹介しましょう。長音記号とハイフン記号を誤って使用した例です。

『このデ-タは、ユーザーのニ-ズを把握する上で十分役に立ちます。』
『このデータは、ユーザーのニーズを把握する上で十分役に立ちます。』

上の例は本来長音記号を用いるべき「データ」や「ニーズ」の長音が、マイナス記号「-」になっています。この文を音声読み上げ環境で聞いた場合、次の音声のように聞こえます。

上記の例文を読み上げた音声。長音記号が「まいなす」と読み上げられるため、単語が不自然に聞こえる。

また、誤記や誤字があっても見過ごされがちなのが代替テキストとして設定された情報です。代替テキストは一度設定してしまうと、通常画面上には表示されることがありません。ですが、音声読み上げ環境でページを閲覧する利用者やテキストブラウザの利用者には重要な情報ですので、公開前には十分にチェックする必要があります。

レイアウト調整を目的としたスペース


画面レイアウトを整えるために単語中に挿入されるスペースについては、Webアクセシビリティに関するJIS規格、JIS X 8341-3の中でも「5.9E 表現のために単語の途中にスペース又は改行を入れてはならない。」とされています。単語中にスペースや改行が挿入されていると、音声読み上げ環境によっては単語として正しく認識できないため、利用者に情報が伝わらない可能性があるからです。

以下にその一例をご紹介します。

経 済:音声読み上げ環境によっては「へ・すみ」と読まれることがあります。
東 京:「ひがし・きょう」と読まれることがあります。
日 時:「ひ・とき」と読まれることがあります。

このように、単語中にスペースを挿入し文字間を調整することで、画面表示上は読みやすくなるものも、音声読み上げ環境では正しい読み上げができないため、情報が伝わらない可能性があります。

「こちら」や「ここ」とだけ表記したリンク


リンク項目は現在閲覧中のページから別のページにアクセスするための手段であり、Webページ内の情報の中で本文と同じくらい重要な意味を持っています。

訪れたWebサイト内で目的の情報を探す際、目的の情報をより早く見つけ出すために、筆者はしばしばページを隅々まで聞くのでなくページ内に設定されたリンクだけをたどります。そんなときに困るのが「こちら」や「ここ」とだけ記されたリンク項目です。本文と同時に聞いてみると特に問題のないリンク項目であっても、リンクだけを聞いた場合にはどのリンクがどのページに移動するためのものなのかがわかりません。

たとえば、3つの商品が紹介されているページがあるとします。そして、それぞれの商品説明のページへのリンクが設定されている様子を想像してください。以下の文中の「」で囲まれた部分がリンクです。

  • 当社の新商品Aをぜひご賞味ください。商品Aの原材料と産地の詳細は「こちら」をご覧ください。
  • 1年前に大好評をいただきました商品Bの販売を今年も行います。価格はそのままに、10パーセント増量して新登場です。ぜひこの機会に「こちら」もお試しください。
  • 当社の人気No.1の座を15年もの永きに渡って守り続ける商品Cは、「こちら」からご注文いただけます。

上記のようなページの説明をリンク項目だけをたどって聞いた場合、どれも「こちら」としか読まれません。音声読み上げ環境の利用者は、どの「こちら」がどの商品のページへリンクしているのか、周囲の本文を注意深く読み直さなければ目的のリンクを開くことができないのです。

このような場合、リンク項目としてそれぞれの商品名を設定することで、リンクだけをたどって情報を閲覧している利用者でも、目的の情報が探しやすくなります。

Webサイト上のコンテンツの書き方に気をつけることは、Webアクセシビリティの基本的な項目といえます。Webサイトの情報設計を行う際や、日々の情報更新の際に、最低限のアクセシビリティ対応について、ぜひもう一度チェックしてみてください。


次回につづく
twitter facebook このエントリーをはてなブックマークに追加 RSS
【サイトリニューアル!】新サイトはこちらMdNについて

この連載のすべての記事

アクセスランキング

8.30-9.5

MdN BOOKS|デザインの本

Pick upコンテンツ

現在