メルマガ第17号を発行しました！

こんにちは！
「AccSellメールマガジン」第17号が発行されました！

第17号の内容は

[連載] 中根雅文の「全盲のコンピューター利用に関する四方山話」
第17回: 点字スクリーン・リーダーの機能
[連載] 植木 真の「JIS X 8341-3:2010　『逆引き』徹底解説」
第16回：JIS X 8341-3:2010 実践　＜その8＞ テーブル
[新不定期連載] 山本和泉の「izuizuのアクセシビリティ100本ノック」
1本目: 東京都の「今週のおすすめ」を考える
一緒にノックをうける

の3本です！

今回のチラ見せは植木さんのテーブルのお話です。
そして新連載は「izuizuのアクセシビリティ100本ノック！」です。中根さんと植木さんの判定やいかに！？

［連載］植木 真の「JIS X 8341-3:2010　『逆引き』徹底解説」
第16回：JIS X 8341-3:2010 実践　＜その8＞ テーブル

JIS X 8341-3:2010の『逆引き』徹底解説、8回目となる今回のテーマは「テーブル」です。テーブルは、列と行の二次元でデータや情報を提示するために用います。

■テーブルに関する達成基準

まず最初に、JIS X 8341-3:2010の達成基準のうち、テーブルに関連するものを挙げてみましょう。

  • 7.1.3.1 情報及び関係性に関する達成基準［等級A］
  • 7.1.3.2 意味のある順序に関する達成基準［等級A］
  • 7.2.4.4 文脈におけるリンクの目的に関する達成基準［等級A］

ここでは三つの達成基準を挙げましたが、テーブルに関しては、特に「7.1.3.1 情報及び関係性に関する達成基準」が中心で、あとの二つはオマケみたいな感じです。では、順番に見ていきましょう。

■テーブルの「情報、構造及び関係性」

7.1.3.1 情報及び関係性に関する達成基準
表現を通じて伝達されている情報，構造及び関係性は，プログラムが解釈可能でなければならない。プログラムが解釈可能にすることができないウェブコンテンツ技術を用いる場合は，それらはテキストで提供されていなければならない。

＜引用元： JIS X 8341-3:2010「7 ウェブコンテンツに関する要件」より＞

これまでにも何度か説明してきたと思いますが、この達成基準のポイントは、見た目で伝えている情報、構造や関係性をユーザーエージェント（ブラウザや支援技術など）が解釈できるようにすることです。つまり、マシンリーダブルにすることです。HTMLであれば、ソースコードで適切な要素や属性を用いることによって、マシンリーダブルにすることができます。では、テーブルを用いるとき、その見た目で伝えている情報、構造、そして関係性には、どのようなものがあるでしょうか？

  • テーブルのタイトル（表題）
  • 見出しセル
  • データセル
  • 各データセルが参照している見出しセルとの関係性

テーブルがその見た目で伝えている情報、構造、そして関係性としては、これらのものが挙げられます。これらを見た目だけでなく、ユーザーエージェントがソースコードから解釈できるように、マシンリーダブルにすることによって、より多くのユーザーに情報を届けることができるようになります。例えば、テーブルの見た目を確認することのできないスクリーンリーダーのユーザーも、スクリーンリーダーのテーブル読み上げ機能を用いて内容を理解することができるようになります。

■テーブルのタイトル（表題）

まず、テーブルの表題となるテキストがある場合は、<caption>要素でマークアップしましょう。そうすることによって、ユーザーエージェントはそのテキストがテーブルの表題であると解釈できるようになります。

また、これは『JIS X 8341-3:2010』や『WCAG 2.0』の達成基準の要件にはありませんが、一つお奨めしたいことがあります。それは、<caption>要素でマークアップする表題は、「表1. 2012年度四半期別売上実績」、「表2. 2013年度四半期別売上目標」というふうに、表題であることがわかるように記述することです。同一ページにテーブルが複数ある場合には、例で示したようにそれぞれに番号をつけるといいでしょう。

W3Cの『WCAG 2.0 実装方法集』には、<caption>要素でマークアップする表題に関する注意点として、summary属性を併用している際には、その記述内容が重複しないようにすることを挙げています。

