From 78b25ea9e64709a5ac4922fab164653921518917 Mon Sep 17 00:00:00 2001 From: younglim Date: Fri, 30 Aug 2024 21:29:07 +0800 Subject: [PATCH] Fixes for vague alt text check --- src/crawlers/commonCrawlerFunc.ts | 6 +-- src/npmIndex.ts | 45 ++++++++++++++++++- .../ejs/partials/scripts/ruleOffcanvas.ejs | 21 ++++----- 3 files changed, 58 insertions(+), 14 deletions(-) diff --git a/src/crawlers/commonCrawlerFunc.ts b/src/crawlers/commonCrawlerFunc.ts index ebf6ff4e..98b5291b 100644 --- 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 index bb422372..9281555c 100644 --- a/src/npmIndex.ts +++ b/src/npmIndex.ts @@ -79,7 +79,50 @@ export const init = async ( branding: { application: 'purple-a11y', }, - 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'], diff --git a/src/static/ejs/partials/scripts/ruleOffcanvas.ejs b/src/static/ejs/partials/scripts/ruleOffcanvas.ejs index 2f131c4c..cf492739 100644 --- a/src/static/ejs/partials/scripts/ruleOffcanvas.ejs +++ b/src/static/ejs/partials/scripts/ruleOffcanvas.ejs @@ -695,7 +695,7 @@ category summary is clicked %> } const whyItMatters = { - accesskeys: '

\n Specifying a accesskey attribute value for some part of a\n document allows users to quickly activate or move the focus to a specific\n element by pressing the specified key (usually in combination with the\n alt key). Duplicating accesskey values\n creates unexpected effects that ultimately make the page less accessible.\n

', + 'accesskeys': '

\n Specifying a accesskey attribute value for some part of a\n document allows users to quickly activate or move the focus to a specific\n element by pressing the specified key (usually in combination with the\n alt key). Duplicating accesskey values\n creates unexpected effects that ultimately make the page less accessible.\n

', 'area-alt': '

\n Screen readers have no way of translating images into words. It is important\n that all images, including image maps, have alt text values.\n

', 'aria-allowed-attr': '

\n Using ARIA attributes in roles where they are not allowed can interfere with\n the accessibility of the web page. Using an invalid role-attribute combination\n will, at best, result in no effect on the accessibility of the application\n and, at worst, may trigger behavior that disables accessibility for entire\n portions of an application.\n

', 'aria-command-name': '

\n Screen reader users are not able to discern the purpose of elements with\n role="link", role="button", or\n role="menuitem" that do not have an accessible name.\n

', @@ -715,9 +715,9 @@ category summary is clicked %> 'aria-valid-attr': '

\n If the developer uses a non-existent or misspelled ARIA attribute, the\n attribute will not be able to perform the accessibility function intended by\n the developer.\n

', 'autocomplete-valid': '

\n Failure to provide autocomplete values in form fields results in inaccessible\n content. Screen readers do not read identified autocomplete form fields if the\n appropriate autocomplete attribute values are missing. Users cannot correctly\n navigate forms when screen readers cannot provide adequate information to the\n user regarding form field interaction requirements.\n

', 'avoid-inline-spacing': '

\n Many people with cognitive disabilities have trouble tracking lines of text\n when a block of text is single spaced. Providing spacing between 1.5 to 2\n allows them to start a new line more easily once they have finished the\n previous one.\n

', - blink: '

\n As the name suggests, blink tags cause content to flash. Though\n you may like the effect, blinking text can be difficult to read, and blinking\n objects (links, buttons, etc.) can be difficult to activate, especially for\n users with imprecise or limited dexterity.\n

', + 'blink': '

\n As the name suggests, blink tags cause content to flash. Though\n you may like the effect, blinking text can be difficult to read, and blinking\n objects (links, buttons, etc.) can be difficult to activate, especially for\n users with imprecise or limited dexterity.\n

', 'definition-list': '

\n Screen readers have a specific way of announcing definition lists. When such\n lists are not properly marked up, this creates the opportunity for confusing\n or inaccurate screen reader output.\n

', - dlitem: '

\n A definition list item must be wrapped in parent dl elements,\n otherwise it will be invalid.\n

', + 'dlitem': '

\n A definition list item must be wrapped in parent dl elements,\n otherwise it will be invalid.\n

', 'duplicate-id-active': '

\n The ID attribute uniquely identifies focusable elements on a page. It does not\n make sense to duplicate an active ID.\n

', 'empty-table-header': '

\n Table header elements should have visible text that describes the purpose of\n the row or column to both sighted users and screen reader users.\n

', 'frame-focusable-content': '

\n When a frame has a negative tabindex, the browser is prevented from\n redirecting the focus to the content inside that frame. This causes all its\n content from getting skipped in keyboard navigation, and if the frame is\n scrollable also prevents the focus from reaching any element from which the\n frame can be scrolled with the keyboard.\n

', @@ -737,9 +737,9 @@ category summary is clicked %> 'landmark-no-duplicate-contentinfo': '

\n One of the main purposes of landmarks is to allow blind users to quickly find\n and navigate to the appropriate landmark, so you should keep the total number\n of landmarks relatively low. If you don't, screen reader users will have to\n sort through too much extra information to find what they're looking for.\n

', 'landmark-no-duplicate-main': '

\n Navigating a web page is far simpler for screen reader users if all of the\n content splits between one or more high-level sections. Content outside of\n these sections is difficult to find, and its purpose may be unclear.\n

', 'landmark-unique': '

\n landmark-unique is a new best practice rule ensures that\n landmarks have a unique role or accessible name (i.e. role, label, title)\n combination.\n

', - list: '

\n Screen readers have a specific way of announcing lists. This feature makes\n lists clearer to understand, but will only work if lists are properly\n structured.\n

', - listitem: '

\n For a list to be valid, it must have both parent and child elements. Parent\n elements can either be a set of ul tags or a set of\n ol tags. Child elements must be declared inside of these tags\n using the li tag.\n

', - marquee: '

\n The marquee element creates scrolling text that is difficult to\n read and click on. Beyond that, it can be distracting to viewers, especially\n to those with low vision, cognitive disabilities, or attention deficits.\n

', + 'list': '

\n Screen readers have a specific way of announcing lists. This feature makes\n lists clearer to understand, but will only work if lists are properly\n structured.\n

', + 'listitem': '

\n For a list to be valid, it must have both parent and child elements. Parent\n elements can either be a set of ul tags or a set of\n ol tags. Child elements must be declared inside of these tags\n using the li tag.\n

', + 'marquee': '

\n The marquee element creates scrolling text that is difficult to\n read and click on. Beyond that, it can be distracting to viewers, especially\n to those with low vision, cognitive disabilities, or attention deficits.\n

', 'meta-refresh': '

\n Since users do not expect a page to refresh automatically, such refreshing can\n be disorienting. Refreshing also moves the programmatic focus back to the top\n of the page, away from where the user had it. Such resetting is frustrating\n for users.\n

', 'object-alt': '

\n Screen readers have no way of translating non-text content into text announced\n to users. Instead, they read out alternative text. For screen reader users to\n obtain the information contained in embedded object elements\n which must contain short, descriptive alternative text.\n

', 'presentation-role-conflict': '

\n There are certain cases where the semantic role of an element with\n role="none" or role="presentation" does not resolve\n to none or presentation (respectively). When this happens, the element is not\n removed from the accessibility tree (as expected) and screen readers are able\n to interact with it.\n

', @@ -750,7 +750,7 @@ category summary is clicked %> 'server-side-image-map': '

\n Server-side image maps are not keyboard accessible; mouse clicks are required\n to access the links contained in the image, making the image inaccessible to\n people who only use keyboards for their navigation.\n

', 'skip-link': '

\n Screen readers announce content sequentially as it appears in the HTML file.\n What this means for users of assistive technology is that the content at the\n top of the page, typically including the entire navigation, is read out to the\n user before reaching any of the main content. Since content at the top of the\n page can often be very lengthy, it can be time-consuming to listen to or tab\n through all of it when the user is only interested in the main content.\n Including a skip link in an HTML page is beneficial to blind users, users with\n low vision, and mouse-only users.\n

', 'svg-img-alt': "

\n If you can't see, images are completely useless without a digital text alternative. The same is true in varying degrees for people with low vision or colour-blindness. \n

", - tabindex: '

\n Using tabindex with a value greater than 0 can create as many\n problems as it solves. It creates an unexpected tab order, which makes the\n page less intuitive and can give the appearance of skipping certain elements\n entirely.\n

', + 'tabindex': '

\n Using tabindex with a value greater than 0 can create as many\n problems as it solves. It creates an unexpected tab order, which makes the\n page less intuitive and can give the appearance of skipping certain elements\n entirely.\n

', 'table-duplicate-name': '

\n When tables have summary and caption text that is identical, screen reader\n users can be confused and find it difficult to know the name and purpose of\n the table.\n

', 'td-headers-attr': "

\n Sighted users can usually tell at a glance what the table's headers are and\n what their relationship to the data is. For non-sighted users this must be\n done in the markup.\n

", 'th-has-data-cells': '

\n When tables are not marked up semantically and do not have the correct header\n structure, screen reader users cannot correctly perceive the relationships\n between the cells and their contents visually.\n

', @@ -759,7 +759,7 @@ category summary is clicked %> 'no-autoplay-audio': '

\n People who are blind or have low vision and use screen reading software can\n find it hard to hear the screen reader's speech output if there is other audio\n playing at the same time. If automatically playing audio lasts more than three\n seconds, an easily located, accessible mechanism must be provided to pause or\n stop the audio or control the audio volume. An audio control allows screen\n reader users to hear the screen reader without other sounds playing.\n

', 'aria-hidden-body': '

\n Screen readers do not read content marked with the aria-hidden="true" attribute value. Users can still tab to focusable elements in the hidden objects, but screen readers remain silent.\n

', 'aria-required-attr': '

\n ARIA widget roles require additional attributes that describe the state of the\n widget. The state of the widget is not communicated to screen reader users if\n a required attribute is omitted.\n

', - bypass: '

\n Since web sites often display secondary, repeated content on multiple pages\n (such as navigation links, heading graphics, and advertising frames),\n keyboard-only users benefit from faster, more direct access to the primary\n content on a page. This reduces keystrokes and minimizes associated physical\n pain.\n

', + 'bypass': '

\n Since web sites often display secondary, repeated content on multiple pages\n (such as navigation links, heading graphics, and advertising frames),\n keyboard-only users benefit from faster, more direct access to the primary\n content on a page. This reduces keystrokes and minimizes associated physical\n pain.\n

', 'color-contrast': '

\n Some people with low vision experience low contrast, meaning that there aren't\n very many bright or dark areas. Everything tends to appear about the same\n brightness, which makes it hard to distinguish outlines, borders, edges, and\n details. Text that is too close in luminance (brightness) to the background\n can be hard to read.\n

', 'document-title': '

\n Screen reader users use page titles to get an overview of the contents of the\n page. Navigating through pages can quickly become difficult and confusing for\n screen reader users if the pages are not marked with a title. The page\n title element is the first thing screen reader users hear when\n first loading a web page.\n

', 'duplicate-id-aria': '

\n Duplicate IDs are common validation errors that may break the accessibility of\n labels, e.g., ARIA elements, form fields, table header cells.\n

', @@ -776,16 +776,17 @@ category summary is clicked %> 'meta-viewport': '

\n The user-scalable="no" parameter inside the\n content attribute of\n <meta name="viewport"> element disables zooming on a page.\n The maximum-scale parameter limits the amount the user can zoom.\n This is problematic for people with low vision who rely on screen magnifiers\n to properly see the contents of a web page.\n

', 'nested-interactive': '

\n Focusable elements with an interactive control ancestor (any element that\n accepts user input such as button or anchor elements) are not announced by\n screen readers and create an empty tab stop. That is, you could tab to the\n element but the screen reader will not announce its name, role, or state.\n

', 'page-has-heading-one': '

\n Screen reader users can use keyboard shortcuts to navigate directly to the\n first h1, which, in principle, should allow them to jump directly\n to the main content of the web page. If there is no h1, or if the\n h1 appears somewhere other than at the start of the main content,\n screen reader users must listen to more of the web page to understand its\n structure, wasting valuable time.\n

', - region: '

\n Navigating a web page is far simpler for screen reader users if the content\n splits between multiple high-level sections. Content outside of sections is\n difficult to find, and the content's purpose may be unclear.\n

', + 'region': '

\n Navigating a web page is far simpler for screen reader users if the content\n splits between multiple high-level sections. Content outside of sections is\n difficult to find, and the content's purpose may be unclear.\n

', 'button-name': '

\n Screen reader users are not able to discern the purpose of elements with\n role="link", role="button", or\n role="menuitem" that do not have an accessible name.\n

', 'aria-allowed-role': '

\n Intended accessible technology behavior by a developer is not enabled when an\n assigned WAI-ARIA role value is invalid for the parent element.\n

', 'aria-roles': '

\n Elements assigned invalid ARIA role values are not interpreted by assistive\n technology as intended by the developer.\n

', - label: '

\n Effective form labels are required to make forms accessible. The purpose of\n form elements such as checkboxes, radio buttons, input fields, etcetera, is\n often apparent to sighted users, even if the form element is not\n programmatically labeled. Screen readers users require useful form labels to\n identify form fields. Adding a label to all form elements eliminates ambiguity\n and contributes to a more accessible product.\n

', + 'label': '

\n Effective form labels are required to make forms accessible. The purpose of\n form elements such as checkboxes, radio buttons, input fields, etcetera, is\n often apparent to sighted users, even if the form element is not\n programmatically labeled. Screen readers users require useful form labels to\n identify form fields. Adding a label to all form elements eliminates ambiguity\n and contributes to a more accessible product.\n

', 'landmark-one-main': '

\n Navigating a web page is far simpler for screen reader users if all of the\n content splits between one or more high-level sections. Content outside of\n these sections is difficult to find, and its purpose may be unclear.\n

', 'aria-braille-equivalent': '

\nARIA braille attributes were introduced to allow adjusting how labels and role descriptions are rendered on a braille display. They cannot be the only attribute providing a label, or a role description. When used without a corresponding label or role description ARIA says to ignore these attributes, although this may not happen consistently in screen readers and other assistive technologies.\n

', 'aria-conditional-attr': '

\nUsing ARIA attributes on elements where they are not expected can result in unpredictable behavior for assistive technologies. This can lead to a poor user experience for people with disabilities who rely on these technologies. It is important to follow the ARIA specification to ensure that assistive technologies can properly interpret and communicate the intended meaning of the content.\n

', 'aria-deprecated-role': '

\nUsing deprecated WAI-ARIA roles is bad for accessibility. They will not be recognized or correctly processed by screen readers and other assistive technologies. Using these means not everyone will be able to access essential information.\n

', 'aria-prohibited-attr': '

\nUsing ARIA attributes in roles where they are prohibited can mean that important information is not communicated to users of assistive technologies. assistive technologies may also attempt to compensate for the issue, resulting in inconsistent and confusing behavior of these tools.\n

', 'target-size' : '

\n Touch targets must have sufficient size and spacing in order to "be easily activated without accidentally activating an adjacent target." When touch targets are too small or too close together, it becomes difficult for users to activate them.\n

', + 'oobee-confusing-alt-text' : '

\n Alt text should be clear and concise, providing a brief description of the image. If the alt text is too long or confusing, it can be difficult for screen reader users to understand the image.\n

', }; \ No newline at end of file