Simple QUAIL Tests

See https://github.com/kevee/quail/tree/master/examples/simple

by Mike Gifford

HTML

<link rel="stylesheet" href="https://raw.github.com/kevee/quail/master/examples/common/style.css">
<script src="https://raw.github.com/kevee/quail/master/src/quail.min.js"></script>
<div id="test">
  <p>This is an image of my dog, Kogepan:</p>
  <img src="https://raw.github.com/kevee/quail/master/examples/common/kogepan.png" />
</div>

JavaScript

$(document).ready(function () {

  /** Just to make this sample work without a server,
we are hard-coding the list of tests instead of
loading it using JSONP.
**/
  var accessibilityTests = {
    "imgHasAlt": {
      "type": "selector",
        "selector": "img:not(img[alt])",
        "severity": "severe"
    }
  };

  $('#test').quail({
    guideline: ['imgHasAlt'],
    jsonPath: '../../src/resources',
    accessibilityTests: accessibilityTests,
    testFailed: function (event) {
      event.element.addClass('quail-result')
        .addClass(event.severity)
        .before('<span class="quail-message">Please make sure to add meaningful alt tags.</span>');

    }
  });
})