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

目次

aXe とは？

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

インストール、実行

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

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

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

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

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

機能の説明

Run again

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

show: プルダウン

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

"show:"

警告の説明

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

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

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

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

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

"This is not an issue"

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

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

Inspect Node

Inspect Node をクリックします。 "Inspect Node"

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

Highlight

Highlight をクリックします。
"Highlight"

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

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

<、> リンク

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

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

日本語化された

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

以上です。

  1. この機能 CLI ツールにも同様の機能があるかと思います。 ↩

コメント

カテゴリー

最近の投稿