ウェブサイト制作では案件によってアクセシビリティ対応が重要項目とされるケースもあります。そのような場合に「アクセシビリティインサイト」と呼ばれるツールを使って、どれだけ基準値に沿ってクリアできているかをチェックすることができます。ちょうど先日のクライアントワークで使用することがあり、対策も合わせて備忘録として残しておきたいと思います。   アクセシビリティインサイトは下記の公式ページより、ツールを導入することができます。Google Chromeの場合にはブラウザの拡張機能として用意されているので、それを使うのがお手軽ですね。 【Accessibility Insights】 https://accessibilityinsights.io/   このツールを使ってチェックを行い、ウェブサイト内でアクセシビリティの基準に満たせていない項目については一覧で確認することができます。指摘箇所に対応する対処法については、こちらの対応策事例のページから具体的にどのように改善すれば良いかを調べることができます。 【Info and Examples for Accessibility Insights for Web】 https://accessibilityinsights.io/info-examples/web/   今回は実際にサイト制作をする中で対処したアクセシビリティ対応の事例をいくつかピックアップしてまとめてみたいと思います。アクセシビリティの対応をすることで、先日の記事（Lighthouseのスコア改善に向けた対策例まとめ）で紹介したLighthouseのスコア改善も期待できますので、チェックしておきたいですね。  

document-title
（ページの目的や役割を示すタイトルとして定義する）

対策：空でないtitle要素を作成する

// NG
<title></title>

// OK
<title>サンプル株式会社コーポレートサイト</title>

   

scrollable-region-focusable
（スクロール可能な要素にはキーボード操作でフォーカスできるようにする）

対策：スクロールできる要素に対してtabindex属性を付与

// NG
<div style="overflow: auto;">

// OK
<div style="overflow: auto;" tabindex="0">

   

duplicate-id
（id属性の値が重複している）

対策：id属性の値を一意のものにする

// NG
<h2 id="anchor">
<h2 id="anchor">

// OK
<h2 id="anchor_first">
<h2 id="anchor_second">

   

listitem
（li要素はul、ol要素またはmenu要素に内包されている必要があります）

対策：ul、ol、menu要素の子要素となるようにする

// NG
<li>リスト項目</li>
<li>リスト項目</li>

// OK
<ul>
<li>リスト項目</li>
<li>リスト項目</li>
</ul>

   

image-alt
（画像要素には代替テキストが必要）

対策：alt、title、aria-label、aria-labelledby属性などで画像が示す意味を明示する、また、代替テキストが空の場合には、 role="presentation"やrole="none"を追加し、文脈上意味をなさないもの（装飾的な要素など）であることを明示する。

// NG
<img src="./photo.jpg">

// OK
<img src="./photo.jpg" alt="" aria-label="海の風景写真" role="presentation">

   

link-name
（画像やベクターアイコンに対してリンクを設定しているなどでリンク内にテキストコンテンツがない場合にはアクセシブルな名前を定義する必要がある）

対策：リンクテキストを用意してvisibilityプロパティ等で非表示にする（display: none;やaria-hidden="true"は指定しない）もしくは、aria-label、aria-labelledby属性などで名前を定義する

// NG
<a href="https://example.com/contact/">
  <svg xmlns="http://www.w3.org/2000/svg" width="40" height="40">
    <path d="****************"">
  </svg>
</a>

// OK
<a href="https://example.com/contact/">
  <svg xmlns="http://www.w3.org/2000/svg" width="40" height="40" aria-label="お問い合わせ">
    <path d="****************"">
  </svg>
</a>

   

color-contrast
（背景色と文字色のコントラスト比を十分に確保する必要がある）

対策：18pt相当以上、あるいは14p相当の太字には3:1以上のコントラスト比を与える、それ以下の文字サイズの場合には4.5:1以上のコントラスト比を与える

// NG
body {
  background: #fff;
}
h1 {
  color: #fcc;
  font-size: 24px;
}

// OK
body {
  background: #fff;
}
h1 {
  color: #f33;
  font-size: 24px;
}

 

---

  今回ピックアップしたのはごく一部ですが、他にもいろんなチェック項目がありますので、対応策事例のページで確認しながら改修を進めていきます。見た目だけでなく使い勝手も良いウェブサイトを目指したいですね。