こんにちは！kanappleです。
今回はアクセシビリティチェックツールのaxe DevToolsを紹介します。
無料で（一部有料）ブラウザから簡単にアクセシビリティ対応状況をチェックできるので、是非活用しましょう。
axe DevToolsのインストール
chromeウェブストアから、Chrome拡張のaxe DevToolsをインストールします。
axe DevTools
拡張機能を追加したら、アクセシビリティの分析をしたいページを開きます。
右クリック→[検証]をクリックし、デベロッパーツールを開き、上部にある[axe DevTools]をクリックします。
ポップアップが出てくるので、無料版を使用する方は×をクリックします。
次のポップアップに自分の役割（仕事）を選択し、プライバシーポリシーに同意したあと「Start using axe DevTools」をクリックします。
初期設定
より多くの項目をチェックする為に、以下の初期設定を行いましょう。
右上にある…をクリックし、[setting]をクリックします。
Best Practiceを[Enable]にチェックを入れ、保存します。
必要であれば、Languageを[日本語]に設定しましょう。
ページのアクセシビリティを分析する
分析したいwebページで[Full Page Scan]をクリックします。
ページのスキャンが始まり、ページの問題点が表示されます。
各項目をクリックすることで、問題がある箇所や、どのような問題があるかを確認することができます。
問題が無くなるまで修正していきましょう。
このようにコントラスト比の問題が出た場合は、下の[more information]リンクをクリックすると、コントラスト比を確認できるページに飛びます。
Color Contrast Analyzer
こちらに、文字色、背景色を入力するとガイドラインに達成しているかを確認することができます。
コントラスト比に問題がある場合は、ツールで問題ないかを確認し色の変更をしましょう。
注意点
モーダルや、開閉するアコーディオンメニューでは、開いた状態や閉じた状態にしてaxe DevToolsで分析する必要があります。
axe DevToolsですべの問題を発見することはできませんが、調査の必要そうな場所を発見する為に有効です。
まとめ
・axe DevToolsはChromeの拡張機能
・分析したいページで瞬時に問題点を見つけることができる
・モーダルやアコーディオンなど、隠れている部分は表示して分析する
axe DevToolsはとても簡単に導入できるアクセシビリティチェックツールです。
HTMLのバリテータチェックをした後は、ブラウザでaxe DevToolsを使って確認しましょう！
関連するタグ
全 1 件中 1 〜 1 件目を表示
この記事を書いた人
kanapple
HTML&CSSコーダー
フリーランスでウェブサイト制作をしています。
趣味はお酒と映画鑑賞です。
