Bootstrap-select v1.13.18与NVDA屏幕阅读器兼容性问题反馈

问题描述 #

使用Bootstrap-select v1.13.18时，其下拉组件无法被NVDA屏幕阅读器正常识别，对比原生HTML select的正常表现存在明显差异：

• 原生select：在NVDA环境下，通过TAB/光标键导航时，阅读器会清晰读出菜单项内容、列表总数量及当前位置；
• Bootstrap-select组件（含带搜索和不带搜索两种场景）：TAB进入组件后SPACE键无响应，上下箭头导航时NVDA仅读出“blank”或无语音反馈，完全无法识别菜单项信息及列表状态。

测试代码 #

<!-- 原生select对比示例 -->
<select class="form-control">
  <option>选项1</option>
  <option>选项2</option>
  <option>选项3</option>
</select>

<!-- Bootstrap-select 不带搜索 -->
<select class="selectpicker">
  <option>选项A</option>
  <option>选项B</option>
  <option>选项C</option>
</select>

<!-- Bootstrap-select 带搜索 -->
<select class="selectpicker" data-live-search="true">
  <option>搜索选项1</option>
  <option>搜索选项2</option>
  <option>搜索选项3</option>
</select>

<!-- 依赖资源引入 -->
<link rel="stylesheet" href="bootstrap.min.css">
<link rel="stylesheet" href="bootstrap-select.min.css">
<script src="jquery.min.js"></script>
<script src="bootstrap.min.js"></script>
<script src="bootstrap-select.min.js"></script>

NVDA测试步骤 #

• 打开搭载NVDA的Chrome或Firefox浏览器；
• 使用TAB键导航至目标下拉组件；
• 按下SPACE键尝试展开下拉列表；
• 用上下箭头键导航菜单项，观察NVDA的语音反馈内容。

问题原因分析 #

Bootstrap-select通过自定义HTML结构模拟原生select组件，默认配置下未完全遵循ARIA无障碍规范，导致屏幕阅读器无法解析组件状态：

• 下拉触发器缺少role="combobox"、aria-expanded、aria-controls等核心ARIA属性；
• 下拉列表容器未设置role="listbox"，菜单项也未添加role="option"、aria-selected、aria-index等标识；
• 键盘事件绑定逻辑未同步触发屏幕阅读器的状态更新，导致操作后无对应语音反馈。

解决方案 #

1. 启用组件内置ARIA支持 #

初始化Bootstrap-select时显式开启ARIA配置（部分版本默认未启用）：

$('.selectpicker').selectpicker({
  aria: true
});

2. 手动补充缺失的ARIA属性 #

若自动生成的属性仍不完整，可在组件加载完成后手动补充：

$('.selectpicker').on('loaded.bs.select', function() {
  const $trigger = $(this).next('.bootstrap-select').find('.dropdown-toggle');
  const $menu = $(this).next('.bootstrap-select').find('.dropdown-menu');
  const $options = $menu.find('.dropdown-item');

  // 配置触发器ARIA属性
  $trigger.attr({
    'role': 'combobox',
    'aria-expanded': 'false',
    'aria-controls': $menu.attr('id') || `select-menu-${$(this).attr('id')}`
  });
  // 配置下拉列表ARIA属性
  $menu.attr({
    'role': 'listbox',
    'id': $menu.attr('id') || `select-menu-${$(this).attr('id')}`
  });
  // 配置菜单项ARIA属性
  $options.each(function(index) {
    $(this).attr({
      'role': 'option',
      'aria-index': index + 1,
      'aria-selected': $(this).hasClass('selected') ? 'true' : 'false'
    });
  });
});

3. 修复键盘事件的无障碍反馈 #

监听组件展开/收起及菜单项导航事件，同步更新屏幕阅读器状态：

// 下拉展开时聚焦列表，通知阅读器
$('.selectpicker').on('shown.bs.select', function() {
  $(this).next('.bootstrap-select').find('.dropdown-menu').focus();
});

// 下拉收起时聚焦触发器，通知阅读器
$('.selectpicker').on('hidden.bs.select', function() {
  $(this).next('.bootstrap-select').find('.dropdown-toggle').focus();
});

// 菜单项导航时更新选中状态并聚焦
$('.dropdown-menu').on('keydown', '.dropdown-item', function(e) {
  if (e.key === 'ArrowUp' || e.key === 'ArrowDown') {
    $('.dropdown-item').attr('aria-selected', 'false');
    $(this).attr('aria-selected', 'true').focus();
  }
});

4. 版本兼容性验证 #

建议尝试升级至Bootstrap-select的最新稳定版本，后续版本针对无障碍兼容性有修复优化，可能直接解决此类问题。

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