aXe Chrome plugin を使ってみる

User guide | sonar documentation を使っていて aXe という アクセスビリティチェックツールがあることを知りました。
単独機能を持つ、Chrome plugin があるので、インストールして使ってみます。

目次

[TOC]

aXe とは？

Deque Systems | Web Accessibility | Software, Services, and Training という企業が開発しているWeb アクセシビリティの Lint ツールです。
無料で使える aXe-core と、有料 (ベータ版) の axe-pro があるようです。

インストール、実行

1. aXe - Chrome ウェブストア をインストールします。

2. Chrome の 開発者ツールを起動します。

3. 開発者ツールのメニューの右側に aXe タブが追加されるのでタブをクリックします。

4. aXe の Menu が開きます。ANALYZE ボタンを押すとチェックが走ります。
   

5. 以下のようにチェック結果が表示されます。
   

機能の説明

Run again

Run again をクリックすると、チェックを再実行します。

show: プルダウン

警告の種類として all、violations、review、reject を切り替えることができます。

警告の説明

それぞれの種類の内容を説明します。
* all に表示される警告 violations、review、reject 全ての警告を表示。

• violations に表示される警告 reject できない。明らかに違反する警告を表示。
  初期状態では、review していない警告も含まれます。

• review に表示される警告
  reject してもいい、状況によっては許される警告

• reject に表示される警告
  review の状態から、review 済みで問題ないと手動で判定した警告

review からステータスを変更する

This is not an issue を選択し、save するとステータスが reject へ移動します。
This is an issue を選択し、save するとステータスが violations へ移動します。
移動した警告は、別のサイトへ移動後に戻ってきて、Run again をクリックしても保持されます。
要は、状況が save されます。¹

review から状況を変更した警告に対して「やっぱりやめる」オペレーションを行う場合は、Edit をクリックすると、状態を変更することができます。

Inspect Node

Inspect Node をクリックします。

すると、elements タブの問題のある要素にフォーカスします。
問題のある箇所をコードベースで確認するために、使います。

Highlight

Highlight をクリックします。

クリックすると、チェック対象画面の警告対象箇所が、枠で括られます。

Highlight は、 Stop highlight に切り替わります。

<、> リンク

右上にある、警告の<、> リンク 、 < をクリックすると1つ前の警告に戻り、> をクリックすると一つ先の警告に進みます。

警告の ignore は CLI でしかできないかなと思っていたのですが、予想以上に多機能でした。
メニュー等日本語化されているとより、オススメできるかとは思いますが、よくある警告の対処法をまとめておけば、現状で十分有用なツールだと思います。

日本語化された

ミツエーリンクス の方が、aXe Chrome plugin の日本語化をしてくれて、大分使いやすくなりました。この記事に掲載している画像イメージの部分も言語設定を日本語にすると全て日本語で表示されます。

• axeのブラウザー拡張機能を日本語で利用できるようになりました | アクセシビリティBlog | ミツエーリンクス

以上です。