Question

我有一个使用angular开发的网页。在页面上，我有一个表，该表由控制器循环填充，具体取决于特定单元格的值，我正在对该单元格使用ng-include嵌入工具提示。在这种情况下，工具提示可能会包含在表的多行中，在这种情况下，ax工具会抱怨该工具提示的唯一属性ID违例。有没有建议的方式来处理这种情况。

例如插入一个简单的示例。可以说我有一个getValues（）方法，该方法返回可以是字符串或数字的值列表，并且需要将工具提示与这些值相关联以提示它们是数字还是字符串。

[1，“ test”，2，“ test2”]->输出就像 1（数字提示）测试（字符串的工具提示） 2（数字提示） test2（字符串的工具提示）

<ul ng-controller="Ctrl">
    <li ng-repeat="value in values">
        {{value}} 
        <span ng-show="isNumber(value)" aria-labelledby="number-tooltip">
            <div ng-include="number-tooltip.ng">
            </div>
        </span>
        <span ng-show="isString(value)" aria-labelledby="string-tooltip">
            <div ng-include="string-tooltip.ng">
            </div>
        </span>
    </li>
</ul>

工具提示文件

<div id="number-tooltip" role="tooltip">
    This is a number
</div>


<div id="string-tooltip" role="tooltip">
    This is a string
</div>

Answer 1

是的，您必须创建唯一ID的...期限。

不，Angular本身不这样做……https://github.com/angular/angular/issues/5145

不，您不能仅附加循环索引。每次循环刷新或在其他地方调用该循环时，它将再次从索引0开始。您必须添加另一个累积参数，以确保其100％唯一...通常，这是通过使计数器var在每次打开循环时都进行计数来实现的。 {{counterVar + $ index}}。有Angular插件可以做到这一点，请查看npm。

不，您要问的问题不是您的最大问题。您正在解决可访问性合规性问题，而没有考虑人对您的应用的实际可用性屏幕阅读器和适当的代码体系结构，以避免出现滚雪球般的反模式。

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

反模式是...

我只有一次代码，但是由于我使用ng-include来插入工具提示文件在dom树得到多个位置的多个位置重复具有给定ID的相同html实例。 – 10月5日在Anu 23:10

如果我对您的理解正确，那就是说你只有一个每个工具提示中的文件，但是您每次都在重复注入使用工具提示的实例。

屏幕阅读器将阅读所有内容。这意味着您必须使用aria-hidden属性管理每个元素的状态。这意味着您将不得不编写更多东西。您将不得不考虑向后兼容性（可能利用display：none而不是aria-hidden）。

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

此链接是您逐步了解构建屏幕阅读器可用工具提示所需的内容。

我认为您正在使用的反模式是一遍又一遍地注入工具提示组件html。即使是我链接的指南也可以，但是它已经很旧了。这不是当今构建应用程序的方式，尤其是Angular样式框架。

这些框架旨在跟踪和操纵DOM和节点值。他们可以快速更新DOM和插值值，但这意味着他们必须跟踪所有内容。

这些框架旨在使页面上的HTML尽可能少。这意味着他们可以花更多的资源“观看”，准备渲染所需的视图，并在需要看起来不同的情况下尽快换出HTML。

这不是一个字面的示例，但是可以想象框架在DOM中的每个元素上都放置了一个侦听器。仅在不使用侦听器的情况下呈现500个元素，现在呈现500个元素并应用500个侦听器之间存在可测量的资源负载差异……问Angular开发人员，当您击中1k个被监视的元素时会发生什么。

当然，这可能不适用于您的应用。但是您可以想象ng（包括每个工具提示）如何快速失控。尤其是当它是用户控制的内容或表格没有分页地填充时。

这是一个很长的说法……您应该拥有尽可能多的<li>，但是应该有一个工具提示组件。工具提示的“状态”应通过以多种方式传递给它的道具进行管理。您可以对数据进行处理，但是很可能是因为它是Angular，所以应该使用Angular组件传递隐藏状态的状态，唯一ID，其显示状态和内容（innerHTML）。

此外，您还必须测试和管理焦点。根据用户屏幕阅读器的设置或使用方式，他们将使用命名的Elements进行导航，因此由于您使用的嵌套结构，他们有可能会跳过您想阅读的内容。您可以使用aria和role属性对此进行管理，以确保屏幕阅读器位于正确的元素上以触发所需的代码。

即。他们击中了<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，它会更好，但如果未正确实施它并从可用性角度进行测试，您可能会无意间为用户提供准确的体验。

这听起来像很多工作。是的，但是一旦您第一次进行，第二次就会更快。通读上面的工具提示教程，并将这些概念转换为Angular工具提示，您将实际上解决了人机交互的障碍，并满足了Aria QA检查清单的要求。

如何在斧头工具中解决唯一ID属性值警告

1 个答案: