此模块的图块中的标签在按下向下键箭头时未按正确顺序读取

Question

下面的代码包含多个 div，所以 jaws 可以通过 div 正确读取 div，但我想让 jaws 以不同的方式聚焦和阅读。

      <div class="row paddingBottom2Pcnt">
        <div class="col-xs-5">
            <label class="textBold textBold_desktop control-label">Date of Birth</label>
        </div>
        <div class="col-xs-7">
            <label class="textBold textBold_desktop control-label">Social Number
            </label>
        </div>
        <div class="col-xs-5">
            <label class="lblSecondary textTransformNone"> 08/08/1994
            </label>
        </div>
        <div class="col-xs-7">
            <label class="lblSecondary textTransformNone">
             XXX-XX-6745
            </label>
        </div>
    </div>

Jaws 通过 div 关注 div，但我希望第一个关注出生日期和那个值，然后是社会号码和那个值。有什么办法可以这样吗？

Answer 1

带有屏幕 reader 的向下箭头键（JAWS 和 NVDA）基本上会走 DOM (*)（文档 object 模型）所以无论您的 HTML 代码的顺序将是 JAWS 读取它的顺序。

因此，获得所需顺序的一种方法是更改代码的顺序，首先是 DOB，然后是日期，然后是 SSN 标签，然后是 SSN 号码。您可以使用 CSS 使事情正确排列。例如，用一个 parent <div> 容器代替四个 sibling <div> 元素，你可以有一个 <div> parent 用于两个 DOB 相关元素和另一个 <div> 容器用于 SSN 信息，这两个 <div> 元素是兄弟。

<div class="row paddingBottom2Pcnt">
  <div id="newParentContainer1">
    <div>
      <label class="textBold textBold_desktop control-label">Date of Birth</label>
    </div>
    <div>
      <label class="lblSecondary textTransformNone"> 08/08/1994</label>
    </div>
  </div>
  <div id="newParentContainer2">
    <div>
      <label class="textBold textBold_desktop control-label">Social Number</label>
    </div>
    <div>
      <label class="lblSecondary textTransformNone">XXX-XX-6745</label>
    </div>
  </div>
</div>

另一种选择是使用 table。您只包含了您想要的内容的小屏幕截图，但它可能是 table，其中第一列 header 是“出生日期”，第二列 header 是“社交号码”然后有两个数据值。

<table>
  <tr>
    <th scope="col">Date of Birth</th>
    <th scope="col">Social Number</th>
  </tr>
  <tr>
    <td>08/08/1994</td>
    <td>XXX-XX-6745</td>
  </tr>
</table>

向下箭头键仍会水平穿过 table，因此您会像原来的 DOM 一样听到两列 header 一个接一个，但屏幕 reader 用户可以选择在他们想要的任何方向上遍历 table。跨行或向下一列（例如，使用 ctrl+alt+arrowkey）。

(*) 屏幕 reader 确实在遍历可访问性树，而不是 DOM，但可访问性树与 DOM 的顺序相同。可访问性树通常是 DOM 的子集，不会包含 DOM 中的每个 元素（例如，具有 [=38= 的元素） ] display:none 在 DOM 但不在可访问性树中）。

此模块的图块中的标签在按下向下键箭头时未按正确顺序读取

Labels in tiles for this module not reading in correct sequence on down key arrow press

html

jaws-screen-reader