Iframe 如何让JAWS在TINYMCE编辑器中识别和读取表格

Iframe 如何让JAWS在TINYMCE编辑器中识别和读取表格,iframe,accessibility,wai-aria,jaws-screen-reader,Iframe,Accessibility,Wai Aria,Jaws Screen Reader,我试图让JAWS在html页面中读取表格(页面处于编辑模式)。 表格在iframe中,我认为这就是JAWS无法识别表格的原因 在呈现表之后,我向表添加了一些属性 <caption> <table role="grid" aria-live="polite" tabindex="0"> <tr role="row"></tr> <th role="columnheader"></th> <td role="gridcel

我试图让JAWS在html页面中读取表格(页面处于编辑模式)。 表格在iframe中,我认为这就是JAWS无法识别表格的原因

在呈现表之后,我向表添加了一些属性

<caption>
<table role="grid" aria-live="polite" tabindex="0">
<tr role="row"></tr>
<th role="columnheader"></th>
<td role="gridcell"></td>
</table>

此表处于编辑模式。所以用户可以编辑此表并添加更多行。 我还需要做什么才能让JAWS识别表格并读取所有单元格。 请找到下面显示整个html结构的图像

更新:此页面正在使用所见即所得(tinymce)编辑器。主体是contenteditable=true,表位于其中,这就是导致问题的原因。为了验证它,我从主体中删除了contenteditable属性,JAWS能够识别表,但是我根本无法使用编辑器。 所以现在的问题是如何使JAWS在content可编辑元素中读取表。


提前谢谢。

我一直都有iFrame中的表格,而且JAWS没有问题。我的第一个建议是去掉所有多余的aria属性。您过度使用了它们,实际上违反了规范。您不应该为本机元素指定角色。(w3.org网站目前已关闭。我可以在网站备份时提供url。)

  • 从第三个
    中删除colspan=1。默认为一列
  • 从所有
    中删除colspan=1
  • 对于测试,我也会

  • 从所有单元格和表中删除tabindex
  • 然后加上

  • scope=col to
  • 然后用虚拟PC光标测试钳口。使用“T”导航到表。然后可以使用ctrl+alt+arrow在表中移动。(也可以使用表格图层命令ins+space、T,然后使用简单的箭头键四处移动)


    如果您导航到表中,然后向左和向右移动,您应该会听到在数据值之前读取的列标题(如果您将scope=col添加到
    ,尽管即使您没有scope=col,JAWS也可能会宣布列标题)。

    走出门,但可能会删除
    角色=“grid”
    看看你能得到什么。
    选项卡index
    应该是不必要的。有一个URL进行测试将使这更容易。另外,避免页面上出现多个ARIA活动区域。这有时会混淆SRs。请在此处找到url:请单击编辑按钮并进入编辑模式以测试场景-谢谢。我完全按照你的指示做了。我的问题陈述/申请中似乎缺少一些重要的东西。为了更好地演示我的问题,我旋转了这个实例。如果您想体验该问题,请单击给定链接上的编辑按钮。请注意,给定链接的视图模式工作得非常好,但不是编辑模式。