如何在Squarespace注入代码解决ADA合规的图片关联元素检查失败问题

安全阿岳

2026-6-12

解决Squarespace产品页面ADA合规的<li>添加role="none"方案

问题分析

你之前尝试插入隐藏<span>的代码完全没有触及目标<li>元素，所以无法解决问题。正确思路是通过JavaScript动态定位目标<li>并添加属性——因为Squarespace的产品画廊元素是动态加载的，必须确保代码在元素渲染完成后执行。

可行代码方案

将以下代码注入到Squarespace后台的「设置 > 高级 > 代码注入 > 页眉」区域：

<script>
document.addEventListener('DOMContentLoaded', function() {
  // 监听DOM变化，确保目标元素加载完成
  const observer = new MutationObserver(function(mutations) {
    const targetImg = document.querySelector('img[aria-describedby="product-gallery-slides-item-1"]');
    if (targetImg) {
      // 定位目标img的父级li元素
      const targetLi = targetImg.closest('li.product-gallery-slides-item');
      if (targetLi) {
        targetLi.setAttribute('role', 'none');
        observer.disconnect(); // 完成后停止监听
      }
    }
  });

  // 监听body下所有子元素的变化
  observer.observe(document.body, {
    childList: true,
    subtree: true
  });
});
</script>

代码说明

MutationObserver：解决Squarespace动态加载元素的问题，确保在产品画廊的<li>渲染完成后再执行属性添加操作。
closest()：精准定位目标<img>的父级<li>（product-gallery-slides-item是Squarespace产品画廊的默认类名）。
setAttribute()：给目标<li>添加role="none"属性，满足ADA合规要求。