自社サイトのアクセシビリティ改善（視覚的表現、キーボード操作、音声読み上げ）

今回は、ようやく始めた自社サイトでのアクセシビリティ改善をご紹介します。
自社サイト制作当時（10年くらい前）アクセシビリティのアの字も知らずに作っていたため、改善すべき点は山程ありますが…目立つ点から改善していこうと思います。

視覚的表現の改善

まずはパッと見で視覚的に気になるところで、かつ影響範囲が大きいものを改善しました。

リンクのコントラスト比

テキストリンクやボタンリンクのコントラスト比が低く読みにくい状態だったため、色を濃くしました。

新しいリンク色は、背景に白（#FFFFFF）がきたときにWCAG「達成基準 1.4.3 コントラスト(最低限) (レベルAA)」の基準コントラスト比4.5:1をクリアするレベルに調整してあります。

なお今回はリンク色の背景に薄いグレー色を置く箇所があるので、4.5:1ギリギリではなく若干余裕を持たせたコントラスト比にしています。

リンクの視覚的な手がかり

リンクテキストと通常テキスト（リンクではないテキスト）の見た目の差異が色しかなく、色を識別できないとリンクかどうか判別が困難な状態でした。WCAG「1.4.1 色の使用 (レベル A)」で言うと、「達成基準 1.4.1 の失敗例 － 色覚なしで視覚的にはっきりと分からないリンクを作成する」に該当します。そのため、リンクテキストにはデフォルトでアンダーラインを付けるようにしました。

ちなみに、マウスホバー時の挙動については、修正前は「マウスホバーでアンダーラインを付ける」ようにしていましたが、「マウスホバーでアンダーラインを外す」ように変更しています。

キーボード操作の改善

次に、キーボードのみの操作でサイトを閲覧確認して、致命的な部分を2点改善しました。

フォーカスインジケータの表示

キーボード操作時にリンクやボタンなどを囲むフォーカスインジケータが見えず、どこを操作しているのかわからない状態でした。リセットCSSで「outline: none;」をかけてフォーカスインジケータを消してる典型的な状況だったため、CSSを修正してフォーカスインジケータが見えるようにしました。もしリセットCSSを使う場合は中身を理解して使いましょう（自分への戒め）。

これはWCAGで言うところの「達成基準 2.4.7 フォーカスの可視化 (レベル AA)」です。受託案件では「基本的なこと」対応してきましたが、なんと自社サイトでできていませんでした。

なお、コーディングの仕方の影響で一部フォーカスインジケータの表示が欠ける箇所があったり、プラグインのデフォルト仕様でフォーカスインジケータが消されている箇所もまだあるため、次期サイト改修での対応としたいと思います。

ハンバーガーメニューボタンを使用可能に

狭い幅の画面で表示しているハンバーガーメニュー（横３本線のメニュー）がキーボード操作ではフォーカスが当たらず、メニューに全くアクセスできない状態になっていました。

非インタラクティブ要素であるdiv要素で実装されていたという典型的な失敗例です。div要素のままキーボードでもインタラクティブにする修正も可能ですが、HTMLにはbutton要素という適切な要素が用意されているので素直にbutton要素を使って修正しました。

WCAGで言うところの「達成基準 2.1.1 キーボード (レベル A)」「G202: 全ての機能に対してキーボード制御を確保する」の話で、これも受託案件では「基本的なこと」として対応してきていますが、自社サイトが対応できていませんでした。

ちなみに、今のかたちはハンバーガーメニューまでわざわざ戻らないとメニューを閉じることができないため、実装にもうひと工夫加えるか、別のかたちでメニューを実装するかといった検討課題が残っています。

音声読み上げの改善

音声での読み上げ時に気になる点も、影響範囲が大きいものを改善しました。

ハンバーガーメニューボタンの読み上げ

改修前の状態ですとハンバーガーメニューボタン内に読み上げ可能なテキストが無く、何のボタンなのかわからない状態でした。そのため、button要素内に見えないテキスト（通称「Visually hidden」）で「メニュー」と入れることで対応しました。

WCAGで言うところの「達成基準 1.1.1 非テキストコンテンツ (レベル A)」や「達成基準 4.1.2 名前 (name)・役割 (role)・値 (value) (レベル A)」に関係する認識です。

なお、このような場合button要素にaria-label属性で手軽に「メニュー」というテキストを付与することもできますが、aria-label属性よりも通常のテキストのほうがメリットがあると考えられるためVisually Hiddenの方法をとっています。

ハンバーガーメニュー展開状態の読み上げ

ハンバーガーメニューボタンにはアクセスできるようになりましたが、メニューが今開いているのか閉じているのか、音声ではわからない状態になっていました。そのため、aria-expanded属性を付けて、読み上げ時にメニュー展開状態を知らせるように修正しました。

加えて、aria-controls属性を付けてメニューボタンが制御している展開要素との関連付けをしています。

別タブ展開時のリンクの説明

強制的に別タブで開くテキストリンクには視覚的に別窓アイコンをつけていますが、音声読み上げでは伝わらないため、見えないテキスト（通称「Visually hidden」）で「（別タブで開きます）」を追記しました。

<a href="https://..." target="_blank">リンクテキスト<span class="visually-hidden">（別タブで開きます）</span></a>

この修正はWCAG達成方法集の「G201: 新しいウィンドウを開くときに、利用者へ事前に知らせる」を参考にしています。

今回は後付け施策かつ別窓アイコン画像がCSSで実装されているということもあり、target=”_blank”のあるa要素（画像リンク含む）内末尾にJavaScript（jQuery）を使って一括で「（別タブで開きます）」を自動挿入しています。

ちなみにこのような場合「別タブ」ではなく「別ウィンドウ」と記述しているケースが多いかと思いますが、現在の一般的なブラウザデフォルト仕様に即して、今回は「別タブ」と記載するようにしました。

終わりに

紺屋の白袴状態の自社サイトですが、今後もアクセシビリティ改善に取り組んでまいります。

著者：jiro（デザイナー/ディレクター）