diff options
Diffstat (limited to 'exampleData')
| -rw-r--r-- | exampleData/ruleSets/README | 18 | ||||
| -rw-r--r-- | exampleData/ruleSets/accessibility/colorBrightness.js | 28 | ||||
| -rw-r--r-- | exampleData/ruleSets/accessibility/colorDifference.js | 21 | ||||
| -rw-r--r-- | exampleData/ruleSets/accessibility/test.html | 3 | ||||
| -rw-r--r-- | exampleData/ruleSets/alwaysErrThreeTimes.json | 27 | ||||
| -rw-r--r-- | exampleData/ruleSets/basic/emptyHrefs.js | 4 | ||||
| -rw-r--r-- | exampleData/ruleSets/basicUIRules.json | 58 |
7 files changed, 46 insertions, 113 deletions
diff --git a/exampleData/ruleSets/README b/exampleData/ruleSets/README index 10a3269..6bcd526 100644 --- a/exampleData/ruleSets/README +++ b/exampleData/ruleSets/README @@ -2,14 +2,14 @@ This directory contains various FiveUI rule sets aimed at general websites. -## Files +## Folders + +accessibility/ + + Web Accessibility guidelines based on ... + +basic/ + + Basic UI Usability Guidelines -colorRules.json : rules for checking color -fontRules.json : rules checking font family/weight/size -imageRules.json : rules checking image sizes and borders -miscRules.json : rules checking misc constraints -textRules.json : rules checking text style -buildCombinedRules.sh : shell script which merges all the .json files in - the current directory into the file combinedRules.json -combinedRules.json : collection of all the above rules in the directory into one file diff --git a/exampleData/ruleSets/accessibility/colorBrightness.js b/exampleData/ruleSets/accessibility/colorBrightness.js index 737e0d6..96ed1af 100644 --- a/exampleData/ruleSets/accessibility/colorBrightness.js +++ b/exampleData/ruleSets/accessibility/colorBrightness.js @@ -26,14 +26,24 @@ exports.rule = function() { }; var that = this; - fiveui.query('*').each(function (i) { - var fg = fiveui.color.colorToRGB($(this).attr('color')); - var bg = fiveui.color.colorToRGB($(this).attr('background')); - if (fg && bg) { - var diff = brightDiff(fg, bg); - if (diff < MIN_DIFF) { - that.report('Element has poor brightness difference: ' + diff, e); + + 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) { + var fg = fiveui.color.colorToRGB($(this).css('color')); + var bg = fiveui.color.colorToRGB($(this).css('background-color')); + if (fg && bg) { + var diff = brightDiff(fg, bg); + if (diff < MIN_DIFF) { + that.report('Element has poor brightness difference: ' + + 'fg = ' + JSON.stringify(fg) + + ', fgb = ' + bright(fg) + + ', bg = ' + JSON.stringify(bg) + + ', bgb = ' + bright(bg), this); + } } - } - }); + }); }; diff --git a/exampleData/ruleSets/accessibility/colorDifference.js b/exampleData/ruleSets/accessibility/colorDifference.js index c7a581d..de039ea 100644 --- a/exampleData/ruleSets/accessibility/colorDifference.js +++ b/exampleData/ruleSets/accessibility/colorDifference.js @@ -18,14 +18,19 @@ exports.rule = function() { }; var that = this; - fiveui.query('*').each(function (i) { - var fg = fiveui.color.colorToRGB($(this).attr('color')); - var bg = fiveui.color.colorToRGB($(this).attr('background')); - if (fg && bg) { - var diff = colorDiff(fg, bg); - if (diff < MIN_DIFF) { - that.report('Element has poor color difference: ' + diff, e); + 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) { + var fg = fiveui.color.colorToRGB($(this).css('color')); + var bg = fiveui.color.colorToRGB($(this).css('background-color')); + if (fg && bg) { + var diff = colorDiff(fg, bg); + if (diff < MIN_COLOR_DIFF) { + that.report('Element has poor color difference: ' + diff, this); + } } - } }); }; diff --git a/exampleData/ruleSets/accessibility/test.html b/exampleData/ruleSets/accessibility/test.html index 66a417d..80ee84a 100644 --- a/exampleData/ruleSets/accessibility/test.html +++ b/exampleData/ruleSets/accessibility/test.html @@ -6,6 +6,9 @@ <p>blah blah</p> <h1>A star</h1> <img src="star.jpeg" alt="foo"> + <div style="background-color: #222222;"> + <p>Can you read this?</p> + </div> </body> </html> diff --git a/exampleData/ruleSets/alwaysErrThreeTimes.json b/exampleData/ruleSets/alwaysErrThreeTimes.json deleted file mode 100644 index 9c2b358..0000000 --- a/exampleData/ruleSets/alwaysErrThreeTimes.json +++ /dev/null @@ -1,27 +0,0 @@ -{ 'name': 'always errors' -, 'description': 'A trivial rule set for experimentation.' -, 'rules': [ -//--------------------------- - { 'id': 112201 - , 'name': 'Reports three times' - , 'description': 'Test guideline that reports three errors' - , 'rule': - function() { - report('Problem 1 (g1)', null); - report('Problem 3 (g1)', null); - report('Problem 2 (g1)', null); - } - }, -//--------------------------- - { 'id': 1122202 - , 'name': 'Reports two times' - , 'description': 'Test guideline that reports two errors.' - , 'rule': - function() { - report('Problem 1 (g2)', null); - report('Problem 2 (g2)', null); - } - }//, -//--------------------------- - ] -} diff --git a/exampleData/ruleSets/basic/emptyHrefs.js b/exampleData/ruleSets/basic/emptyHrefs.js index a333842..2be60f2 100644 --- a/exampleData/ruleSets/basic/emptyHrefs.js +++ b/exampleData/ruleSets/basic/emptyHrefs.js @@ -1,5 +1,5 @@ -exports.name': "Don't use empty hrefs." -exports.description': "Links with no text can't generally be used." +exports.name = "Don't use empty hrefs"; +exports.description = "Links with no text can't generally be used"; exports.rule = function() { var that = this; diff --git a/exampleData/ruleSets/basicUIRules.json b/exampleData/ruleSets/basicUIRules.json deleted file mode 100644 index eeccb9b..0000000 --- a/exampleData/ruleSets/basicUIRules.json +++ /dev/null @@ -1,58 +0,0 @@ -{ 'name': 'Basic HTML guidelines.' -, 'description': 'A selection of simple HTML guidelines for improved usability and consistency.' -, 'rules': [ - //--- - { 'id': 1001801 - , 'name': 'All input fields have exactly one label.' - , 'description': '<p>Screen readers rely on HTML attributes to identify the purpose ' - + "of form widgets on-screen. These tools use label tags with 'for' " - + 'attributes that specify the id of the form element they pertain to. ' - + 'Some of the components of this web page do not have those labels.</p>' - , 'rule': - function() { - fiveui.query(':input').each( - function(i, elt) { - if (elt.id) { - var $label = fiveui.query("label[for='" + elt.id + "']"); - - if (1 < $label.size()) { - report('Form element has too many labels', elt); - } - - if (0 == $label.size()) { - report('Form element has no label', elt); - } - } - }); - } - }, - //--- - { 'id': 1001802 - , 'name': "Don't use empty headings." - , 'description': 'Empty headings confuse layout.' - , 'rule': - function() { - fiveui.query(':header').each( - function(i, elt) { - if ($(elt).text() == '') { - report('Heading is empty', elt); - } - }); - } - }, - //--- - { 'id': 1001803 - , 'name': "Don't use empty hrefs." - , 'description': "Links with no text can't generally be used." - , 'rule': - function() { - fiveui.query('a').each( - function(i, elt) { - if ($(elt).text() == '' && elt.title == '') { - report('Link has no text', elt); - } - }); - } - }//, - ] -} |