屏幕阅读器读取手风琴tabpanel内容的方法及代码问题排查

问题描述 #

我有一段处于展开状态的手风琴组件代码（为简洁仅保留单个元素，实际会有多个），当前屏幕阅读器无法读取面板中的“My Copy”文本，仅能读取标题。但如果在面板中放入带表单输入框的fieldset，就能轻松通过Tab键聚焦到输入框。请问我哪里出错了？为何屏幕阅读器无法聚焦并读取这段文本？

原代码：

<div class="js-accordion" aria-multiselectable="false" role="tablist">           
    <h2 class=""><button class="" role="tab" id="accordionznntk0bkn5d_tab1" aria-controls="accordionznntk0bkn5d_panel1" aria-selected="true" type="button" aria-expanded="true">
        My title
    </button></h2>
    <div class="js-accordion__panel" role="tabpanel" aria-labelledby="accordionznntk0bkn5d_tab1" id="accordionznntk0bkn5d_panel1">
        <div class="">
              <p>My copy </p>
        </div>
    </div>
</div>

问题原因 #

1. 可聚焦元素限制：Tab键默认只遍历原生可聚焦元素（比如按钮、输入框、链接、带tabindex的元素等），而<p>这类纯文本标签不属于可聚焦元素，用户无法通过Tab键聚焦到面板内的文本区域。屏幕阅读器通常需要焦点落在元素上，或者用户主动使用浏览模式（如NVDA的Ctrl+向下箭头）才会读取纯文本内容，这就导致普通用户可能无法触发文本读取。
2. Tabpanel本身不可聚焦：虽然给面板设置了role="tabpanel"和正确的aria-labelledby关联标题，但tabpanel本身不是原生可聚焦元素，没有焦点进入面板的话，屏幕阅读器不会自动主动读取面板内的纯文本。

而当面板里有带输入框的fieldset时，输入框是原生可聚焦元素，Tab键会定位到它，此时屏幕阅读器会读取输入框的内容，同时关联fieldset的相关标签，所以能正常被读取。

解决方案 #

方案1：给Tabpanel添加可聚焦属性 #

直接给tabpanel容器加上tabindex="0"，让面板本身成为可聚焦元素。当用户Tab到面板时，屏幕阅读器会先读取关联的标题（通过aria-labelledby），然后自动读取面板内的文本内容。

修改后的代码：

<div class="js-accordion" aria-multiselectable="false" role="tablist">           
    <h2 class=""><button class="" role="tab" id="accordionznntk0bkn5d_tab1" aria-controls="accordionznntk0bkn5d_panel1" aria-selected="true" type="button" aria-expanded="true">
        My title
    </button></h2>
    <div class="js-accordion__panel" role="tabpanel" aria-labelledby="accordionznntk0bkn5d_tab1" id="accordionznntk0bkn5d_panel1" tabindex="0">
        <div class="">
              <p>My copy </p>
        </div>
    </div>
</div>

方案2：给文本容器添加可聚焦属性 #

如果希望用户直接聚焦到文本区域，可以给包裹<p>的div或者<p>标签本身加上tabindex="0"，这样Tab键会直接定位到文本容器，屏幕阅读器会读取里面的内容。

示例：

<div class="js-accordion__panel" role="tabpanel" aria-labelledby="accordionznntk0bkn5d_tab1" id="accordionznntk0bkn5d_panel1">
    <div class="" tabindex="0">
          <p>My copy </p>
    </div>
</div>

方案3：引导用户使用屏幕阅读器浏览模式 #

可以在手风琴标题或面板内添加提示，告诉屏幕阅读器用户可以使用浏览模式（如NVDA按Ctrl+向下箭头、VoiceOver按Ctrl+Option+向下箭头）来查看面板内容，但这种方式依赖用户对屏幕阅读器的操作熟悉度，体验不如前两种直接。

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