如何为屏幕阅读器隐藏无关可聚焦滚动按钮且符合无障碍规则？

方法一：原生按钮的无障碍隐藏配置 #

如果你的滚动按钮是原生<button>元素，可按以下方式设置属性，兼顾所有用户体验：

• 给按钮添加aria-hidden="true"：告知屏幕阅读器忽略该元素
• 保留按钮的默认tabindex（原生button默认支持键盘聚焦，无需额外设置）
• 给按钮添加aria-label=""（空标签）：确保即使屏幕阅读器意外聚焦到按钮，也不会播报冗余内容

这种方式既满足视觉用户（鼠标/键盘）的交互需求，又让屏幕阅读器用户完全感知不到这些按钮，同时避免违反aria-hidden-focus规则——空的aria-label会让屏幕阅读器跳过对按钮的语义播报，结合aria-hidden="true"彻底隐藏按钮的存在。

方法二：自定义按钮的语义剥离方案 #

如果你的滚动按钮是自定义元素（如<div>），需额外补充交互逻辑：

• 设置role="button"：让元素具备按钮的交互语义（仅对视觉键盘用户有效）
• 添加aria-hidden="true"：屏蔽屏幕阅读器的感知
• 设置tabindex="0"：允许键盘用户通过Tab键聚焦
• 绑定click事件实现滚动逻辑，同时监听keydown事件，处理Enter和Space按键的触发（模拟原生按钮的键盘交互）
• 添加aria-label=""：避免屏幕阅读器播报无效内容

关键注意事项 #

• 绝对不要在包含可聚焦元素的容器上设置aria-hidden="true"，这会直接触发aria-hidden-focus违规
• 优先使用原生<button>元素，它自带完善的键盘交互支持，无需额外绑定按键事件
• 确保滚动容器本身对屏幕阅读器友好：如果容器是<div>，可添加role="region"并设置清晰的aria-label，让屏幕阅读器用户明确该区域的内容范畴

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