符合WCAG标准的侧面板带button角色列表元素的键盘可访问性咨询

核心区分逻辑 #

• Tab键：用于独立功能模块之间的跳转，每个功能模块仅占用1个Tab停点，减少用户重复操作成本，符合WCAG 2.4.3（焦点顺序）、2.1.1（键盘可访问）要求
• 方向键：用于同一逻辑分组内同质操作项的切换，用户进入该分组后，仅通过方向键即可完成组内选项的快速切换，避免Tab停点过多导致的操作负担

三类列表项的导航规则 #

1. 仅包含checkbox/ radiobutton的列表项 #

• 给列表父容器绑定role="radiogroup"（单选场景）或role="group"（多选场景），整个列表仅占用1个Tab停点
• 用户通过Tab进入列表后，直接用上下方向键切换不同列表项，按空格键切换选中状态即可，无需额外按Tab操作

2. 包含checkbox/ radiobutton以及跳转其他面板链接的列表项 #

• 方向键负责不同列表项的主交互节点（即checkbox/radiobutton）之间的切换，切换时焦点默认落在主交互节点上
• 若需要操作当前列表项内的跳转链接，按一次Tab即可将焦点从主交互节点切到同项的链接上，再按一次Tab即可切到下一个列表项的主交互节点，或跳出侧面板到其他功能模块

3. 包含两个已定义交互行为的图标/按钮的列表项 #

• 方向键同样负责不同列表项之间的切换，焦点默认落在每个列表项的第一个交互按钮上
• 按Tab可在同列表项的两个按钮之间顺序切换，按Esc可快速回到列表项主导航层级，继续用方向键切换其他列表项

实现注意事项 #

• 禁止为每个列表项单独设置Tab停点：若侧面板列表较长，会导致用户需要多次按Tab才能跳出面板，违反操作便捷性要求
• 所有焦点状态必须有可见的高亮标识，符合WCAG 2.4.7（焦点可见）要求
• 不得设置键盘陷阱：无论用户使用Tab还是方向键导航，都可以随时跳出侧面板区域，不会被困在面板内

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