前編から続きます。

Webサイトに掲載する原稿の作成課程において発生しがちな事案を基に、Webアクセシビリティに配慮したWebページにするため、Web担当者の方に気をつけて頂きたい原稿作成のポイントを10個挙げて、わかりやすく解説する本記事。

今回は後編として残りのポイント5つを解説します。

6. 複雑な表組みは避けてなるべく簡単にしましょう

企業Webサイトで、特に数字的な発表や、調査結果などを掲載する際に、表組み（テーブル）を利用するケースは多いと思います。しかし、あまり複雑な表組みは、特に読み上げ環境でWebページを閲覧している利用者には、内容の理解が難しく、情報が正しく理解できない場合があります。

表組みには、見出しセルを表す th 要素、データセルを表す td 要素の他に、表組みのキャプションを表す caption 要素などがあります。また、列や行のグループを表すための thead 要素、tbody 要素、tfoot 要素や、colgroup 要素、col 要素などもありますし、さらに見出しセルとデータセルの関係を示す為の scope 属性や headers 属性など多くの要素、属性がありますが、これらを駆使した複雑な表組みのマークアップは、文章を作成するWeb担当者の方にとっても負担になりますし、あまり現実的ではありません。

また、仮にそれら要素や属性を駆使してマークアップしたとしても、表組み内のセルを順番に読み上げながら内容を理解しなければならない環境にある利用者などにとっては、巨大な、あるいは複雑な表組みの内容を正しく理解するのは容易なことではありません。

例えば、下記のような表組みはそれ程複雑ではありませんが、複数の見出しセルが1つのデータセルを参照する形、要するに縦軸と横軸を同時に見ることで、データセルに入った数字の意味がわかるようになっています。

<h3>町別人口推移（2014年度～2016年度）の調査結果</h3>
<table>
<caption>町別人口推移（2014年度～2016年度）</caption>
  <tr>
    <td>-</td>
    <th scope="col">○○町</th>
    <th scope="col">□□町</th>
    <th scope="col">△△町</th>
  </tr>
  <tr>
    <th scope="row">2014年度</th>
    <td>123人</td>
    <td>57人</td>
    <td>134人</td>
  </tr>
  <tr>
    <th scope="row">2015年度</th>
    <td>123人</td>
    <td>58人</td>
    <td>134人</td>
  </tr>
  <tr>
    <th scope="row">2016年度</th>
    <td>123人</td>
    <td>58人</td>
    <td>134人</td>
  </tr>
</table>

Webページを目視できる利用者にとっては容易に内容を理解することができると思いますが、前述の通り、読み上げ環境においては目で読むよりも理解するための難易度は上がります。

これをさらに簡単な表組みにするためには、例えば下記のように町別に表組みを分けてしまうのも良いでしょう。こうすることで、表組みはとても単純になり、読み上げ環境でも意味を理解するのが比較的容易になります。

<h3>町別人口推移（2014年度～2016年度）の調査結果</h3>
<h4>○○町の調査結果</h4>
<table>
<caption>○○町 人口推移（2014年度～2016年度）</caption>
  <tr>
    <th scope="row">2014年度</th>
    <td>123人</td>
  </tr>
  <tr>
    <th scope="row">2015年度</th>
    <td>123人</td>
  </tr>
  <tr>
    <th scope="row">2016年度</th>
    <td>123人</td>
  </tr>
</table>

<h4>□□町の調査結果</h4>
<table>
<caption>□□町 人口推移（2014年度～2016年度）</caption>
  <tr>
    <th scope="row">2014年度</th>
    <td>57人</td>
  </tr>
  <tr>
    <th scope="row">2015年度</th>
    <td>58人</td>
  </tr>
  <tr>
    <th scope="row">2016年度</th>
    <td>58人</td>
  </tr>
</table>

もちろん、「各町の数字を比較する」という用途でいうと、表組みを分けてしまうことで逆にわかりにくくなってしまうことも考えられるため、これが必ず正解とは限りませんが、なるべく単純な表組みになるように再編成してから掲載できると、利用者にも実際に表組みを作成するWeb担当者にも負担がかかりません。

表組みを使用する際は、「なるべく単純な表組みになるように」配慮するとよいでしょう。正しく表組みをマークアップすることはWebアクセシビリティガイドラインにおける達成レベル「A」に該当します。

参考リンク

7. 上記、左記、同上 等の文言を安易に使わないようにしましょう

Web担当者が原稿を作成する際に起こりがちな事案として、「同上（あるいは「〃」）」「左記」などといった社内文書等ではよく使用する文言をそのまま使ってしまうことで起こるアクセシビリティ上の問題があります。

例えば表組みなどが含まれた文章で、下記のように「同上」などを使ってしまうと、読み上げ環境でWebサイトを利用している方には位置関係がわからないことで意味が通じなくなってしまうケースがあります。

<!--良くない例-->
<table>
<caption>町別人口推移（2014年度～2016年度）</caption>
  <tr>
    <td>-</td>
    <th scope="col">○○町</th>
    <th scope="col">□□町</th>
    <th scope="col">△△町</th>
  </tr>
  <tr>
    <th scope="row">2014年度</th>
    <td>123人</td>
    <td>57人</td>
    <td>134人</td>
  </tr>
  <tr>
    <th scope="row">2015年度</th>
    <td>同上</td>
    <td>58人</td>
    <td>同上</td>
  </tr>
  <tr>
    <th scope="row">2016年度</th>
    <td>〃</td>
    <td>〃</td>
    <td>〃</td>
  </tr>
</table>

