From c53e0808b0b9310e217ecd7135b3c3da3f6d93da Mon Sep 17 00:00:00 2001
From: Trevor Elliott <trevor@galois.com>
Date: Tue, 25 Jun 2013 12:44:34 -0700
Subject: Add in the color difference guidelines

---
 guidelines/accessibility/conformance-A.json |  1 +
 guidelines/accessibility/guideline-1.js     | 38 +++++++++++++++++++++++------
 guidelines/accessibility/guideline-2.js     | 34 ++++++++++++++++++++++++++
 3 files changed, 66 insertions(+), 7 deletions(-)
 create mode 100644 guidelines/accessibility/guideline-2.js

(limited to 'guidelines')

diff --git a/guidelines/accessibility/conformance-A.json b/guidelines/accessibility/conformance-A.json
index 5aa5bf3..f5bc5f6 100644
--- a/guidelines/accessibility/conformance-A.json
+++ b/guidelines/accessibility/conformance-A.json
@@ -3,5 +3,6 @@
 , "license":     "BSD3"
 , "rules":
   [ "guideline-1.js"
+  , "guideline-2.js"
   ]
 }
diff --git a/guidelines/accessibility/guideline-1.js b/guidelines/accessibility/guideline-1.js
index fdb2c42..61e1384 100644
--- a/guidelines/accessibility/guideline-1.js
+++ b/guidelines/accessibility/guideline-1.js
@@ -42,10 +42,12 @@ exports.rule        = function(report) {
 
   // TODO: what's the best way to classify content that's `complex`?
 
-  // All `area` elements of an image map should have alt attributes.  This isn't
-  // quite a faithful implementation, as it doesn't take into account the case
-  // where an `a` tag is wrapped around the `area` tag.
-  $5('map').find('area').each(hasAlt);
+  // All `area` elements of an image map should have alt attributes. It's also a
+  // bit overzealous, as it looks at all maps, not just maps that are referenced
+  // from images.
+  $5('map').find('area')
+    .add($5('map').find('a'))
+      .each(hasAlt);
 
   // TODO: figure out a good way to handle frames.
   // TODO: figure out a good way to handle scripts.
@@ -53,19 +55,41 @@ exports.rule        = function(report) {
 
   /* Checkpoint 1.2 [Priority 1] **********************************************/
 
-  // TODO
+  // `ismap` is a boolean attribute.  If it's present on an image, require that
+  // there's also a corresponding `usemap` attribute that can be used in lieu of
+  // having the server information present.  This is a bit of an under
+  // approximation, as if you can provide a client-side map that doesn't cover
+  // everything that the server does.  It's more of a sanity check, that this
+  // has been thought of.
+  $5('img').filter('[ismap]').each(function(ix) {
+    if(_.isEmpty($(this).attr('usemap'))) {
+      report.error('No usemap attribute to supplement a use of ismap', this);
+    }
+  });
 
 
   /* Checkpoint 1.3 [Priority 1] **********************************************/
 
-  // TODO
+  // TODO: Not really sure if this is something that we can check; the guideline
+  // seems to be more of a subjective check.
 
 
   /* Checkpoint 1.4 [Priority 1] **********************************************/
 
-  // TODO
+  // TODO: Again, not sure if this is something we can check here.
 
 
   /* Checkpoint 1.5 [Priority 3] **********************************************/
 
+  // Make sure that every link in an image map has a corresponding text link
+  // somewhere else in the document.
+  var hrefs = $5('a').map(function() { return $(this).attr('href'); });
+  $5('map').find('area').each(function() {
+    var href = $(this).attr('href');
+    if(!_.contains(href, hrefs)) {
+      report.error('Image map contains a link not present in a text link',
+          this);
+    }
+  });
+
 };
diff --git a/guidelines/accessibility/guideline-2.js b/guidelines/accessibility/guideline-2.js
new file mode 100644
index 0000000..f3dc1e5
--- /dev/null
+++ b/guidelines/accessibility/guideline-2.js
@@ -0,0 +1,34 @@
+exports.name        = "colorDifference";
+exports.description = "Elements should provide sufficient color difference";
+exports.rule        = function(report) {
+  var fc = fiveui.color;
+  var MIN_COLOR_DIFF = 500; // http://www.w3.org/TR/2000/WD-AERT-20000426#color
+
+  /**
+   * Return the absolute "color difference" between two * given RGB color
+   * objects.
+   * Input is two RGB color objects.
+   */
+  var colorDiff = function (c1, c2) {
+    return Math.abs(c1.r - c2.r) +
+           Math.abs(c1.g - c2.g) +
+           Math.abs(c1.b - c2.b);
+  };
+
+  fiveui.query('*')
+    .filter(function () {  // filter for lowest level elts having non-empty text
+      var $this = $(this);
+      return $this.children().length == 0 && $.trim($this.text()).length > 0;
+    })
+    .each(function (i) {
+      // TODO take into account fg alpha values
+      var fg = fc.colorToRGB($(this).css('color'));
+      var bg = fc.findBGColor($(this));
+      if (fg && bg) {
+        var diff = colorDiff(fg, bg);
+        if (diff < MIN_COLOR_DIFF) {
+          report.error('Element has poor color difference: ' + diff, this);
+        }
+      }
+  });
+};
-- 
cgit v1.2.3