caption要素は、テーブルにsummary属性を指定しているかどうかに関わらず利用できる。caption要素はテーブルを特定するもの、summary属性はテーブルの概要を提供したり、見方を説明するものである。両方とも指定する場合、caption要素にsummary属性と同じ情報を含めるべきではない。

＜引用元： WCAG 2.0 実装方法集「H39: caption要素を用いて、データテーブルの表題とデータテーブルを関連付ける」より＞

1行目や1列名に見出しセルがあるようなシンプルな構造のテーブルであれば、summary属性は必ずしも必要ではないかもしれません。しかし、特に構造が複雑なテーブルの場合には、summary属性を使用すると有効です。summary属性値は、ブラウザの画面には表示されず、主にスクリーンリーダーのユーザーが利用しています。summary属性値にはそのテーブルの要約を記述するわけですが、内容に応じて次のようなことを説明するとよいでしょう。

  • テーブルの目的
  • 行見出しや列見出しにある項目
  • 提示しているデータの全体的な傾向やパターン
  • そのテーブルの使いかたの説明

なお、HTML5では、このsummary属性は廃止される方向性にあるので注意してください。テーブルの構造が複雑で理解しづらく、その要約を説明したほうがよい場合には、summary属性を用いる代わりに、テーブルの直前や表題などで補足説明を提供することを推奨しています。詳細は、以下の「参考リンク」でHTML5の勧告候補にあるソースコード例などを参照してください。

参考リンク

■見出しセルとデータセル

次に、テーブルを構成するセルについてです。セルは、その内容によって、見出しセルかデータセルのどちらかに分類できます。一番上の行にあるセルか、または一番左の列にあるセルが、見出しの役割を果たしていることが多く、その両方が見出しになっている場合もあります。それらを見出しセルといい、それ以外のセル、つまりデータを提示しているセルをデータセルといいます。

この見出しセルとデータセルを、やはり見た目だけではなく、ユーザーエージェントが両者を区別できるようにするためにはマークアップが必要です。見出しセルには<th>要素、データセルには<td>要素を用います。<th>要素でマークアップすると、そのセルにあるテキストは多くのブラウザでは太字で表示されるようになりますが、見栄えはCSSを用いて好みのスタイルを指定できます。そのセルが見出しセルであることをマシンリーダブルにするために、HTMLのソースコードでは<th>要素を用いてマークアップすることが重要です。

参考リンク

■各データセルが参照している見出しセルとの関係性

さて、テーブルのアクセシビリティを確保する上で最も大事なことは、各データセルと参照している見出しセルとの関係性をマシンリーダブルにすることです。1行目や1列目が見出しセルになっているテーブルで、結合されているデータセルのないシンプルな構造であれば、各見出しセルを<th>要素でマークアップするだけで大丈夫です。<th>要素にscope属性を付与するという方法もありますが、テーブル読み上げモードがあるスクリーンリーダーでは、各データセルを読み上げる際に、scope属性の有無に関係なく、参照している見出しセルも一緒に読み上げてくれるからです。

もちろん、scope属性を用いたほうがよりマシンリーダブルになりますし、ユーザーエージェントがより正確に解釈できるようになります。可能な場合には、scope属性も指定するとよいでしょう。scope属性の値には、"col"、"row"、"colgroup"、"rowgroup"の四つがあります。

参考リンク

■複雑なテーブルのデータセルと見出しセルの関係性

ただし、シンプルに縦3行横4列のようなテーブルであればそれでよいのですが、複雑な構造になっている場合には、<th>要素のid属性と<td>要素のheaders属性を用いる必要が出てきます。例えば、WCAG 2.0 実装方法集の「H43: id属性及びheaders属性を用いて、データテーブルのデータセルを見出しセルと関連付ける」では、次のようなコード例が挙げられています。

つづきはメルマガで・・・

[新不定期連載] 山本和泉の「izuizuのアクセシビリティ100本ノック」
1本目：東京都の「今週のおすすめ」を考える

とうとうはじまってしまいました「izuizuのアクセシビリティ100本ノック」。アクセシビリティ・ビギナーの山本和泉（izuizu）が、さまざまなWebサイトの中からアクセシビリティ的に気になったコンテンツを勝手に考えて提案してみる、というコーナーです。そして中根さんと植木さんに（たぶんポッドキャストで）総評いただこうと思っています！この連載から、アクセシビリティ・ビギナーの方々と一緒に成長していきたいです！

