0

这是我的代码片段

div { border: 1px solid orange; margin: 10px; }
<div id="header" tabindex="0">Header</div>
<div id="slats-component" tabindex="0">
  <div id="totals-wrapper">Total [2]</div>
  <div id="slats-component-body">
    <div id="slat" tabindex="0">Slat1</div>
    <div id="slat" tabindex="0">Slat2</div>
  </div>
</div>

我只使用 NVDA 并且只用于 FireFox。

这是实际行为（您所做的/关注的元素 id/NVDA 读取的内容）：

  • 前进时（使用Tab）：
    1. 导航到页眉/页眉/页眉
    2. Tab/板条组件/ 总计 [2]，板条 1，板条 2
    3. Tab/板条1 / 板条1
    4. Tab/板条2 / 板条2
  • 向后移动时（使用Shift + Tab）：
    1. 导航到 Slat 2 / slat2 / Slat 2
    2. Shift + Tab/板条1 / 板条1
    3. Shift + Tab/板条组件/ [无]
    4. Shift + Tab/页眉/页眉

实际行为：在第 3 步向后移动时，NVDA 没有读取任何内容

预期行为：在同一步骤 NVDA 读取：Total [2]，Slat 1，Slat 2

纯 CSS/HTML 解决方案更可取。同时，上面的 html-snippet 是 AngularJS 指令模板的一部分，所以其他解决方案也是可能的。

4

0 回答 0