列表框选完选项后如何将焦点转移至指定div？适配Voiceover与Jaws

嘿，这个场景我之前在做无障碍项目时碰到过，结合VoiceOver和JAWS的特性，咱们一步步来解决你的问题：

一、移除已选选项的焦点 #

首先要主动让选中的选项失去焦点，这一步很关键，不然旧焦点可能会和新焦点冲突：

• 找到当前选中的选项元素，调用它的blur()方法，比如：

  const selectedOption = document.querySelector('.sidebar-option.active');
  selectedOption.blur();
  

• 注意：如果你的选项是自定义元素（不是原生<button>/<a>），要确保它本身带有tabindex="0"，这样它才能被聚焦，blur()也才能生效。

二、让#focushere成功获取焦点（解决focus()无效的核心） #

很多时候focus()不生效，要么是元素不可聚焦，要么是无障碍工具没识别到，试试这些方法：

1. 确保元素可聚焦：给#focushere添加tabindex="-1"，这样它可以通过JS主动聚焦，但不会被Tab键遍历，不破坏原有的Tab顺序：

   const focusHere = document.getElementById('focushere');
   focusHere.setAttribute('tabindex', '-1');
   

2. 先显示元素再聚焦：如果#focushere一开始是隐藏的（比如display: none），必须先让它可见，再调用focus()——隐藏元素是无法获取焦点的：

   // 先显示元素
   focusHere.style.display = 'block';
   // 再聚焦
   focusHere.focus();
   

3. 辅助无障碍工具识别：给#focushere加上合适的ARIA属性，比如aria-label或者确保内部有可朗读的文本，同时可以配合scrollIntoView()让元素进入视窗，方便屏幕阅读器定位：

   focusHere.scrollIntoView({ behavior: 'smooth', block: 'nearest' });
   

4. 验证焦点状态：可以在调用focus()后打印当前活跃元素，确认焦点是否真的转移了：

   console.log('当前焦点元素:', document.activeElement);
   

三、适配VoiceOver/JAWS的额外建议 #

• 自定义侧边面板要使用正确的ARIA角色：给面板容器加role="listbox"，每个选项加role="option"，这样屏幕阅读器才能正确识别这是一个选项列表，焦点切换逻辑更符合用户预期。
• 当用户从#focushere返回侧边面板时，记得把焦点恢复到之前选中的选项上，比如监听Esc键事件，提升无障碍体验。

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