Add vague confusing alt text check

GovTechSG · Aug 29, 2024 · c439b06 · c439b06
1 parent 2be5ba1
commit c439b06
Show file tree

Hide file tree

Showing 3 changed files with 43 additions and 3 deletions.
diff --git a/package-lock.json b/package-lock.json
diff --git a/package.json b/package.json
@@ -1,7 +1,7 @@
 {
   "name": "@govtechsg/purple-hats",
   "main": "dist/npmIndex.js",
-  "version": "0.10.11",
+  "version": "0.10.12",
   "type": "module",
   "dependencies": {
     "@json2csv/node": "^7.0.3",

diff --git a/src/crawlers/commonCrawlerFunc.ts b/src/crawlers/commonCrawlerFunc.ts
@@ -169,8 +169,48 @@ export const runAxeScript = async (
         branding: {
           application: 'purple-a11y',
         },
+        // Add custom img alt text check
+        checks: [
+          {
+            id: 'confusing-alt-text-check',
+            evaluate: function(node: HTMLElement) {
+              const altText = node.getAttribute('alt');
+              const confusingTexts = ['img', 'image', 'picture', 'photo', 'graphic'];
+
+              if (altText) {
+                const trimmedAltText = altText.trim().toLowerCase();
+                if (confusingTexts.includes(trimmedAltText) || trimmedAltText.length < 5) {
+                  return false; // Fail the check if the alt text is confusing or not useful
+                }
+              }
+
+              return true; // Pass the check if the alt text seems appropriate
+            },
+            metadata: {
+              impact: 'serious', // Set the severity to serious
+              messages: {
+                pass: 'The image alt text is probably useful',
+                fail: 'The image alt text is confusing or not useful',
+              }
+            }
+          }
+        ],
         rules: [
           { id: 'target-size', enabled: true },
+          {
+            id: 'confusing-alt-text',
+            selector: 'img[alt]',
+            enabled: true,
+            any: ['confusing-alt-text-check'],
+            all: [],
+            none: [],
+            tags: ['wcag2a', 'wcag111'],
+            metadata: {
+              description: 'Ensures image alt text is clear and useful',
+              help: 'Image alt text must not be vague or unhelpful',
+              helpUrl: 'https://www.deque.com/blog/great-alt-text-introduction/'
+            }
+          }
         ]
       });