Bootstrap模态框内自定义MultiSelect组件在JAWS中重复朗读标题问题咨询

问题场景 #

自定义MultiSelect下拉组件嵌入Bootstrap模态框后，使用JAWS屏幕阅读器时，每次选择下拉选项都会重复朗读模态框标题；该问题仅出现在JAWS中，Windows Narrator无此现象，需求是让JAWS仅在组件首次聚焦时朗读一次模态框标题。

解决方案 #

1. 修正模态框的ARIA属性配置 #

确保模态框明确声明为模态对话框，避免JAWS重复识别区域：

• 添加aria-modal="true"属性，告诉屏幕阅读器当前是模态交互环境，焦点被限制在模态框内
• 确认aria-labelledby正确绑定到模态框标题元素，确保首次聚焦时正确朗读标题

示例代码：

<div class="modal fade" id="myModal" tabindex="-1" aria-labelledby="myModalTitle" aria-modal="true" role="dialog">
  <div class="modal-dialog">
    <div class="modal-content">
      <div class="modal-header">
        <h5 class="modal-title" id="myModalTitle">我的模态框标题</h5>
        <button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="关闭"></button>
      </div>
      <div class="modal-body">
        <!-- 自定义多选组件 -->
        <custom-multi-select 
          [options]="selectOptions"
          [(selected)]="selectedItems"
          aria-label="选择项目"
        ></custom-multi-select>
      </div>
    </div>
  </div>
</div>

2. 优化多选组件的焦点管理 #

当用户选择下拉选项后，确保焦点始终停留在多选组件的触发元素上，避免焦点跳转导致JAWS重新扫描模态框区域：

• 在组件内保存触发元素的引用
• 选择完成后，通过focus()方法将焦点放回触发元素

示例组件逻辑（Angular为例）：

import { Component, ViewChild, ElementRef } from '@angular/core';

@Component({
  selector: 'custom-multi-select',
  templateUrl: './custom-multi-select.component.html'
})
export class CustomMultiSelectComponent {
  @ViewChild('trigger') triggerElement!: ElementRef;
  selectedItems: string[] = [];
  selectOptions = [{label: '选项1'}, {label: '选项2'}, {label: '选项3'}];

  selectItem(option: {label: string}) {
    // 处理选择逻辑
    const index = this.selectedItems.indexOf(option.label);
    if (index === -1) {
      this.selectedItems.push(option.label);
    } else {
      this.selectedItems.splice(index, 1);
    }
    // 焦点放回触发元素
    setTimeout(() => {
      this.triggerElement.nativeElement.focus();
    }, 0);
  }
}

组件模板：

<div class="multi-select" role="combobox" aria-expanded="{{isOpen}}" aria-controls="optionList">
  <input #trigger type="text" readonly [value]="selectedItems.join(', ')" aria-label="已选项目">
  <ul id="optionList" role="listbox">
    <li *ngFor="let opt of selectOptions" role="option" (click)="selectItem(opt)">
      {{opt.label}}
    </li>
  </ul>
</div>

3. 使用ARIA实时区域播报选择结果 #

添加aria-live区域专门播报选项选择的状态，替代JAWS默认的模态框标题重读行为：

• 新增一个屏幕阅读器可见的aria-live="polite"区域
• 每次选择后更新该区域的文本内容，让JAWS播报选择结果而非重复朗读标题

示例代码：

<!-- 多选组件模板内添加 -->
<div aria-live="polite" class="sr-only">{{selectionStatus}}</div>

组件逻辑更新：

selectionStatus = '';

selectItem(option: {label: string}) {
  // ... 原有选择逻辑
  // 更新实时区域文本
  this.selectionStatus = this.selectedItems.includes(option.label) 
    ? `已选中${option.label}` 
    : `已取消选中${option.label}`;
  // ... 焦点放回逻辑
}

原理说明 #

• aria-modal="true"限制JAWS的焦点范围，避免交互时重新识别模态框外部区域
• 焦点管理确保交互过程中焦点不离开组件，防止JAWS触发模态框区域的重读
• aria-live区域提供了明确的交互反馈渠道，引导JAWS播报正确的内容而非 fallback 到模态框标题

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