[不定期連載] 山本和泉の「izuizuのアクセシビリティ100本ノック」
1本目コーチ指導：リンク先の工夫も課題

こんにちは。izuizuこと山本和泉です。

「アクセシビリティ100本ノック：1本目」　について、とうとうコーチたちの指導がきました！ぜひ、「アクセシビリティ100本ノック：1本目」　を見ながら確認と、それぞれ自分の出した答えと比較してみてください。

中根のコメント

まず、今回のお題、東京都のページのオリジナル版にアクセスして僕が気になった点を示します。

• 「写真：都電バラ号」というaltがついた画像がリンクになっていても、リンク先にどんな情報があるのか検討が付かない
• 「写真：都電バラ号」の画像と、その後の「今週のおすすめ情報 」のリンク先が同じページになっている

そしてソースコードを見てみると、izuizuの指摘の通り、div要素とa要素だけで構成されている点が気になりました。

izuizuの改善案

izuizuの改善案の中で、まず「都電バラ号」に関するページへのa要素の中身、つまりリンク・テキストが「6月2日（日）まで「都電バラ号」を運行します！」になっている点は、上で述べた最初の問題を解決しているので良いと思います。

ちなみに、本稿執筆時点での同ページのこの部分のリンクは、「写真：ポスター」というaltが付いた画像になっていて、いよいよ何のことだか分かりません。

機械的にチェックした場合、このようなリンクも特に問題はないことになってしまうと思いますが、JIS X 8341-3:2010の達成基準「7.2.4.4 文脈におけるリンクの目的」を満たしていないことは明白です。

次に見出しについてですが、僕も「今週のおすすめ情報」では内容がよく分からないと感じます。致命的な問題ではないとは思いますが、izuizuの改善案の方がユーザーにとっては分かりやすいのではないでしょうか。

マークアップについてですが、dl, dt, dd要素を使うというのは、あまり適切ではないように感じます。というのは、dd要素に入っている画像は、決して「6月2日（日）まで「都電バラ号」を運行します！」というテキストの意味などを定義しているわけではないからです。

それよりは、単純に ul, li要素を使った方が良いでしょう。

ただ、そもそも1項目しかなく、リストになっていないこと、またどうやらこのセクションには基本的に1項目しか表示されないらしいことを考えると、単純にp要素でマークアップするのでもかまわないと思います。

また、izuizuの改善案では、

つづきはメルマガで……。