さて、第1回目は東京都のWebサイトのトップページの左サイドの「今週のおすすめ情報」の部分について考えてみます。
http://www.metro.tokyo.jp/
（毎週更新しているので、表示されている画像、東京都のWebサイトをみた日によって違います。）

東京都Webサイトの「今週のおすすめ情報」部分のキャプチャ

見出しラベルが気になった！

まず最初に思ったのは、東京都が掲載する「おすすめ情報」っていったいなんなんだろう？ってことに興味が膨らみました。なんせ「今週のおすすめ情報」ってざっくりした見出しですから。そしてこの上には「東日本大震災関連情報」があるので、そこからの流れで「地震対策についてかしら？」「健康診断とかかしら？」「職員募集かしら？」「防犯についてかしら？」「高齢者についてのなにかかしら？」・・・いろいろ想像が膨らみます。

実際は、東京都のホームページの「今週のおすすめ情報」というのは、東京都が報道発表した催し物（イベント）の中から、毎週ひとつピックアップして紹介するコンテンツのようです。要は「イベント情報」なんです。だったら「今週のおすすめイベント情報」のほうがいいような気がします。

エンターテイメント系のサイトなら「今週のおすすめ情報」で「おすすめのイベントの情報だな」ってわかりやすいですが、東京都のような自治体のサイトの場合、コンテンツの種類が多いので、目的のコンテンツをすぐ見つけられる＆伝えられるような見出しラベルのほうがいいんじゃないかなって思いました。

ソースコードが気になった！

次に気になったのはやはりソースコードです。<h2>タグと<div>タグで構成されていました。

<h2>今週のおすすめ情報</h2>
<div><a href="http://www.metro.tokyo.jp/WEEKLY/index.htm" title="「今週のおすすめ情報」へ"><img src="http://www.metro.tokyo.jp/WEEKLY/IMG/20130430_s.jpg" alt="写真：都電バラ号" width="196" height="279"></a></div>
<div id="event_link_top"><img src="http://www.metro.tokyo.jp/IMG/right_arrow.gif" alt="" width="16" height="18"><a href="http://www.metro.tokyo.jp/WEEKLY/index.htm">今週のおすすめ情報</a><br>
<img src="http://www.metro.tokyo.jp/IMG/right_arrow.gif" alt="" width="16" height="18"><a href="http://www.metro.tokyo.jp/HISTORY/event.htm">イベントカレンダー</a></div>

そして、私が考えたソースコードは以下です。

<h2>今週のおすすめイベント</h2>
<dl>
	<dt><a href="http://www.metro.tokyo.jp/WEEKLY/index.htm">6月2日（日）まで「都電バラ号」を運行します！</a></dt>
	<dd><a href="http://www.metro.tokyo.jp/WEEKLY/index.htm"><img src="http://www.metro.tokyo.jp/WEEKLY/IMG/20130507_s.jpg" alt="写真：都電バラ号"></a></dd>
</dl>
<p><a href="http://www.metro.tokyo.jp/WEEKLY/index.htm">今週のおすすめイベント情報の詳細はこちら</a></p>
<p><a href="http://www.metro.tokyo.jp/HISTORY/event.htm">開催中開催予定のイベントカレンダー</a></p>

ブラウザーでみてみる

定義リスト（<dl><dt><dd>）と<p>タグで区切ることで、情報をより伝えやすくなり、アクセシブルになったんじゃないかなぁって思います。

（現行サイトには「おでかけ施設」と「東京の観光」のリンクも同レベルでありますが、「今週のおすすめイベント情報」とは、情報の内容がちょっと違うので今回はここのカテゴリーに入れない、という風にしました。じゃ、どこに入れるねん、というのはまた別の話で^^;）

今回この検証をしてみて、Webサイトのアクセシビリティって、情報の伝え方も一緒に考えないとだなぁっていうことを改めて思い知りました。

さて、中根さん、植木さんの判定はいかに！（ドキドキ）

このコーナーでは「izuizuならこれをどうアクセシブルにする？」というお題を募集します！　気になったWebサイトのURLと気になった箇所をお知らせください。一緒にアクセシビリティ・マスターを目指しましょう！

comments powered by Disqus