『ユーザを混乱させない表組みのコツ』がアクセシビリティへの配慮を含み得ることについて

UD

[2010.1.21追記]トラックバックやはてぶでご指摘いただいたように、読み上げブラウザの標準と実装とについて無知でした*1。ご指摘ありがとうございます。勉強になりました。（「バッドノウハウ」*2というより「あきらかな間違い、標準からの逸脱」ですね。）

はてぶで注目されていたユーザを混乱させない表組みのコツ (ユーザビリティ実践メモ)に表れる表組みの工夫が、実は重度視覚障害者の読み上げブラウザ対策のソリューションの一つになっているかもしれない。ポイントは、読み上げブラウザは基本的にHTMLのソースコードに記述された順番で読み上げるので、『悪い例』の表は読み上げブラウザにかかると「何の日付か分からない日付の読み上げが延々と4回続く」のに対して、『改善例』の表は「日付の読み上げの前に何の日付なのか読み上げる」からである。

<tbody>
  <tr>
    <th>
      開催日
    </th>
    <th colspan="2">
      備考
    </th>
  </tr>
  <tr>
    <td rowspan="3">
      [第51回]<br>2010年1月23日(土)      
    </td>
      <td>
        【申込期間】
      </td>
      <td>
        2009年11月2日(月)〜12月4日(金)
      </td>
    </tr>
    <tr>
      <td>
        【キャンセル締切日】
      </td>
      <td>
        2009年12月18日(金)
      </td>
    </tr>
    <tr>
      <td>
        【チケット発送日】
      </td>
      <td>
        2010年1月22日(金)
      </td>
  </tr>
</tbody>

[追記]はてなは table タグが使えるっぽいので上記ソースを table タグではさんでみた（あとはスタイルシートで整形するとかがいるのかな）。


開催日
備考

[第51回]
2010年1月23日(土)

【申込期間】
2009年11月2日(月)〜12月4日(金)

【キャンセル締切日】
2009年12月18日(金)

【チケット発送日】
2010年1月22日(金)

*1:手許の「らくらくホンＶ」で確認してみた。（ボクの勝手な想像では多分、）読み上げブラウザの実装を手がける人はW3C標準に対して意識的なはず。

*2:バッドノウハウと「奥が深い症候群」, バッドノウハウからグッドラッパーへ 「バッドノウハウ」は「（ソリューションとして）正しいけれども煩雑になる」みたいな意味なので、ボクは「IE6の腐れCSS対策」みたいなものを想像します。HTML4.01 11.4.1を作りこんでない読み上げブラウザってあるのかな？そんなヘンテコな読み上げブラウザがあるのならバッドノウハウになるんだけど。