aria-label 在不应该使用屏幕阅读器时被读取：WCAG答案

【问题标题】：aria-label being read when it should not screen reader : WCAGaria-label 在不应该使用屏幕阅读器时被读取：WCAG
【发布时间】：2017-11-28 00:51:10
【问题描述】：

html结构是这样的

<div>
<a href="#"> some info
  <div role="button" tabindex ="0"
      aria-label = "close"
  />
</a>
</div>

使用屏幕阅读器时，a 标签会读取“关闭某些信息”，然后将焦点放在按钮上，它会再次读取“关闭”。我想要a 标签读取的只是“一些信息”和读取“关闭”的按钮。我应该做出什么改变？我无法更改 HTML 结构。

【问题讨论】：

【解决方案1】：

您不能在另一个可聚焦元素中包含可聚焦元素。

我应该做出哪些改变？ 我无法更改 HTML 结构。

给定一个 HTML 代码，如果不更改代码就很难进行更改。

如果您可以更改 HTML 结构，这将是一个更好的代码：

<div>
  <button> some info</button>
  <button aria-label="close" />
</div>

很遗憾，如果您无法更改 HTML 结构，我们无法更改任何内容，因为您的结构本质上是畸形的。

我们仍然可以使用一些技巧（例如使用 javascript），例如将 role=description 和 tabindex=-1 添加到 a[href] 元素并用 html button 替换“一些信息”，但这将违反 @987654321 @：

不要改变原生语义，除非你真的必须这样做。

【讨论】：

【解决方案2】：

1.) 小提琴与您在上面发布的代码不同。对于我的回答，我使用了小提琴代码（并为 href 属性添加了一个缺失的 "...）

2.) 按钮是链接的一部分，因此其内容会作为链接的一部分被读取。您是否真的希望（相同的）链接在单击按钮和单击“某些信息”时都能正常工作。看起来“一些信息”应该是链接的标签/评论？

取决于你想要什么，我要么关闭按钮之前的a标签，要么只将按钮包装到a标签中，用全文标记它并用aria-hidden = "true"隐藏之前的文本：

<div>
  <a href="#">
    some info
  </a>
  <button aria-label = "close">close</button>      
</div>

或

<div>
  <span aria-hidden="true">some info</span>
  <a href="#">
    <button aria-label = "some info, close">close</button>
  </a>
</div>

【讨论】：

【解决方案3】：

如果你只能添加属性而不改变 HTML 结构，你可以这样做：

<div>
  <a href="#" tabindex="-1">
    <div tabindex="0">some info</div>
    <button>
      close
    </button>
  </a>
</div>

将tabindex 设置为-1 会从跳位顺序中删除一个元素，而将其设置为0 则会添加一个项目。一般应使用其他值。 More info here.

从标签顺序中删除a 标签并添加div 将使键盘跳过a 标签并分别关注div 和button 标签。

【讨论】：