血統の森+はてな

旧はてなダイアリーの自動インポートによるアーカイブです。

テーブルのアクセシビリティについてちらっと考えた。

アクセシビリティに配慮したリンクのはり方とは（その1）–リンクテキストとリンクの配置– | すちゃらかコーダーを読んで、title属性でリンクを区別させる方法ってあるよね、と思い出したのが事の発端。

具体的には、うちのCSS3の日本語訳集で、今のところこういう風にコーディングしてる。

<table class="status">
  <tbody>
    <tr>
      <th scope="rowgroup">Maintenance</th>
      <th scope="col">Current</th>
      <th scope="col">日本語訳</th>
      <th scope="col">備考</th>
    </tr>
    <tr>
      <td>CSS Snapshot 2010</td>
      <td class="rec">
        <a href="http://www.w3.org/TR/2011/NOTE-css-2010-20110512/" title="NOTE-css-2010-20110512">NOTE</a>
      </td>
      <td class="eq_rec">
        <a href="http://standards.mitsue.co.jp/resources/w3c/TR/css-2010/" title="WOTE-css-2010-20110512(ja)">一致</a>
      </td>
      <td>Latest stable CSS</td>
    </tr>
    <tr>
      <td>CSS Level 2 Revision 1</td>
      <td class="rec">
        <a href="http://www.w3.org/TR/2011/REC-CSS2-20110607/" title="REC-CSS2-20110607">REC</a>
      </td>
      <td class="eq_rec">
        <a href="http://momdo.s35.xrea.com/web-html-test/spec/CSS21/cover.html" title="REC-CSS2-20110607(ja)">一致</a>
      </td>
      <td><a href="http://www.w3.org/Style/css2-updates/REC-CSS2-20110607-errata.html">エラッタ</a>あり</td>
    </tr>
<!--中略-->
  </tbody>
</table>

NOTEやREC、一致などと言った状態を表すリンクテキストをtitle属性で明示的に区別しよう、という試みなのだけど、これはAnother HTML-lintの<A> のアンカー `XXXX` は NN行目で異なるリンク先を指しています。*1 という指摘で知ったり。

ところが、Lintのアクセス指針技術文書4.6（WCAG 1.0をみている）は、アンカーがうまく効いておらず、どの項目を指しているのかよくわからない状態になっている*2。要は、Another-lintの説明がメンテナンスされていない、ってことなんだけど、この際だからCSS3の日本語訳集を肴にいろいろと調べてみるかというお話。

title属性を使うと言うこと

HTML5には注に以下ような記述がある。

title属性に頼ることは、多くのユーザーエージェントがこの仕様で要求されるようなアクセス可能な方法で属性を公開しないため、現在推奨されない（たとえば、ツールチップを引き起こすマウスなどのポインティングデバイスが必要になり、これは、近代的な携帯端末やタブレットをもつ人のような、キーボードのみのユーザーとタッチのみのユーザーを除外する）。

3.2.3.2 title属性

とまあ、スマホやタブレットみたいなタッチスクリーンで機能しないので、あんまりオススメしないという具合である。

そもそも論として、リンクを区別すべきと根拠は

2.4.4 文脈におけるリンクの目的: それぞれのリンクの目的が、リンクのテキストだけから、又はプログラムが解釈可能なリンクの文脈をリンクのテキストとあわせたものから解釈できる。ただし、リンクの目的が一般的にみて利用者にとって曖昧な場合は除く。

Web Content Accessibility Guidelines (WCAG) 2.0

あたりのWCAG 2.0の文言による。で、達成基準 2.4.4 を理解する | WCAG 2.0解説書なんかを読むと、H33： title属性を用いて、リンクテキストの文言を補足する｜WCAG 2.0 実装方法集もあるにはあるものの、

title属性へのアクセス方法について、ユーザーエージェントごとにサポートが大きく異なるため、コンテンツ制作者はこの実装方法を用いるときは注意を払うべきである。

という具合であまり前向きでもない。やや長くなったけれども、title属性を使うのはベターの方法ですらないと考えた方がよさげ。

ではどうすべきか。

CSS3の日本語訳集をXHTML1で書いているのでHTML5に書き直すというのは別に着手するとして、そもそもリンクテキストを上位でマークアップしている、テーブルのアクセシビリティをどう確保するべきか？というところに戻ってみたい。

