RP Promap for Shopify: Adding aria-hidden="true" to Store Images
This guide explains how to add aria-hidden="true" to images inside the RP Promap store image container on Shopify.
This is useful when store images are decorative and do not provide meaningful content for screen readers.
What This Does
The script targets any <img> inside:
div#scasl-store_image
and adds:
aria-hidden="true"
This helps prevent decorative images from being announced by assistive technologies.
Use Case
You may want to apply this when:
store images are only visual and do not add important context
the same store information already appears in nearby text
you are improving accessibility and reducing unnecessary screen reader output
Script
Add the following script to your Shopify theme:
<script>
function applyAriaHiddenToStoreImages() {
const container = document.querySelector("#scasl-store_image");
if (!container) return;
const images = container.querySelectorAll("img");
images.forEach((img) => {
img.setAttribute("aria-hidden", "true");
});
}
document.addEventListener("DOMContentLoaded", applyAriaHiddenToStoreImages);
const observer = new MutationObserver(() => {
applyAriaHiddenToStoreImages();
});
observer.observe(document.body, {
childList: true,
subtree: true
});
</script>
How It Works
This script:
looks for the
#scasl-store_imagecontainerfinds every image inside that container
adds
aria-hidden="true"to each imagecontinues watching the page for dynamically loaded content and reapplies the attribute when needed
This is especially helpful if RP Promap injects or refreshes store content after the page initially loads.
Shopify Implementation Notes
Option 1: Add to Your Theme File
A common place to add this is near the bottom of your theme layout file, such as:
theme.liquid
Place the script just before the closing </body> tag.
Option 2: Add Through a Custom Code Section
If your theme supports custom code blocks or theme customizer script injection, you can place the script there instead.
Option 3: Add Through a Snippet
You can create a snippet such as:
promap-aria-hidden-fix.liquid
Then include it in your layout:
{% render 'promap-aria-hidden-fix' %}This keeps the customization organized and easier to manage later.
Important Accessibility Note
Only use aria-hidden="true" when the image is decorative.
Do not hide images from screen readers if they:
contain meaningful information
include text that users need to understand
provide important store-specific context not available elsewhere on the page
If the image is informative, it should remain available to assistive technology and use appropriate alt text instead.
Recommended Testing
After implementation, test the locator page to confirm:
images inside
#scasl-store_imagereceivearia-hidden="true"the script still works after store results reload
no important content is being hidden from screen readers
the page behaves correctly on desktop and mobile
You can inspect the rendered HTML in your browser to verify the attribute is being added.
Troubleshooting
The script does not work
Check that the page actually contains:
#scasl-store_image
If the ID is different on your live storefront, update the selector in the script.
Images load later and are missed
Use the MutationObserver version above. This is already included in the recommended script.
The script affects too many images
Make sure only the intended store image wrapper uses the scasl-store_image ID.
Summary
By adding this script to your Shopify theme, you can automatically apply aria-hidden="true" to decorative RP Promap store images and support a cleaner screen reader experience.
This is a lightweight accessibility enhancement that works well for dynamically loaded locator content.
Implementation Checklist
confirm images in
#scasl-store_imageare decorativeadd the script to your Shopify theme
place it before
</body>or inside a reusable snippettest on the live locator page
verify dynamic results also receive the attribute