在使用 JavaScript 和 JSON 数据更改内容的 HTML 按钮上，我需要什么咏叹调标签？

Question

我的网页有一些 HTML 按钮。单击按钮将通过 JavaScript 更改页面文本和图像内容。内容是从 JSON 文件加载的。

  <div class="dot-buttons role="tablist" aria-label="crew list">
    <button role="tab" class="dot-button" aria-selected="true">Douglas Hurley</button>
    <button role="tab" class="dot-button" aria-selected="false">Mark Shuttlewort</button>
    <button role="tab" class="dot-button" aria-selected="false">Victor Glover</button>
    <button role="tab" class="dot-button" aria-selected="false">Anousheh Ansari</button>
  </div>

我感到困惑的是如何标记 ARIA 标签，以便用户理解单击按钮将更改页面内容。

我试过了：

aria-controls="Tab-1"

但这没有通过我的辅助功能测试，因为按钮并不能真正控制其他 HTML 元素。按钮仅更改元素内的内容。

如何为按钮设置 ARIA 标签，以便用户了解单击它们会更改内容？

Answer 1

您的示例代码使用的是 tab design pattern。那是你想做的吗？您的页面上是否有类似以下内容的内容：？

如果是这样，那么您拥有的代码就足够了。当用户选择其中一个按钮时，我假设您将 aria-selected 从 "false" 切换为 "true" （反之亦然） ).当您切换值时，屏幕 reader 将自动宣布状态更改。这是使用 ARIA 属性的好处之一 - 它内置了对通知辅助技术的支持，例如屏幕 readers 有关更改的信息。

并且由于您正在使用 role="tablist"，用户的组合听说他们有一个标签列表和从“未选择”到“已选择”的状态切换足以向用户提示页面上的某些内容在选择按钮时更新。

如果这是您页面上的模式，您可以可以在您的按钮上使用 aria-controls，它会引用它显示的面板的 ID，但是aria-controls 不会从辅助技术支持中为您带来太多好处。我认为一个屏幕 reader (JAWS) 可以用它做一些事情，但大多数其他屏幕不会，所以不管你用不用都没什么大不了的。当然，这有点像第 22 条军规。如果屏幕 readers 不支持它，那么人们就不会使用它，如果人们不使用它，屏幕 readers 就没有动力去支持它。通常，无论是否支持 ARIA 属性，您都应该使用适当的属性，以便在支持到来时做好准备。前面提到的选项卡设计模式说你应该使用 aria-controls.

在使用 JavaScript 和 JSON 数据更改内容的 HTML 按钮上，我需要什么咏叹调标签？

What aria label do I need on an HTML button that changes content using JavaScript and JSON data?

html

javascript

wai-aria