Question

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

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

在Mac上的Voiceover中，它会读取标签并跳过表中的其余内容。但是，在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>

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

我还尝试将aria-hidden="true"，tabindex="-1"和role="presentation"添加到表中的td和tr元素中，但没有一个起作用。 / p>

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

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 parser checker运行它。

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

在Win10的MS Edge中，JAWS多次读取具有角色=“ img”的表的咏叹调标签

1 个答案: