按钮内的哪个 ARIA 角色答案

【问题标题】：Which ARIA role to within button按钮内的哪个 ARIA 角色
【发布时间】：2022-08-18 22:40:05
【问题描述】：

在按钮中使用哪个角色是正确的，因此屏幕阅读器使用aria-label 属性。

<button class=\"favorite-button\">
    <span class=\"material-symbols-outlined\"
          aria-label=\"add to favorites\"
          role=\"???\">
        grade
    </span>
</button>

所以我使用谷歌字体材料符号，没有 aria-label + 角色 \"grade\" 将被屏幕阅读器用户读取。在这种情况下，哪个角色适合？

button 角色？ developer.mozilla.org/en-US/docs/Web/Accessibility/ARIA/Roles/…
AFAIK button 标签是接收焦点的元素（浏览器可能会在其上查找特定的 aria 属性，而不是 span。另外：我认为 aria 角色是从 button 标签中隐含的，所以不需要。我认为设置按钮上的 aria-label 应该足够了。

标签： html wai-aria

【解决方案1】：

您的问题意味着设置 role 会强制读取 aria-label。这并不完全正确（尽管对于 region 地标，一些屏幕阅读器别如果没有可访问的名称，请宣布地标，这与您的问题所暗示的相反 - 除非有aria-label，否则不会宣布该角色。）

在你的情况下，这很简单。该角色已经存在，因为<button> 元素和aria-label 应该在按钮本身上。

<button class="favorite-button" aria-label="add to favorites">
  <span class="material-symbols-outlined">
    grade
  </span>
</button>

但是，上述解决方案会导致 WCAG 2.5.3 Label in Name 问题。您现在将有一个按钮，可以直观地显示“成绩”，但屏幕阅读器会显示“添加到收藏夹”。可见标签与屏幕阅读器文本不匹配。

你能提供更多关于你想要做什么的细节吗？按钮的目的是将元素添加到收藏夹列表吗？还是按钮的目的是显示成绩？听起来你需要两个独立的交互元素。一个显示成绩，一个添加到收藏夹，但需要更多细节。

【讨论】：