Fix confusing alt text in npmIndex and why it matters desc

GovTechSG · Aug 30, 2024 · 08fec6e · 08fec6e
1 parent c2a2574
commit 08fec6e
Show file tree

Hide file tree

Showing 3 changed files with 58 additions and 14 deletions.
diff --git a/src/crawlers/commonCrawlerFunc.ts b/src/crawlers/commonCrawlerFunc.ts
@@ -172,7 +172,7 @@ export const runAxeScript = async (
         // Add custom img alt text check
         checks: [
           {
-            id: 'confusing-alt-text-check',
+            id: 'oobee-confusing-alt-text',
             evaluate: function(node: HTMLElement) {
               const altText = node.getAttribute('alt');
               const confusingTexts = ['img', 'image', 'picture', 'photo', 'graphic'];
@@ -199,10 +199,10 @@ export const runAxeScript = async (
         rules: [
           { id: 'target-size', enabled: true },
           {
-            id: 'confusing-alt-text',
+            id: 'oobee-confusing-alt-text',
             selector: 'img[alt]',
             enabled: true,
-            any: ['confusing-alt-text-check'],
+            any: ['oobee-confusing-alt-text'],
             all: [],
             none: [],
             tags: ['wcag2a', 'wcag111'],

diff --git a/src/npmIndex.ts b/src/npmIndex.ts
@@ -79,7 +79,50 @@ export const init = async (
         branding: {
           application: 'oobee',
         },
-        rules: [{ id: 'target-size', enabled: true }],
+       // Add custom img alt text check
+       checks: [
+        {
+          id: 'oobee-confusing-alt-text',
+          evaluate: function(node: HTMLElement) {
+            const altText = node.getAttribute('alt');
+            const confusingTexts = ['img', 'image', 'picture', 'photo', 'graphic'];
+
+            if (altText) {
+              const trimmedAltText = altText.trim().toLowerCase();
+              // Check if the alt text exactly matches one of the confusingTexts
+              if (confusingTexts.some(text => text === trimmedAltText)) {
+                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 set as \'img\', \'image\', \'picture\', \'photo\', or \'graphic\' is confusing or not useful',
+            }
+          }
+        }
+      ],
+      rules: [
+        { id: 'target-size', enabled: true },
+        {
+          id: 'oobee-confusing-alt-text',
+          selector: 'img[alt]',
+          enabled: true,
+          any: ['oobee-confusing-alt-text'],
+          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/'
+          }
+        }
+      ]
       });
       const axeScanResults = await axe.run(elementsToScan, {
         resultTypes: ['violations', 'passes', 'incomplete'],