Web无障碍开发中电商促销折扣横幅应使用什么ARIA role？

对应ARIA角色选择 #

针对你提到的「限时全场所有商品享20%折扣优惠」这类促销横幅，根据WCAG无障碍标准，分两种场景选择角色：

• 若横幅为页面加载时就存在、不会自动消失的固定展示内容：使用 role="region" 搭配 aria-label="促销通知"，读屏用户可以直接在区域导航列表中快速定位到该内容，不需要逐行浏览查找。
• 若横幅为临时触发、展示一段时间后会自动关闭的限时通知：使用 role="status"，该角色会让读屏软件在当前操作空闲时播报横幅内容，不会强制打断用户的操作流程。禁止使用role="alert"，该角色会强制中断读屏进程，对无障碍用户体验影响极大。

其他配套无障碍处理要求 #

• 文本对比度必须满足WCAG 2.1 AA级标准：普通文本对比度≥4.5:1，大文本（字号≥18pt或加粗≥14pt）对比度≥3:1，避免使用低饱和度浅色文字配浅色背景的设计。
• 若横幅附带倒计时模块：需要给倒计时区域添加 aria-live="polite" 属性，读屏软件会实时更新剩余活动时间，不要仅靠视觉动效展示倒计时信息。
• 若横幅支持关闭：关闭按钮必须添加明确的语义标注，比如 aria-label="关闭促销横幅"，不能仅用叉号图标不加任何文本说明。
• 若横幅点击可跳转活动页：优先使用语义化的<a>标签包裹可点击区域，若用div绑定点击事件，需要添加 role="link" 搭配跳转说明，比如 aria-label="跳转到全场20%折扣活动专场"。
• 禁止添加高频闪烁、自动轮播的动效，若必须使用动效，需要提供全局关闭动效的入口，避免触发光敏性用户的身体不适。

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