【jQuery】アクセシビリティのテストが簡単にできるjQueryプラグインQUAIL

JavaScript

2013.08.06

この夏やたらと打ち上げ花火を見ているminamiです。
サイトのアクセシビリティチェックを行えるjQueryプラグインをご紹介します。

QUAIL

QUAILはjQueryプラグインとして動作するアクセシビリティチェッカーです。例えば画像のaltがない、といった項目をブラウザ上でチェックすることができます。組み込みで250以上のテストを実行することができ、カスタムのテスト項目も容易に作成することができます。

使い方

こちらからダウンロードします。

https://github.com/kevee/quail/tags

<script src="js/libs/jquery/jquery.js"></script>
<script src="js/src/quail.js"></script>

jQueryとquail.js を読み込みます。srcフォルダのresourcesフォルダも設置してください。

$('#test').quail({
  jsonPath : '/src/resources', // jsonファイル（resourcesフォルダ）へのパス
  guideline : ['imgHasAlt','checkboxHasLabel'], // テストのガイドライン
  testFailed : function(event) { // テストが通らなかった場合の処理
    event.element.addClass('quail-result') // classを追加
         .addClass(event.severity) // 重要度のclassを追加
         .before('×'); // before要素で「×」を追加

  }});
});

上記のように実行します。サンプルコードでは、「画像にaltが入っているか」「チェックボックスにラベルが関連づけられているか」をチェックしています。デフォルトのテスト項目はresources内のtest.jsonから呼び出していますが、オプションのguideline の値に配列で指定することができます。

はじめから用意されているテストは以下で確認することができます。

Accessibility tests

また、カスタムのテストも以下のように記述して、オプションのaccessibilityTests にオブジェクトの形式で指定することもできます。

var accessibilityTests = {
  "imgHasAlt": {
      "type": "selector",
      "selector": "img:not(img[alt])",
      "severity": "severe"
  },
  "checkboxHasLabel": {
      "type": "label",
      "selector": "input[type=checkbox]",
      "testability": 1,
      "tags" : [ "form", "content" ]
  },
};