diff --git a/package-lock.json b/package-lock.json index 46d96b00..c2bad431 100644 --- a/package-lock.json +++ b/package-lock.json @@ -1,12 +1,12 @@ { "name": "@govtechsg/purple-hats", - "version": "0.10.11", + "version": "0.10.12", "lockfileVersion": 3, "requires": true, "packages": { "": { "name": "@govtechsg/purple-hats", - "version": "0.10.11", + "version": "0.10.12", "license": "MIT", "dependencies": { "@json2csv/node": "^7.0.3", diff --git a/package.json b/package.json index 5d762085..ec1794d3 100644 --- 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 index 529ae53c..2649d11a 100644 --- 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/' + } + } ] });