激活contentEditable时光标跳过仅屏幕阅读器p标签的问题求助

针对激活main标签contentEditable后，光标跑到隐藏的.screen-reader-only段落里的问题，这里有几个可行的解决思路：

• 给隐藏元素添加不可聚焦属性
  给屏幕阅读器专用的<p>标签加上tabindex="-1"，让它无法被光标选中，编辑时浏览器会自动定位到可见内容上：

  <p class="screen-reader-only" tabindex="-1">Page 4 and 5</p>
  

  这个操作不会影响屏幕阅读器对该元素的读取，tabindex="-1"仅禁止键盘聚焦，读屏器仍能正常识别它。

• 手动指定光标位置
  在给main设置contentEditable="true"后，通过Range和Selection API手动将光标定位到第一个可见文本节点。假设main内第一个可见元素是普通段落，示例代码如下：

  // 假设已获取main元素引用为mainEl
  mainEl.contentEditable = true;
  const firstVisibleEl = mainEl.querySelector(':not(.screen-reader-only)');
  if (firstVisibleEl) {
    const range = document.createRange();
    const selection = window.getSelection();
    range.setStart(firstVisibleEl.firstChild, 0);
    range.collapse(true);
    selection.removeAllRanges();
    selection.addRange(range);
  }
  

• 优化隐藏元素的交互隔离
  在现有.screen-reader-only样式基础上，新增pointer-events: none属性，确保元素完全不响应任何交互：

  .screen-reader-only {
      position: absolute;
      width: 1px;
      height: 1px;
      padding: 0;
      margin: -1px;
      overflow: hidden;
      clip: rect(0, 0, 0, 0);
      white-space: nowrap;
      border: 0;
      pointer-events: none; /* 新增属性 */
  }
  

优先推荐第一种方案，操作简单且不会破坏屏幕阅读器的可用性。

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