WCAG 2.0 実装方法集では、H79: リンクテキストとそれが含まれているデータセル及び関連づけられた見出しセルとを組み合わせて、リンクの目的を特定するとして、id属性とheaders属性を使用する方法がとり上げられている。リンク先の例を借りてくると、

<table>
 <tr>
  <th></th>
  <th id="a1">Alamo社</th>
  <th id="a2">Budget社</th>
  <th id="a3">National社</th>
  <th id="a4">Avis社</th>
  <th id="a5">Hertz社</th>
 </tr>
 <tr>
  <th id="b1">低燃費車</th>
  <td headers="a1 b1"><a href="econ_ala.htm">1日 67ドル</a></td>
  <td headers="a2 b1"><a href="econ_bud.htm">1日 68ドル</a></td>
  <td headers="a3 b1"><a href="econ_nat.htm">1日 72ドル</a></td>
  <td headers="a4 b1"><a href="econ_av.htm">1日 74ドル</a></td>
  <td headers="a5 b1"><a href="econ_hz.htm">1日 74ドル</a></td>
 </tr>
 <tr>
  <th id="b2">小型車</th>
  <td headers="a1 b2"><a href="comp_ala.htm">1日 68ドル</a></td>
  <td headers="a2 b2"><a href="comp_bud.htm">1日 69ドル</a></td>
  <td headers="a3 b2"><a href="comp_nat.htm">1日 74ドル</a></td>
  <td headers="a4 b2"><a href="comp_av.htm">1日 76ドル</a></td>
  <td headers="a5 b2"><a href="comp_hz.htm">1日 76ドル</a></td>
 </tr>
<!--中略-->
</table>

という具合。しかし、セルの結合が存在しない単純なテーブルのマークアップでここまでマークアップするのは過剰ではないだろうか？という疑問はぬぐいきれない。行と列を決めれば、一意にセルは決定されるというよりむしろ、自明なわけで。

とまあ、そうこう考えて軽くググったところ、テーブルとアクセシビリティ -- ごく簡単なHTMLの説明に辿り着いた。行き着く先が（やっぱり）The Web KANZAKIというのが個人的に何とも言えない…。

で結論としては、scope属性で十分なのではないかと。HTML4にもHTML5にもあるのだけれど、HTML5の4.9.10 th要素や4.9.11 tdとth要素の共通属性のscope属性やheaders属性の説明はちょっと甘くて（両者の関連性がよくわからない）、11.4 非視覚系ユーザエージェントによる表のレンダリングの方が手厚く書かれている（後で書かれた文章の説明がいまいちってのもなんだかアレだけど）。

  • データのコマのheaders属性は、どのコマが対応する見出しであるかを列挙するものである。 この目的については、どの見出しコマもid属性で命名されていなければならない。 ここで、あるコマが常に見出しかデータかに明快に分けられるわけでない点に注意されたい。 そうしたコマについては、TD要素で規定し、 id属性とscope属性とを適切に用いる必要がある。
  • 見出しのコマにおいては、 scope属性が、ユーザエージェントに対して、当該見出しコマが情報を提供するデータのコマを示す。 著者は、headers属性ではなくこちらの属性を用いることを選んでもよい。 2つの属性は同じ機能を持っており、こちらの属性の方が便利である。 headers属性は、一般に、情報を提供する相手データと比べて不規則的な位置に見出しがある場合に必要とされる。
11.4.1 データのコマと見出し情報との連携

という具合でheaders属性とscope属性はだいたい似たような位置づけで、適切にこれらを活用しましょう、と。

さて、WCAG 2.0にも当然H63: scope属性を用いて、データテーブルの見出しセルとデータセルを関連付けるとして取り上げられているも、達成基準 1.3.1 (情報及び関係性)に関係する項目であって、達成基準 2.4.4 (文脈におけるリンクの目的)の項目ではない、というあたりに何だかなぁ…という気がしなくもない…。

まとめ

そもそも元コンテンツのマークアップの仕方にかなり難があるのでは、というところに落ち着くあたり、アクセシビリティ以前の問題ではないかという疑いがorz
HTML難しいです…。

*1:http://openlab.ring.gr.jp/k16/htmllint/explain.html#same-link-text

*2:http://www.w3.org/TR/WCAG10-TECHS/#links