时间戳

首页 > 解决方案 > 如何让屏幕阅读器完成表列名的播报，暂停再播报列的补充信息？

javascript - 如何让屏幕阅读器完成表列名的播报，暂停再播报列的补充信息？

问题描述

我们有一个表格，其中一列（将来可能还有其他列）在列名旁边有一个信息图标（ℹ️）。当您将鼠标悬停在它上面时，会出现一个工具提示，其中显示有关列中值的含义的其他信息。

为了使图标交互可访问，我们已将其设置为当列标题聚焦时，启用触发弹出窗口的热键。我们唯一的问题是我们需要宣布列的热键，但是使用aria-label, 或aria-describedby图标（位于列标题内但与标题分开）使屏幕阅读器将其宣布为列的标题。

他们读回来是这样的：

指标按“i”键获取更多信息列标题第 8 列

我们希望它在读取列信息后短暂暂停后读取“按'i'键以获取更多信息”，因为此文本仅在用户第一次遇到此特定表时才真正需要，并且将来偶尔会出现如果用户忘记了交互。

我知道我可以设置一些复杂的东西，比如有一个全局div的aria-role="status"，aria-live="polite"然后用我们需要的公告更新里面的文本，但是当我们使用类似的机制来访问加载微调器、状态更新等时，这很可能会导致问题.

我想知道是否有一种标准的方法来实现这一点，因为我自己找不到任何相关的东西。

这是一个仅包含列标题的片段来说明问题。 

.row {
    width: 400px;
    height: 35px;
    font-family: sans-serif;
}

.column-header {
    width: 100px;
    height: 35px;
    float: left;
    border: solid 1px #ccc;
    display: flex;
    align-items: center;
    justify-content: center;
    position: relative;
}

c-icon
{
  position: absolute;
  right: 2px;
}
<div role="grid">
  <div role="rowgroup">
    <div role="row" class="row">
      <div
        class="column-header"
        role="columnheader"
        aria-hidden="false" aria-disabled="false" aria-readonly="true"  tabindex="0"
      >
        <span role="presentation">
          ID
        </span>
      </div>
      <div
        class="column-header"
        role="columnheader"
        aria-hidden="false" aria-disabled="false" aria-readonly="true"  tabindex="0"
      >
        <span role="presentation">
          Name
        </span>
      </div>
      <div
        class="column-header"
        role="columnheader"
        aria-hidden="false" aria-disabled="false" aria-readonly="true"  tabindex="0"
      >
        <span role="presentation">
          Metrics
        </span>
        <c-icon
          aria-label=", Press the 'i' key for additional information"
          role="none"
          style="width: 23px; height: 23px;"
        >
          <svg
            version="1.1"
            class="has-solid"
            viewBox="0 0 36 36" preserveAspectRatio="xMidYMid meet"
            xmlns="http://www.w3.org/2000/svg"
            xmlns:xlink="http://www.w3.org/1999/xlink"
            focusable="false"
          >
            <path class="clr-i-solid clr-i-solid-path-1"
              d="M18,6A12,12,0,1,0,30,18,12,12,0,0,0,18,6Zm-2,5.15a2,2,0,1,1,2,2A2,2,0,0,1,15.9,11.15ZM23,24a1,1,0,0,1-1,1H15a1,1,0,1,1,0-2h2V17H16a1,1,0,0,1,0-2h4v8h2A1,1,0,0,1,23,24Z">
            </path>
          </svg>
        </c-icon>
      </div>
    </div>
  </div>
</div>

标签： javascripthtml-tableaccessibility

解决方案

您应该能够为列标题提供一个aria-label覆盖其内容的aria-describedby属性，以及一个引用图标标签的属性。

我相信这会导致屏幕阅读器在遍历列中的单元格时仅宣布列标题标签，并在聚焦时宣布其标签及其描述。

<div
  class="column-header"
  role="columnheader"
  aria-label="Metrics"
  aria-describedby="column-header-metrics-info-icon"
  aria-readonly="true"
  tabindex="0">
  <span role="presentation">
    Metrics
  </span>
  <c-icon
    role="none"
    id="column-header-metrics-info-icon"
    aria-label="(Press the 'i' key for additional information)"
    style="width: 23px; height: 23px;">
    <svg ... />
  </c-icon>
</div>

请务必通读 ARIA Tooltip小部件文档和此博客文章以获取指导。

aria-keyshortcuts您可以通过添加属性来增加键盘快捷键的可发现性。键盘快捷键可能不适用于语音控制、开关控制、触摸设备上的屏幕阅读器，因此请确保信息也可以通过其他方式获得。

推荐阅读