JAWS 在 Win10 上的 MS Edge 中多次读取 role= "img" 的表的咏叹调标签

Question

我有一个包含html bar图表的 table元素，我希望屏幕读取器阅读其文本描述，因此我正在使用此方法：

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

在Mac上的VoiceOver中，它读取标签并跳过表中其余内容。但是，在Windows 10上具有MS Edge的颚中，它在表中的每个td和嵌套表中都读取"图形表描述"。这是一个简化的示例：

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

在同一台Windows计算机上，IE 11不会发生此问题；它读取"图形表描述"，只是一次。

我还尝试在表中的td和tr元素中添加aria-hidden="true"，tabindex="-1"和role="presentation"，但没有帮助。

我做错了吗？有更好的方法可以实现这一目标吗？我想知道这是否是下巴的错误...

Answer 1

从评论部分继续到答案部分，因为这可能是一个解决方案（并且太长时间了，无法发表评论）。

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

啊，这可能是问题的一部分。如果使用<table role="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解析器检查器运行它。

除了内表上的role="presentation"外，您还可以添加aria-hidden="true"以从屏幕阅读器中隐藏表，否则屏幕读取器用户可以在"演示"表中导航所有文本元素（如果有）。