サントリーのウェブアクセシビリティ改善プロジェクト:適合レベルAA達成と進め方
第三者による適合性診断。多数の指摘事項でショックを受ける
ガイドラインの改定後、お客様センターサイトでJIS X 8341-3: 2016 の適合レベルAAを目指すことになり、第三者による適合性診断を受けた。当初、サントリーのガイドラインに基づいて作成されていれば、比較的簡単に取得できると考えていたが、想像以上に苦労したという。 ┌────────── 一度目の診断では、たくさんの指摘事項がありショックを受けました。4月に一度診断を受けて、最終的にAAを取得したのは9月です(石川氏) └────────── 指摘を受けた主な4つを紹介する。 ■ [指摘(1)] コントラストが低い ウェブアクセシビリティでは、誰でもみやすいように4.5:1 のコントラスト比を達成する必要がある。
サントリーでは、ロゴのカラーに白色と“サントリーウォーターブルー”という水色を使っている。AAでは、ロゴはコントラスト要件の対象外となっているが、さまざまなページで、この水色と白色をウェブサイト上で使っていたため、コントラスト比が下がり、要件を満たさなくなってしまった。現在は、利用しているページの文字色を変えるなど、対策を行っているところだ。
■ [指摘(2)] 代替テキストとキャプションを両方入れる必要はない 従来のサントリーガイドラインでは、必ず画像のaltに代替テキストとなる説明文を入れることを記していた。しかし、画像の下にキャプションを入れている場合、スクリーンリーダーで読み上げると、代替テキストとキャプションで、同じ内容を二度読み上げることになってしまう。 ┌────────── SEOの観点からも、画像のaltは全部入れないといけないと思いこんでいました。altとキャプションで、同じ内容が二重に読み上げられるのを聞いた時に、自分がルールのためにルールを作っていて、利用者視点で考えていなかったのだと思い知らされました(石川氏) └──────────