aboutsummaryrefslogtreecommitdiff
path: root/guidelines
diff options
context:
space:
mode:
authorGravatar Benjamin Jones <bjones@galois.com>2013-07-11 14:32:41 -0700
committerGravatar Benjamin Jones <bjones@galois.com>2013-07-11 14:32:41 -0700
commit7601ea165da8a865954df9dd49ecbf09f3556edd (patch)
treef4e83bb57fc7b977bb6acfb75e6f25478089b056 /guidelines
parent867f5c62c9e21790d305e7f43727c90e1d5628c2 (diff)
updated to WCAG guidelines 1 -- 3; added a rule for checkpoint 3.5
Diffstat (limited to 'guidelines')
-rw-r--r--guidelines/WCAG-1.0/guideline-1.js27
-rw-r--r--guidelines/WCAG-1.0/guideline-2.js11
-rw-r--r--guidelines/WCAG-1.0/guideline-3.js57
3 files changed, 38 insertions, 57 deletions
diff --git a/guidelines/WCAG-1.0/guideline-1.js b/guidelines/WCAG-1.0/guideline-1.js
index 61e1384..ebbd823 100644
--- a/guidelines/WCAG-1.0/guideline-1.js
+++ b/guidelines/WCAG-1.0/guideline-1.js
@@ -3,7 +3,7 @@
*/
exports.name = "Equivalent Alternatives";
-exports.description = "";
+exports.description = "Web Accessibility Guideline: Provide equivalent alternatives to auditory and visual content";
exports.rule = function(report) {
@@ -11,21 +11,21 @@ exports.rule = function(report) {
/* Checkpoint 1.1 [Priority 1] **********************************************/
var hasAlt = function(ix) {
- // TODO: strip space from the alt attribute to prevent ' ' from passing
- // the test
- if(_.isEmpty($(this).attr('alt')) && _.isEmpty($(this).attr('longdesc'))) {
+ var alt = $.trim($(this).attr('alt'));
+ var longdesc = $.trim($(this).attr('longdesc'));
+ if(_.isEmpty(alt) && _.isEmpty(longdesc)) {
report.error('No alt/longdesc specified', this);
}
};
var hasText = function(ix) {
- // TODO: strip space from the text to prevent ' ' from passing the test
- if(_.isEmpty($(this).text())) {
+ if(_.isEmpty($.trim($(this).text()))) {
report.error('No text node', this);
}
};
// images with semantic meaning should have an alt attribute.
+ // TODO add a heuristic for detecting large images
$5('a').find('img')
.add($5('dl').find('img'))
.add($5('dd').find('img'))
@@ -40,8 +40,6 @@ exports.rule = function(report) {
// All `object` tags must have a text node
$5('object').each(hasText).each(hasAlt);
- // TODO: what's the best way to classify content that's `complex`?
-
// 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.
@@ -62,23 +60,12 @@ exports.rule = function(report) {
// 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'))) {
+ if(_.isEmpty($.trim($(this).attr('usemap')))) {
report.error('No usemap attribute to supplement a use of ismap', this);
}
});
- /* Checkpoint 1.3 [Priority 1] **********************************************/
-
- // 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: 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
diff --git a/guidelines/WCAG-1.0/guideline-2.js b/guidelines/WCAG-1.0/guideline-2.js
index 7dcf28d..206dd3e 100644
--- a/guidelines/WCAG-1.0/guideline-2.js
+++ b/guidelines/WCAG-1.0/guideline-2.js
@@ -1,13 +1,7 @@
-exports.name = "colorDifference";
-exports.description = "Elements should provide sufficient color difference";
+exports.name = "Color Difference";
+exports.description = "Web Accessibility Guideline: Don't rely on color alone";
exports.rule = function(report) {
- /* Checkpoint 2.1 ***********************************************************/
-
- // TODO: not sure about the best way to test that information isn't hidden
- // when colors go away.
-
-
/* Checkpoint 2.2 ***********************************************************/
var fc = fiveui.color;
@@ -30,7 +24,6 @@ exports.rule = function(report) {
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) {
diff --git a/guidelines/WCAG-1.0/guideline-3.js b/guidelines/WCAG-1.0/guideline-3.js
index 1be4354..0f6055b 100644
--- a/guidelines/WCAG-1.0/guideline-3.js
+++ b/guidelines/WCAG-1.0/guideline-3.js
@@ -1,20 +1,11 @@
-exports.name = 'W3C Guideline 3';
-exports.description = '';
+exports.name = 'Proper Markup and Stylesheets';
+exports.description = 'Web Accessibility Guideline: Use markup and style sheets and do so properly';
exports.rule = function(report) {
- /* Checkpoint 3.1 [Priority 2] **********************************************/
-
- // TODO: this seems pretty subjective, as you have to be able to understand
- // the intent of the content. The math example is tough, as you'd have to be
- // able to pick out a situation where text wasn't marked up, but was also
- // mathematical notation.
-
-
/* Checkpoint 3.2 [Priority 2] **********************************************/
// require that the document contains a dtd.
- // TODO: how should we apply this check to iframes and such?
if(!document.doctype) {
report.error('No doctype given for the document', null);
}
@@ -36,22 +27,36 @@ exports.rule = function(report) {
report.error('Use css instead of the font attribute for formatting', this);
});
- // TODO: there are other cases to handle here, not sure about the best path
- // forward.
-
-
- /* Checkpoint 3.4 [Priority 2] **********************************************/
-
- // TODO: not sure what the best way to select everything that's not
- // automatically positioned. Additionally, many fancy user interfaces will
- // use pixels when positioning content, which isn't necessarily wrong.
-
/* Checkpoint 3.5 [Priority 2] **********************************************/
- // TODO: what's the best way to select siblings that match a given pattern in
- // jquery? Essentially, we just want to match situations where h1 is followed
- // by something that's both a header, and not h2 (for example).
+ // header transitions which are not allowed
+ var avoids = [ ["H1", "H3"]
+ , ["H1", "H4"]
+ , ["H1", "H5"]
+ , ["H2", "H4"]
+ , ["H2", "H5"]
+ , ["H3", "H5"] ];
+
+ // return true if the value `p` is in `avoids`. underscore's
+ // _.contains doesn't work here because it compares array references
+ var badPair = function (p) {
+ return _.find(avoids, function (s) {
+ return s[0] == p[0] && s[1] == p[1];
+ });
+ };
+
+ // examine the sequence of headings in each <div> for
+ // proper order
+ $('div').each(function (i, elt) {
+ var hs = $(elt).find(':header');
+ var ts = $(hs).map(function () { return this.tagName; });
+ for (var j=0; j < hs.length-1; j++) {
+ if (badPair([ts[j], ts[j+1]])) {
+ report.error('Invalid use of headers ' + ts[j] + ' -> ' + ts[j+1], hs[j+1]);
+ }
+ }
+ });
/* Checkpoint 3.6 [Priority 2] **********************************************/
@@ -59,8 +64,4 @@ exports.rule = function(report) {
/* Checkpoint 3.7 [Priority 2] **********************************************/
- // TODO: is there any way that we can detect quotations that aren't inside of
- // a blockquote region?
-
-
};