内容在元素焦点 + 很多 "clickable" 上被阅读两次

Question

问题

当父级 div 获得焦点时，div 的全部内容将被读取两次而不是一次。此外 "clickable" 被读取了六次而不是一次。

此问题只出现在GoogleChrome.

我在可访问性和尝试变得更好方面非常糟糕，所以请随意拆开我这里的东西。

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

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

标记：

<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>

这是如何工作的：

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

所以这里的绝大部分功能都依赖于默认的浏览器行为，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 在一个浏览器中表现奇怪时，我会查看对象的结构，看看我是否可以重新格式化它而不会丢失对其他浏览器有效的内容。由于内容会重复出现很多 "this item is clickable" 公告，这可能是由于内容和触发器周围有 tabindex=0 的包装器。尝试将内容放在包装 div 之外（紧接其后）。

或者，它可能会重复内容，因为文本位于内部 HTML 属性中（我猜 Angular 获取该属性值并将其放入元素中？），但是似乎不太可能，因为我希望它在 Firefox 中也是一个问题。

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

Answer 2

NVDA 可以选择关闭可点击的公告。打开 NVDA 按 Insert+Ctrl+D 然后取消选中 "Clickable" NVDA 会多次读取 Clickable。

内容在元素焦点 + 很多 "clickable" 上被阅读两次

Content being read twice on focus of element + lots of "clickable"

google-chrome

accessibility

nvda

问题

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

标记：

这是如何工作的：

实际工具提示内容：

NVDA 输出的内容：