小さく始めるWebのアクセシビリティ改善

これは何

これからWebのアクセシビリティ改善を始めたい人向けに、個人的に小さく始められておすすめの改善ポイントをまとめてみました。

はじめに：小さく始めるポイント

個人的に以下のポイントを押さえると着手しやすいかもと思います。

簡単に見つけられるポイントを改善する

例えば、axe DevToolsなど、アクセシビリティチェッカーを使って簡単に見つけられるものがおすすめです。

以下のようなポイントを自動チェックできます

• 背景色と文字色のコントラスト比が低い
• 画像に代替テキストがない画像
• リンクにテキストがない（アイコンリンクなど）
• フォームにラベルがない

また、ページを上からTabキーで移動してみて、以下のような箇所がないかを見つけるのも始めやすくておすすめです

• リンクやボタンなのにフォーカスできない
• 表示されていない要素にフォーカスしてしまう
  • 開閉メニューの閉じている時など
• フォーカスの位置がどこにあるかわからない
  • outline: noneなどでフォーカスインジゲーターを消してしまっている場合

改善の影響範囲が広すぎない

例えば、「ロゴの色を使っているボタンのコントラスト比改善」となると、関係者や出現範囲が大きくなってしまいます。

まずは特定範囲内で完結する箇所などから始めて、少しずつ規模を大きくしていくのが進めやすいと思います。

個人的におすすめの改善ポイント

アイコンに適切な読み上げがない

アイコンに適切な読み上げの指定がないと、何も読み上げられなかったり、Webフォントの場合はkeyとして指定している単語が読み上げられてしまいます。

特にアイコンのみのリンクやボタンの場合は、それを押すと何が起こるのか？がわからなくなってしまうので重要なポイントです。

読み上げに指定したい内容がテキストとして並んでいる場合は、読み上げ内容が重複してしまうので指定しなくて大丈夫です。

アイコンフォントの例

<div>
    <span class="material-symbols-outlined">
        search
    </span>
    <span class="sr-only">検索</span>
</div>

<style>
  .sr-only {
    position: absolute;
    width: 1px;
    height: 1px;
    overflow: hidden;
    clip: rect(0, 0, 0, 0);
  }
</style>

svgの例

<svg aria-label="検索" xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" role="img">
    <path d="hogehoge"></path>
</svg>

画像に適切なalt指定がない

装飾としての画像でaltの指定がない場合は、alt=""を追加するだけです

情報を持つ画像なら、altに画像から読み取れる情報や画像で伝えたい情報を追加してあげましょう

画像の例

<img alt="画像から読み取れる情報" src="icon-hogehoge.png" />

リンクやボタンがdivになってる

こういうやつです

divでできているリンク

<div onClick="location.href='https://example.com';">リンク</div>

divでリンクやボタンを実装すると、キーボードでのフォーカスや操作などの<a>や<button>には用意されている機能が使えないので、<a>や<button>に変更するだけでキーボードでの操作しやすさが向上します。

リンクの例

<a href="https://example.com">リンク</a>

ボタンの例

<button onClick="hoge()">ボタン</button>

背景色と文字色のコントラスト比が低い

場合によっては影響範囲が広いので、小さく始められないかもしれないです

axe DevToolsなどのアクセシビリティチェックツールで簡単に見つけられます。

すでにカラーパレットが用意されていて、コントラスト比を確保できる利用可能な色があればそれを使いましょう。

ボタンやリンクにフォーカスした時のインジゲーターがない

場合によっては影響範囲が広いので、小さく始められないかもしれないです

大体はaやbuttonにoutline: noneが指定されているのが原因です。
reset.cssの場合は範囲が大きくなりますが、一部に指定されているだけならすぐ対応できます。

もし影響範囲が大きすぎる場合はページやセレクタなど範囲を絞ってoutline: unsetなどでオーバーライドするのが良いと思います。

フォームにラベルが紐づいていない

フォームにラベルが紐づいていない場合、それぞれのフォームの入力内容がわかりづらくなります。
また、プレースホルダーがラベルになっていると、入力中や入力後にラベルが読めなくなってしまいます。

すでにラベルがある場合は、for属性でフォーム要素のidと関連付けることで紐づけることができます。
ラベルがない場合はラベルを追加して紐付けましょう。

例

<label for="name">名前</label>
<input type="text" id="name" name="name">