feat(image-alt): require alt text or empty strings

The image-alt rule now checks for space characters, and fails if they are present. Empty alt attributes are still fine, and text content is still fine. This fixes cases where ATs do not skip decorative images because of the space characters in the alt attribute.

Closes #1174

lib/checks/label/alt-empty-space.js

@@ -0,0 +1,6 @@
+let nn = node.nodeName.toLowerCase();
+let validSetup = node.hasAttribute('alt') && (nn === 'img' || nn === 'input' || nn === 'area');
+let validAttrValue = /^\s+$/.test(node.getAttribute('alt'));
+return (
+	validSetup && validAttrValue
+);

lib/checks/label/alt-empty-space.json

@@ -0,0 +1,11 @@
+{
+	"id": "alt-empty-space",
+	"evaluate": "alt-empty-space.js",
+	"metadata": {
+		"impact": "critical",
+		"messages": {
+			"pass": "Element has a valid alt attribute value",
+			"fail": "Element has an alt attribute containing only a space character"
+		}
+	}
+}

lib/rules/image-alt.json

@@ -21,5 +21,7 @@
 		"role-presentation",
 		"role-none"
 	],
-	"none": []
+	"none": [
+		"alt-empty-space"
+	]
 }

test/checks/label/alt-empty-space.js

@@ -0,0 +1,31 @@
+describe('alt-empty-space', function() {
+	'use strict';
+
+    var checkSetup = axe.testUtils.checkSetup;
+    var checkContext =  axe.testUtils.MockCheckContext();
+    var check = checks['alt-empty-space'];
+
+	afterEach(function() {
+		checkContext.reset();
+	});
+
+	it('should return true if alt contains a space character', function() {
+		var params = checkSetup('<img id="target" alt=" " />');
+		assert.isTrue(check.evaluate.apply(checkContext, params));
+    });
+
+    it('should return true if alt contains a non-breaking space character', function() {
+		var params = checkSetup('<img id="target" alt="&nbsp;" />');
+		assert.isTrue(check.evaluate.apply(checkContext, params));
+	});
+
+	it('should return false if alt attribute is empty', function() {
+		var params = checkSetup('<img id="target" alt="" />')
+		assert.isFalse(check.evaluate.apply(checkContext, params));
+    });
+
+    it('should return false if alt attribute has a proper text value', function() {
+		var params = checkSetup('<img id="target" alt="text content" />')
+		assert.isFalse(check.evaluate.apply(checkContext, params));
+	});
+});

test/integration/rules/image-alt/image-alt.html

@@ -15,5 +15,6 @@
 <img src="img.jpg" id="pass7" role="none">
 <img src="img.jpg" id="pass8" aria-labelledby="ninjamonkeys">
 <div role="img" alt="blah" id="violation6"></div>
+<img src="img.jpg" id="violation7" alt=" " />
 <div role="img" aria-label="blah" id="pass9"></div>
 <svg role="img" id="ignore1"><title>SVG Title</title></svg>

test/integration/rules/image-alt/image-alt.json

@@ -7,7 +7,8 @@
 		["#violation3"],
 		["#violation4"],
 		["#violation5"],
-		["#violation6"]
+		["#violation6"],
+		["#violation7"]
 	],
 	"passes": [
 		["#pass1"],