促销折扣横幅的咏叹调角色答案

【问题标题】：aria role for promotional discount banner促销折扣横幅的咏叹调角色
【发布时间】：2021-09-14 15:00:41
【问题描述】：

关于网络可访问性，我应该如何处理电子商务网站顶部的促销横幅。例如，横幅可能会写着“所有产品在有限时间内享受 20% 的折扣”。我给那个横幅什么 aria-role？

【问题讨论】：

【解决方案1】：

它可以是一个简单的landmark 角色，以便使用屏幕阅读器轻松查找。您的第一个倾向可能是使用banner 角色，因为您将您的元素描述为“折扣横幅”，但横幅地标应保留给主要<header> 元素。 complementary 地标就可以了。

但从技术上讲，您不需要具有里程碑意义的角色或任何角色。折扣横幅是否在页面顶部？它是在 DOM 的开头还是附近？如果是这样，那么屏幕阅读器用户将在导航的早期遇到它（无论是通过 tab 键还是向下箭头键）。

如果折扣横幅包含链接，只需使用带有真正 <a> 元素的语义 HTML。尽量避免包含折扣图片的折扣 (WCAG 1.4.5)。

通常坚持使用适当的 HTML 元素可为您提供所需的大部分可访问性，而无需添加 ARIA 属性或角色。

如果您有折扣横幅的示例，我可以提供更多详细信息。

【讨论】：

【解决方案2】：

根据可用的WAI-ARIA roles，最有可能的候选人似乎是alert 角色（没有alertdialog）。

alert 似乎最合适，因为它向用户传达了重要的动态信息（例如 toasts/snackbars 或可能临时显示给用户的重要错误/警告）。

在促销电子商务横幅的情况下，您可能希望使用 JavaScript 在页面加载时添加角色，然后将其从元素中删除，这样它只会发出一次警报，不会造成混乱或挫败感为用户。

编辑：有关使用alert 角色的一些其他问题，请参阅this SO post，以防它们适用于您的实施。

【讨论】：