对于具有role =“img”的表，JAWS在Win10上的MS Edge中多次读取aria-label

Question

我有一个包含HTML条形图的table元素，我希望屏幕阅读器读取它的文本描述，所以我使用这种方法：

 <table role="img" aria-label="table description">

在Mac上的画外音中，它会读取标签并跳过表格中的其余内容。但是在Windows 10上使用MS Edge的JAWS中，它会为表中的每个td以及嵌套表中的“图形表描述”进行读取。这是一个简化的例子：

    <table role="img" aria-label="table description">
        <tr>
            <td>
                row 1
            </td>
        </tr>
        <tr>
            <td>
                row 2
            </td>
        </tr>
    </table>

IE 11在同一台Windows计算机上不会发生此问题;它只读一次“图形表描述”。

我也尝试将aria-hidden="true"，tabindex="-1"和role="presentation"添加到表格中的td和tr元素中，但这些都没有帮助。

我做错了吗？有没有更好的方法来实现这一目标？我想知道这是否是JAWS中的一个错误......

Answer 1

从评论部分继续到答案部分，因为这可能是一个解决方案（并且太长而无法放入评论中）。

实际的<table>中有几个嵌套表

啊，这可能是问题的一部分。如果使用<table role="presentation">，“presentation”状态仅传递给表子元素（<thead>, <tbody>, <tfoot>, <tr>, <th>, <td>），但如果它到达嵌套表则停止。嵌套表也需要role="presentation"。

如果你使用相同的逻辑来使用role="img"，嵌套表将不会被视为图像，并且实际上会导致无效的html，因为<img>不能有任何子DOM元素。外表上的role="img"会使整个表格成为一个图像，所以嵌套的<thead>, <tbody>, <tfoot>, <tr>, <th>, <td>元素都将被忽略，但是一旦看到嵌套的<table>，那么你就会遇到问题。

我不确定以下内容是否有效：

<table role="img" aria-label="chart description">
  <!-- other table stuff -->

  <!-- nested table -->
  <table role="presentation">
  </table>
</table>

外表是一个图像，内表应该被忽略，但你仍然有一个图像内的元素（内表）。你必须通过html parser checker运行它。

除了内部表格上的role="presentation"之外，您还可以添加aria-hidden="true"以隐藏屏幕阅读器中的表格，否则屏幕阅读器用户可以浏览“演示”表格中的所有文本元素（如果有）。