<li>与<a>的hover状态无障碍性有差异吗？li设hover是否需担忧？

核心差异与潜在问题 #

hover状态绑定在<li>还是<a>上，对无障碍体验的影响主要体现在键盘用户和辅助技术使用者身上：

• 键盘交互缺失反馈：<a>是原生可聚焦元素，默认支持Tab键跳转聚焦；但<li>本身不可聚焦（除非手动添加tabindex）。如果hover效果只绑定在<li>上，键盘用户通过Tab选中<a>时，不会触发对应的视觉反馈，导致他们无法直观判断当前聚焦的交互目标，造成认知混乱。
• 辅助技术识别断层：屏幕阅读器等工具会优先识别原生交互元素（比如<a>）的状态变化。若hover效果仅在<li>上，辅助技术可能无法将状态变化关联到实际的交互目标<a>，使得依赖辅助工具的用户无法感知hover状态。

关于W3飞出式菜单教程的说明 #

教程中把hover绑定在<ul>上，是从操作范围便捷性的设计角度出发——让用户把鼠标放在菜单区域内任意位置都能展开子菜单，降低操作门槛。但这并不意味着可以忽略<a>元素的状态反馈，正确的做法是兼顾两种场景：

• 给容器（<li>/<ul>）添加hover触发菜单展开的逻辑，满足鼠标用户的操作便捷性；
• 给<a>元素单独设置:hover和:focus状态样式，保证键盘用户能清晰感知焦点位置。

优化建议 #

• 必须给<a>元素设置独立的:hover和:focus视觉状态，确保键盘、鼠标用户都能明确感知交互目标的状态变化。
• 如果用<li>作为hover触发容器，需给<li>添加tabindex="0"使其可聚焦，并绑定:focus状态，避免键盘用户无法触发菜单展开的问题。
• 始终以实际交互目标（<a>）的可感知性为核心，这是无障碍设计的基础原则。

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