购物车无障碍设计：是否需为金额项添加tabindex="0"？

从无障碍设计（WCAG标准）的角度，直接给出结论：优先选择第2种不加tabindex="0"的写法，各选项的具体分析如下：

• 选项1（给每个span加tabindex="0"）：完全没必要。购物车金额属于纯展示类信息，<ul>和<li>已经是语义化的列表结构，屏幕阅读器可以自动遍历读取每个列表项的完整内容。额外添加tabindex会让每个span成为键盘焦点目标，增加键盘用户的tab操作次数，反而降低浏览效率，属于画蛇添足。

• 选项2（不加tabindex="0"）：这是最符合无障碍原则的写法。语义化的列表结构能让屏幕阅读器清晰识别内容层级，不管是键盘用户还是屏幕阅读器用户，都能顺畅获取完整的金额信息，没有多余的焦点干扰，简洁高效。

• 选项3（拆分项目名和金额分别加tabindex）：严重不推荐。这种写法会把原本完整的一项信息拆成两个焦点，用户需要多次切换焦点才能看完一组金额说明，打断信息的连贯性，极大影响使用体验，违背无障碍的易用性要求。

• 选项4（结合sr-only类）：如果需要优化屏幕阅读器对金额的朗读体验（比如让阅读器读出“40美元”而不是单纯的“$40”），这个语义补充的思路是对的，但不需要添加tabindex="0"。sr-only类的作用是给屏幕阅读器提供额外语义，视觉上隐藏，本身不影响焦点。优化后的写法可以调整为：

<li>
  Merchandise: 
  <span aria-hidden="true">$</span>40<span class="sr-only"> 美元</span>
</li>

既保持列表项的完整性，又让屏幕阅读器的朗读更清晰，同时不会增加多余焦点。

内容的提问来源于stack exchange，提问作者Haradzieniec