もし同じ数値が入るにしても、「同上」「〃」など、位置関係がわからないと意味が理解できない書き方は避け、きちんと数値などを記述するようにしましょう。

前のセクションでも触れたとおり、元々表組みは読み上げ環境で意味を理解するのが難しいコンテンツです。少しでもわかりやすく表組みを作成するように心がけましょう。

また、「左記の記述」などの表記についても同様に、読み上げ環境で利用している方にとってはどの記述が該当するのかわかりにくく、アクセシビリティ上の問題が生じます。

特にWebページにおける左右のレイアウトはスタイルシート（CSS）で実現されるため、HTMLソースコード上の記述順には左右の概念がありません。ある程度の推測はできますが、利用者に負担をかけることになるため、こういった曖昧な記述自体を避けることが重要です。

原稿を作成する際、このような「位置関係がわからないと意味が通じなくなるような記述がないか」よく確認しましょう。本項目はWebアクセシビリティガイドラインにおける達成レベル「A」に該当します。

参考リンク

8. 英単語をすべて大文字で書かないようにしましょう

英単語をWebページ上で使用するケースも多々あると思います。その際、見た目を重視して英単語をすべて大文字で記述してしまったりすると、読み上げ環境では英単語が正しく読み上げられず、利用者が理解できなくなってしまう場合があります。

<!--良くない例-->
<h3>SUMMER CAMPAIGN 2016 を実施中</h3>

このような記述はよくやってしまいがちです。しかし環境によってはこのようにすべて大文字で書かれてしまうと、「エス ユー エム エム ......」のように、英単語ではなくアルファベットとして読み上げてしまう場合があり、意味が通じにくくなってしまいます。

表記上は下記のように記述し、CSSを用いて大文字に変換（text-transform:uppercase;）するといった方法があります。実際には大文字に変換するための指定をWebサイト制作者にあらかじめ指定しておいてもらい、<span class="*"> のような形式で呼び出すのがよいと思います。

<!--良い例-->
<h3><span style="text-transform:uppercase;" lang="en">Summer Campaign</span> 2016 を実施中</h3>

一方で、例えば「HTML」のように、アルファベットで読み上げられるべきものは、大文字で記述することで正しく読み上げられることが期待できます。

9. 箇条書きなどは適切にマークアップしましょう

HTMLをすべて覚える必要はありませんが、Web担当者の方でも最低限これだけは覚えておくと良いHTML要素として、前編でも触れた見だし要素に加え、ul 要素と ol 要素があります。

ul 要素は箇条書き、つまり記述されている順番には意味がないリストを表します。一方の ol 要素は、順序付きリスト、つまり書かれている順番に意味があるリスト、例えば手順などを表します。

HTMLの知識のない方が文章を作成すると、例えば箇条書きは「・」などを文頭に付けて、改行で記述することが多いと思いますが、これをきちんと ul 要素でマークアップすると、コンピュータがテキストの意味をより理解しやすくなり、正しく処理できることで、結果としてアクセシビリティが向上します。

<!--良くない例-->
<p>持ち物は下記の通りです。</p>
<p>・筆記用具</p>
<p>・社員証</p>
<p>・事前に配布した受験票</p>
<p>入室は下記の手順に従ってください</p>
<p>
1.受験票に記載の部屋番号を確認し、各自部屋まで移動してください<br>
2.部屋の前に受験番号ごとの席番号が貼り出されていますので確認して着席してください<br>
3.試験官が順番に本人確認に回りますので受験票を渡してください
</p>

下記のように正しく要素が使えるとよいでしょう。

<!--良い例-->
<p>持ち物は下記の通りです。</p>
<ul>
  <li>筆記用具</li>
  <li>社員証</li>
  <li>事前に配布した受験票</li>
</ul>
<p>入室は下記の手順に従ってください</p>
<ol>
  <li>受験票に記載の部屋番号を確認し、各自部屋まで移動してください</li>
  <li>部屋の前に受験番号ごとの席番号が貼り出されていますので確認して着席してください</li>
  <li>試験官が順番に本人確認に回りますので受験票を渡してください</li>
</ol>

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

参考リンク

10. Webページには適切なタイトルをつけましょう

CMS（コンテンツ・マネージメント・システム）を利用してWebページを追加する作業を、Web担当者の方が自分で行うケースも多いと思います。また、多くの場合、CMSで記事のタイトルに入力した内容が、Webページのタイトル（title 要素）として使用されるようになっています。

一方で、Webページには適切なタイトルを設定しないと、利用者が現在いるページを判別したり、探し出したりすることが困難になってしまう場合があります。

特に同じようなタイトルになりやすいWebページは注意が必要です。例えば、「新卒採用に関するお知らせ」などのニュースコンテンツは、毎年投稿される場合がありますが、きちんと年ごとに「2016年度 新卒採用に関するお知らせ」のように適切なタイトルをつけないと、サイト内検索などで一覧が表示された場合などに、目的のページを探し出すのが困難になるかもしれません。

Web担当者の方が自身でWebページのタイトルを決められる場合は、「客観的にページの内容がわかりやすいタイトルになっているか」をよく確認しましょう。本項目はWebアクセシビリティガイドラインにおける達成レベル「A」に該当します。

参考リンク

さて、いかがだったでしょうか。まずは今回挙げた10個を意識して原稿を作ってみるだけでも、かなりWebアクセシビリティに配慮したWebページを作ることが可能になると思います。

もちろん、今回書いたことがすべてではありませんので、これをきっかけに、より詳しくWebアクセシビリティについて考えてみるのもよいのではないでしょうか。

関連するコラム

関連するサービス