Validate image alt attributes – Virtuoso

The validateAllImagesAltAttribute extension checks every <img> element in the current page document and verifies that it has a non-empty alt attribute.

This is useful when a journey needs a quick accessibility guard for image text alternatives. The W3C Web Content Accessibility Guidelines (WCAG) describe requirements for providing text alternatives for non-text content, and this extension helps catch images that are missing a basic alt value.

Parameters:

This extension does not require any input parameters.

Note: Run this extension after the page state you want to validate is fully loaded. Images added later by lazy loading, SPA rendering, infinite scrolling, or delayed components are checked only if they are already present in the current DOM when the extension runs.

How to apply this to your journey

Use the extension in a journey by calling validateAllImagesAltAttribute. It does not need any input values. If any image is missing an alt attribute or has an empty alt attribute, the step fails.

Note: Images without a non-empty alt attribute are outlined in red. Images with a non-empty alt attribute are outlined in green. The highlighting is added by changing each matching image element's inline style value.

navigate to "https://test.virtuoso.qa"
validateAllImagesAltAttribute

execute "validateAllImagesAltAttribute" returning $result

You can also place the validation after a journey action that changes the page content, such as opening a modal, loading a product listing, or navigating to a confirmation page.

click "Open gallery"
validateAllImagesAltAttribute

Because this extension has no inputs, no variable setup is required before calling it.

navigate to "https://test.virtuoso.qa"
validateAllImagesAltAttribute

Example output:

If all images have non-empty alt attributes, the step passes and compliant images are outlined in green.

If one or more images are missing alt attributes, the step fails with an error similar to:

img element(s) https://example.com/image.png doesn't have an alt attribute (or it has an empty alt attribute)

This extension does not require any external resource.

The extension should be configured as:

Run asynchronously: No
Scope: Global

Limitation: This extension performs a focused DOM check for <img> elements in the current document only. It fails images that do not have an alt attribute or whose alt attribute is empty, but it does not assess whether the alt text is meaningful, accurate, localized, or appropriate for the image's purpose. It can also flag intentionally decorative images that use alt="", even though decorative images may be handled differently under WCAG guidance depending on page context. The extension does not check CSS background images, inline <svg> graphics, <canvas> content, icon fonts, ARIA labels, role="presentation", aria-hidden, or text alternatives provided outside the alt attribute. It only sees images available in the current page DOM when the step runs, so lazy-loaded content, virtualized lists, hidden panels, unopened modals, SPA updates, cross-origin or sandboxed iframes, and closed shadow DOM can be missed. The script mutates matched image elements by replacing their inline style value with a red or green outline, so use it after visual layout-sensitive checks or restore styles if needed. Cross-browser note: The extension uses XPath evaluation and DOM styling through browser JavaScript. Validate it in each browser/device configuration used by your plan because DOM exposure, iframe access, shadow DOM behavior, lazy loading, responsive rendering, and styling can differ from Virtuoso's default browser in cross-browser, mobile, or remote-grid executions.

Add the extension to your Virtuoso instance

Select the domain that matches your Virtuoso account.

Add extension to Virtuoso - https://app.virtuoso.qa/ →	Add extension to Virtuoso Free Trial - https://app2.virtuoso.qa/ →
Add extension to Virtuoso US - https://app-us.virtuoso.qa/ →	Add extension to Virtuoso UK - https://app-uk.virtuoso.qa/ →

View source

Last updated: 25/09/2020

Resources:

This extension does not require any external resource.

// Last updated: 25/09/2020, 13:48:20 UTC
const badElements = document.evaluate('//img[not(@alt) or @alt=""]', document)


let element = badElements.iterateNext()
let  _throw = false;
let badElementsSaved = []

while(element){
    badElementsSaved.push(element)
    _throw = true
    element = badElements.iterateNext();
}



const goodElements = document.evaluate('//img[@alt and @alt!=""]', document);
let goodElement = goodElements.iterateNext();
let goodElementsSaved = []
while(goodElement){
    goodElementsSaved.push(goodElement);
    goodElement = goodElements.iterateNext()
}

console.log(badElements)
console.log(goodElements)

// Comment or uncomment these to enable/disable highlights of the elements
badElementsSaved.forEach(it => it.style = 'outline:solid red 3px;')
goodElementsSaved.forEach(it => it.style = 'outline:solid green 3px;')


if(_throw){
    console.error("Missing image alt attribute(s)")
    throw new Error("img element(s) " + badElementsSaved.map(it => it.src) + " doesn't have an alt attribute (or it has an empty alt attribute)")
}