内容在元素焦点上读取两次+大量“可点击”

Question

问题

当父div获得焦点时，div的全部内容将被读取两次而不是一次。此外，“可点击”被读取六次而不是一次。

Google Chrome 仅发生此问题。

我在可访问性方面非常糟糕并且想要变得更好，所以请随意撕掉我在这里的东西。

这些 ARE 我正在寻找的机器人

我正在寻找一种方法让Chrome只读取一次这些内容，最好只说“可点击”一次而不是六次，因为我相信这对任何屏幕阅读用户来说都会非常烦人。

标记：

<div #tooltip class="citi-tooltip {{open ? 'open' : ''}}" tabindex="0">

  <!-- trigger icon -->
    <i 
      #tooltipTrigger
      (click)="toggleTooltipContent()"
      class="tooltip-toggle icon-svg svg-question"
      [attr.aria-label]="buttonLabel ? buttonLabel : null"
    ></i>

  <!-- content wrapper -->
  <div 
    #tooltipContent 
    [id]="tooltipId"
    class="tooltip-content {{position}}"
    [ngStyle]="styles"
    role="tooltip"
  >

    <!-- arrow -->
    <span class="tooltip-arrow"></span>

    <!-- header -->
    <p class="tooltip-header {{size}}" [innerHtml]="tooltipTitle"></p>

    <!-- content body -->
    <div class="tooltip-body {{size}}" >
      <!-- tooltip body section -->
      <div *ngIf="tooltipBody" [innerHtml]="tooltipBody"></div>

      <!-- ngcontent body section -->
      <div *ngIf="!tooltipBody"><ng-content></ng-content></div>
    </div>

  </div>
</div>

如何运作：

因此，基本上只要具有tabindex="0"属性的父div获得焦点，工具提示就会通过CSS显示。它也显示在父div的悬停上，当点击图标时，切换open类将使其保持打开状态，无论用户的鼠标交互如何。

因此，绝大多数功能都属于默认的浏览器行为和CSS，其中混合使用非常的JavaScript。

注意我在这里使用Angular 4可能会有所帮助，因此看似奇怪的标记是普通开发人员可能不熟悉的。

实际工具提示内容：

Bob Is A Bob

Bob is a bobbing bobber that bobs like a bobbing bob. Bob. That is all

NVDA输出的内容：

Bob Is A Bob Bob is a bobbing bobber that bobs like a bobbing bob. Bob. That is all
clickable
clickable

clickable
clickable

clickable
Bob Is A Bob
clickable
Bob is a bobbing bobber that bobs like a bobbing bob. Bob. That is all

非常感谢任何帮助！

Answer 1

当NVDA在一个浏览器中变得奇怪时，我会查看对象的结构，看看我是否可以重新格式化它而不会丢失对其他浏览器起作用的内容。由于内容正在重复播放，其中包含大量“此项可点击”的公告，这可能是由于内容周围的tabindex=0包装器以及触发器所致。尝试将内容放在那个包装div之外（紧接着）。

或者它可能重复内容，因为文本在InnerHTML属性中（我猜是Angular接受该属性值并将其放在元素中？），但这似乎不太可能，因为我希望它是Firefox中也存在问题。

找出答案的最佳方法是在Chrome的开发工具检查器中查看HTML的外观，并将其与Accessibility extension工具中显示的内容进行比较。

Answer 2

NVDA可以选择关闭可点击的通知。打开NVDA按插入 + Ctrl + D 然后取消选中"Clickable" NVDA将多次阅读Clickable 。