Shopify页面扫描报错：焦点内容需设tabindex='-1'或移除DOM

先给你理清楚报错的核心原因：你第2行的元素同时加了role="region"和aria-hidden="true"，这俩属性是矛盾的——role="region"会让元素成为屏幕阅读器可识别的聚焦区域，但aria-hidden="true"是告诉辅助工具忽略这个元素。扫描工具检测到这种冲突，才要求你要么加tabindex="-1"屏蔽键盘聚焦，要么移除元素。

针对你的代码场景，给你两种明确的解决方案：

方案1：保留容器但修正无障碍属性（推荐） #

既然你加了aria-hidden="true"，说明这个轮播容器不需要被屏幕阅读器识别，那直接删掉role="region"就行，tabindex="-1"留不留看需求：

• 如果你的JS代码需要通过脚本聚焦这个容器（比如轮播切换时的交互），就保留tabindex="-1"；
• 如果不需要JS聚焦，直接去掉tabindex="-1"，因为aria-hidden="true"的元素本来就不该被聚焦。

修改后第2行代码：

<div id="SlideshowWrapper-{{ section.id }}" class="slideshow-wrapper" aria-hidden="true" tabindex="-1">

（不需要JS聚焦的话，去掉tabindex="-1"即可）

方案2：保留role="region"（需容器被屏幕阅读器识别） #

如果这个容器确实需要被辅助工具识别为区域，那就删掉aria-hidden="true"，然后调整tabindex：

• 要让用户能通过Tab键访问，用tabindex="0"；
• 只需要JS聚焦、不需要Tab遍历，就用tabindex="-1"。

修改后第2行代码：

<div id="SlideshowWrapper-{{ section.id }}" class="slideshow-wrapper" role="region" tabindex="-1">

另外提一句你代码里的<div tabindex="-1">Tabbable due to tabindex.</div>：如果这只是测试或占位文本，直接删掉最省事；如果是实际内容，要么加aria-hidden="true"，要么确认是否真的需要保留——无用的可聚焦元素会拖慢键盘导航的体验。

内容的提问来源于stack exchange，提问作者Peter