サントリーのウェブアクセシビリティ改善プロジェクト:適合レベルAA達成と進め方
キャプションがある場合は、altはないほうがいいというのは大きな発見であった。コードでは次のように記載する。
二重に読み上げられる書き方(NG例) <img src="/img/hakushu.jpg" width="100"height="200" alt="サントリーシングルモルトウイスキー白州"> <br>サントリーシングルモルトウイスキー<br>白州 1回で説明できる書き方(OK例) <img src="/img/hakushu.jpg" width="100"height="200" alt=""> <br>サントリーシングルモルトウイスキー<br>白州 ■ [指摘(3)] 見出しのhタグを使わずに見出しをデザイン 見出しのhタグについても、正しく設定していると思っていたが、スクリーンリーダーを使って見出しだけを読み上げると、ブラウザに表示される並び順とは異なる順で読み上げられていた。
これは、本来hタグで見出しを作成するべきところを、pタグで設定して、デザインだけ変更している場合などに起こり得る。構造から見直しが必要なページがあり、苦労したという。
■ [指摘(4)] サントリー共通ヘッダー、フッターのテキストリンク お客様センターサイトで認証を得るにあたって、もっとも苦労した点が、サントリー共通で利用しているパーツであるヘッダーとフッターであった。 ヘッダーとフッターには各ページへのリンクが設定されている。スクリーンリーダーは、リンクを表示したときに、リンクのテキストを読み上げ、リンクを開いた先のページタイトルを読み上げる。リンクテキストとページタイトルが異なると、ユーザーに対し「間違ったリンク先をクリックしたかな」と不安を与えてしまう。 サントリーでは、リンクテキストとページタイトルが一致しないケースが散見された。たとえば、ヘッダー、フッターでは「研究開発への取り組み」となっていたが、ページタイトルは「サントリーの研究開発」になっており、画像でタイトルが作成されていた。 ┌────────── リンク切れであればツールでチェックできますが、リンクテキストとページタイトルの不一致は自動でチェックできないので、審査を受けて指摘されて初めて気が付きました(石川氏) └──────────