问如何绕过aXe工具中唯一的id属性值警告

EN

是的，你必须创建唯一的身份证.句号。

不，角不是天生的. https://github.com/angular/angular/issues/5145

不，您不能只是附加循环索引。每当循环刷新或在其他地方调用时，它将再次以索引0开头。您必须添加另一个累积参数，以确保其100%的唯一性.通常，这是通过在每次打开循环时都有一个计数的计数器变量来实现的。{{ counterVar + $index }}有角插件来完成这一点，检查npm。

不，你问的问题并不是你最大的问题。你是在解决可访问性的遵从性问题，而没有考虑人类与屏幕阅读器和适当的代码架构一起使用的实际可用性，以避免出现滚雪球式的反模式。

实现唯一的ID for aria-labeledby是在QA故事或正在验证代码的自动化工具上选中的框。它并不能确保您的产品在屏幕阅读器中可供人类使用。

反模式是..。

我只有一次代码，但是由于我使用ng-include在多个地方插入工具提示文件，dom树获得多个相同的html实例，并重复给定的id。-10月5日23时10分

如果我正确地理解了您的意思，您是说您每个工具提示只有一个文件，但是对于每个使用工具提示的实例，您都要反复注入它。

屏幕阅读器会把所有东西都看清楚。这意味着您必须使用aria隐藏属性来管理每个元素的状态。这意味着你将不得不编码更多的东西。您将不得不考虑向后兼容性(可能会利用显示:没有而不是aria-隐藏)和更多。

请阅读：https://accessibility.athena-ict.com/aria/examples/tooltip.shtml

这个链接是您为屏幕阅读器提供可用工具提示所需构建的一个演练。

在我看来，您使用的反模式是一次又一次地注入工具提示组件html。就连我联系的向导也这么做了，但它很旧。今天的应用程序不是这样构建的，尤其是棱角风格的框架。

这些框架是为了跟踪和操作DOM和节点值而构建的。它们可以快速更新DOM和插值值，但这意味着它们必须跟踪所有的东西。

这些框架被设计成页面上有尽可能少的HTML。这意味着他们可以花费更多的资源“观察”，准备呈现想要的视图，并在需要看上去不同的时候尽快交换HTML。

这不是一个字面上的例子，但是假设框架在DOM中的每个元素上都放置了一个侦听器。有一个可测量的资源负载差异只是呈现500个没有侦听器的元素，现在呈现500个元素并应用500个侦听器.问一个有角度的开发者，当你点击1k的观看元素时会发生什么。

当然，这可能不适用于您的应用程序。但是你可以想象，包括每一个工具提示都会很快失控。特别是如果它是用户控制的内容，或者是没有分页而填充的表。

这是一个很长的说法..。您应该拥有任意数量的<li>，但是应该有一个工具提示组件。工具提示的“状态”应该通过各种方式传递给它的道具来管理。您可以使用数据--但很可能是因为它的角度--您应该传递aria-隐藏状态、唯一ID、它的显示: state及其内容( innerHTML)。

此外，您还必须测试和管理焦点。取决于用户的屏幕读取器是如何设置或如何使用的，他们将使用命名元素进行导航，因此由于您使用的嵌套结构，它们有可能跳过您想要阅读的内容。您可以使用aria和角色属性来管理这一点，以确保屏幕读取器在正确的元素上触发预期的代码。

即。它们击中<li>是因为它是一个命名元素，它读取"12345“，因为这是它找到的第一个节点值.但是，在到达嵌套提示本身的工具提示之前，不会触发工具提示。操作的顺序应该是，在任何屏幕读取器设置中最有可能被选中的<li>是由工具提示包装的aria标记的。与<label for="">相同的概念。

有关Aria角色和范围管理的完整独家消息，请参阅- https://www.levelaccess.com/how-not-to-misuse-aria-states-properties-and-roles/。

如果列表有多个值，我会将代码呈现的代码片段组合在一起。大声读出下面的HTML，每个元素..。

<ul>
  <li>
    12345
    <span aria-labelledby="number-tooltip">
      <div>
        <div id="number-tooltip" role="tooltip">
          This is a number
        </div>
      </div>
    </span>
  </li>
  <li>
    some string
    <span aria-labelledby="string-tooltip">
      <div>
        <div id="string-tooltip" role="tooltip">
          This is a string
        </div>
      </div>
    </span>
  </li>
  <li>
    some string
    <span aria-labelledby="string-tooltip">
      <div>
        <div id="string-tooltip" role="tooltip">
          This is a string
        </div>
      </div>
    </span>
  </li>
  <li>
    some string
    <span aria-labelledby="string-tooltip">
      <div>
        <div id="string-tooltip" role="tooltip">
          This is a string
        </div>
      </div>
    </span>
  </li>
  <li>
    some string
    <span aria-labelledby="string-tooltip">
      <div>
        <div id="string-tooltip" role="tooltip">
          This is a string
        </div>
      </div>
    </span>
  </li>
</ul>

没能挺过去对吧？想象一下你就是这样浏览互联网的。现在，由于Aria的缘故，它要好得多，但是如果它没有正确地实现，并且从可用性的角度进行了测试，那么您最终可能会无意中为用户提供准确的体验。

这听起来像是很多工作。是的，但一旦你第一次做了，第二次就快多了。阅读上面的工具提示教程，并将这些概念转换到您的角度工具提示中，您将实际上解决了一个人与人之间的交互障碍，并满足了您的Aria检查清单。