2

The Problem

When the parent div gets focus, the entire contents of the div are read twice instead of once. In addition "clickable" gets read six times instead of one.

This problem occurs in Google Chrome only.

I'm pretty horrible at accessibility and trying to get better, so feel free to rip apart what I have here.

These ARE the Droids I'm Looking For

I'm looking for a way to have Chrome read these contents only once, and preferably only say "clickable" once instead of six times as I am sure this would be immensely annoying to any screen read user.

The Markup:

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

How this works:

So essentially anytime the parent div with the tabindex="0" attribute gets focus the tooltip is shown via CSS. It is also shown on hover of the parent div, and when the icon is clicked the open class is toggled which will keep it open regardless of the users mouse interactions.

So the vast majority of the functionality here falls on default browser behavior and CSS with very little JavaScript in the mix.

It might be helpful to note that I am using Angular 4 here, hence the seemingly strange markup that the average developer may not be familiar with.

Actual Tooltip Content:

Bob Is A Bob

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

What NVDA Outputs:

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

Any help would be greatly appreciated!

4

2 回答 2

3

当 NVDA 在一个浏览器中出现异常时，我会查看对象的结构，看看是否可以重新格式化它而不会丢失其他浏览器的工作内容。由于内容与许多“此项目可点击”公告重复，这可能是由于tabindex=0围绕内容的包装器以及触发器。尝试将内容放在包装器 div 之外（立即）。

或者，它可能会重复内容，因为文本位于 InnerHTML 属性中（我猜 Angular 会采用该属性值并将其放入元素中？），但这似乎不太可能，因为我认为它是一个问题火狐也是如此。

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

于 2017-07-11T08:40:58.493 回答
-2

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

于 2017-12-13T19:13:13.370 回答