「Webアクセシビリティ」 というと、専門的な知識を持ったWebサイト制作者がなにやら難しいルールに則ってHTMLを記述したりといった、技術的な部分に目が行き、そういうものは専門家に任せるべきことで自分たちには関係ないとお考えの企業Web担当者の方も多いかと思います。

しかし、CMS（コンテンツ・マネージメント・システム）の導入により、Webサイト納品後、ニュースリリースの配信や簡単なページ追加程度の軽微、かつスピードやタイミングが重要な更新については、企業Web担当者の方がご自身で行うケースが、近年ではごく当たり前になっていることから、それらページを更新する担当者の方も、最低限のWebアクセシビリティに関する知識を持たなければ、Webサイトの品質を一定に保つことが難しい状況になっています。

とはいえ、Web担当者の方が、Webアクセシビリティに関する専門知識を完璧に身につける必要があるかというと、そこまでは不要です。実はWebアクセシビリティといっても、「最低限これだけは気をつけましょう」といういくつかのポイントさえ忘れなければ、一般的な企業Webサイトの運用フェーズにおいて、十分アクセシブルなWebコンテンツを更新していくことは可能です。

今回は、Web担当者の方向けに、「Webアクセシビリティのために、まずここだけは気をつけましょう」という原稿作成のポイントを10個、紹介したいと思います。

Webサイトに掲載するニュースリリースやレポート、あるいは製品、サービス情報など、最低限この10のポイントを守るだけで、Webアクセシビリティに関して起こりがちな問題の多くを防ぐことができますので、ぜひ、Webサイトに掲載する原稿を作成する際に気をつけてみてください。

少し長いので前編（本記事）、後編の2回に分けて掲載します。

1. 「こちら」などというリンクはやめましょう

よくやってしまいがちなリンクの設定例として、下記のように、「こちら」などといった曖昧な文言にリンクを設定してしまう事案があります。

<!--良くない例-->
○○イベントの詳細については<a href="info.html">こちら</a>をご覧ください。

Webページを目視できる利用者にとっては特に問題ないリンクの貼り方でも、スクリーンリーダーなど、Webサイトを読み上げ環境で利用している方にとっては、このようなリンクは目的のリンクを探し出すのに支障が出る可能性が高く、避けたい事案です。

「リンクに含まれるテキストから、リンク先の内容が想像できる」ことを意識してリンクを設定してみましょう。例えば下記のようにするとよいでしょう。

<!--良い例-->
<a href="info.html">○○イベントの詳細についてはこちら</a>をご覧ください。

また、例えば1つのリンクに対して複数のファイル形式で閲覧できる場合などは、前の文脈から続くリンクの内容が想定できるように並べてあげると親切です。

<a href="info.html">○○イベント 結果報告</a> （その他のファイル形式： <a href="info.pdf">PDF版 [20KB]</a>）

リンクの目的が利用者にとって理解しやすいようにリンクテキストを提供することは、Webアクセシビリティの標準的ガイドラインである、WCAG（Web Content Accessibility Guidelines）、及びJIS X 8341-3:2016における適合レベル「A」に該当します。

レベルAは最も達成が容易な項目として設定されているもので、Webアクセシビリティを考慮する上で最低限配慮したい点と言えますので、覚えておきましょう。

参考リンク

2. テキストの体裁を空白で整えようとしないようにしましょう

原稿上で行った文字揃えをWebページ上でも再現したいと考え、空白を入れてテキストの体裁を整えようとしたり、文章内で改行される位置を意図した通りにしたいため、強制的に改行したり、あるいは各行の頭に空白を入れて文頭をそろえようとするようなことをされる方も多いのではないでしょうか？

このように、単語間などに空白をいれてしまうと、それがひとつの単語であるとプログラムで解釈できないようにしてしまうことで、読み上げ環境で正しく読み上げられず、意味が通じなくなってしまうといった弊害が発生します。

<!--良くない例-->
<h3>日　時</h3>
<p>2016年1月25日 14時より</p>
<h3>会　場</h3>
<p>県立体育館 第2会議室</p>
<h3>司会者</h3>
<p>日本　太郎</p>

例えば上記例のように「日　時」としてしまうと、プログラムはこれを「日時」という単語としてではなく「日」「時」という別々の漢字と認識する可能性があります。すると、「にちじ」と読み上げず、「ひ」「とき」などと読み上げてしまうかもしれません。

<!--良くない例-->
<h3>議事録</h3>
<p>
　2016年1月25日 14時より開催された第2回定例会議は県立体<br />
　育館 第2会議室に参加者10名を集めて行われた。
</p>

上記の例は、テキストの改行位置を強制し、さらに文頭をそろえるために空白を入れてしまった例ですが、この場合も本来ひとつの単語として読み上げられるべき「県立体育館」が、「県立体」と「育館」に改行と空白によって分割されてしまっており、正しく読み上げられない可能性があります。

Webページでは、利用者の閲覧環境などによって文字サイズや1行あたりの文字数は変わります。必ずしも文書作成者の意図した通りに改行されるとは限りませんし、文字揃えをしたり、文頭を1文字字下げしたりという処理はCSSで行うべきことです。

「単語間に空白や改行を入れないように」原稿を作成するようにしてください。本項目はWebアクセシビリティガイドラインにおける達成レベル「A」に該当します。

