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

doc/aria-supported.md

@@ -18,4 +18,4 @@ For a detailed description about how accessibility support is decided, see [How
 | -------------------- | ---------------- |
 | aria-describedat     | No               |
 | aria-details         | No               |
-| aria-roledescription | No               |
+| aria-roledescription | No               |

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

@@ -0,0 +1,2 @@
+let validAttrValue = /^\s+$/.test(node.getAttribute('alt'));
+return node.hasAttribute('alt') && validAttrValue;

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

@@ -0,0 +1,11 @@
+{
+	"id": "alt-space-value",
+	"evaluate": "alt-space-value.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,5 @@
 		"role-presentation",
 		"role-none"
 	],
-	"none": []
+	"none": ["alt-space-value"]
 }

test/checks/label/alt-space.js

@@ -0,0 +1,31 @@
+describe('alt-space-value', function() {
+	'use strict';
+
+	var checkSetup = axe.testUtils.checkSetup;
+	var checkContext = axe.testUtils.MockCheckContext();
+	var check = checks['alt-space-value'];
+
+	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"],