参考リンク

3. 色や形だけで情報を伝えるのはやめましょう

例えばグラフの画像を作成する際、「赤い線は○○です」「青い線は○○です」といった表記の仕方をしてしまったり、「赤い文字は重要事項です」「下の赤いボタンを押してください」、あるいは「下のボタンのうち、四角いものをクリックしてください」などといった表記は、Webページを読み上げ環境で利用している方、あるいは目視はできるが、色覚に問題があり、色を正確に見ることができない方にとっては理解や操作ができなかったり、著しく不便になる場合があります。

「色や形に依存せず、情報が伝わる文章になっているか」、事前に確認しましょう。本項目はWebアクセシビリティガイドラインにおける達成レベル「A」に該当します。

参考リンク

4. 見出しを適切に使いましょう

Web担当者が原稿を作成する際、見出しに相当するテキストを「■」「★」などの記号を先頭に付けることで表そうとしたり、あるいは単に太字にすることで表そうとする場合があります。

CMSのリッチテキストエディタには、太字にするボタンはあっても、見出しのレベルを適切に選択できるボタンはない場合も多いですし、Web担当者にとってHTMLはわかりにくいこともあり、直接マークアップするのは難しいといった事情があるとは思いますが、適切な見出しを選択することはアクセシブルなWebページを作成する上で重要です。

下記のことを最低限覚えておくとよいでしょう。

  • 見出しを表すHTMLタグは<h1>～</h6>まで6段階用意されている
  • <h1>が最も上位の見出しで、<h6>が最も下位の見出しを表す

その上で、Webサイトの制作会社に問い合わせれば、「本文内では<h3>～</h6>の範囲で使用してください」などといった指示がもらえるはずです。この場合、作成する原稿内で最も上の見出しを<h3>に、その見出し内のサブセクションの見出しは<h4>といった形で選択すればよいでしょう。

<!--見出しが適切に選択されていない例-->
<p><strong>○○について</strong></p>
<p>○○については下記の議事録の通り決定しました。</p>
<p>■議事録</p>
<p>○○は2016年2月1日より......</p>

見出しを適切に選択すると、例えば下記のようなソースコードになります。

<!--見出しを適切に選択し直した例-->
<h3>○○について</h3>
<p>○○については下記の議事録の通り決定しました。</p>
<h4>議事録</h4>
<p>○○は2016年2月1日より......</p>

Webページを読み上げ環境で利用している方は、特にページ内の情報量が多い場合など、必要な情報を探し出すのにとても時間がかかる場合があります。

文書内で適切に見出しが設定されていれば、見出しだけを読み上げて必要な情報がありそうな箇所を探し出すことができるなど、情報へのアクセスが容易になります。

また、健常者にとっても、適切に見出しが設定されていることで流し読みしながら必要な情報を探すことができるなど、利便性が向上するため、原稿を作成する際は、「事前にきちんと章立てをし、適度な文章量ごとに適切な見出しをつける」癖をつけるとよいでしょう。

本項目はWebアクセシビリティガイドラインにおける達成レベル「AA」に該当します。

参考リンク

5. 画像の代替テキストは適切に設定しましょう

読み上げ環境を利用する方は視覚に障害がある方など、Webページを目視できない方が主になりますので、当然ですがWebページ上に掲載された画像を見ることができません。

一方でHTMLには、画像を見ることができない方や、あるいはブラウザの仕様や設定、ネットワーク環境などによって画像が表示されなかった場合に、その画像がどんな内容なのかについて記述するため、alt属性という属性が用意されています。

このalt属性に画像の内容を表す「代替テキスト」を正しく記述することで、そのような場合に代替テキストの内容が表示されたり、読み上げられたりすることで、ある程度画像の内容を理解する手助けとすることができます。つまりそれが適切でなければ、読み上げ環境などにおいては画像の内容が全く理解不可能となってしまいます。

<!--代替テキストが設定されていない。alt属性が空の例-->
<p>受付への道順は下記をご確認ください</p>
<p><img src="map.jpg" alt=""></p>

<!--代替テキストが設定されているが、不足していて意味がわからない例-->
<p>受付への道順は下記をご確認ください</p>
<p><img src="map.jpg" alt="受付の場所"></p>

下記のように画像の内容をきちんと説明する代替テキストが設定されていれば、読み上げ環境でもある程度意味を理解することができます。

<!--適切と思われる代替テキストの例-->
<p>受付への道順は下記をご確認ください</p>
<p><img src="map.jpg" alt="受付への道順：ビルの入り口を入ると左手にエレベーターがございますので、4階まで上がって頂き、エレベータを降りて正面に10メートル程進んだ左手が弊社受付になります。"></p>

画像が表示されなかったとして、「どのような代替テキストを提供すれば画像の内容を理解してもらえるのか」、原稿作成時は常に想像力を働かせる必要があります。

とはいえ、画像の内容をすべて説明するのは現実的ではない場合もあります。特に重要な情報については、画像以外にもテキストで補足するような配慮ができるとなお良いでしょう。本項目はWebアクセシビリティガイドラインにおける達成レベル「A」に該当します。

参考リンク

後編に続きます。

関連するコラム

関連するサービス