如何在选择下拉框选项后使Div获取焦点以满足508合规要求

问题分析 #

你的代码当前绑定的是click事件，这会在用户点击下拉框时就触发焦点转移，而非选择完选项之后，不符合需求。另外，tabindex="1"的设置会打乱页面默认的焦点遍历顺序，违背508合规的最佳实践。

修改后的代码 #

JavaScript #

$('#table-filter').on('change', function() {
  // 若表格内容为异步加载，需将focus()放在加载完成的回调内
  const tableWrap = $('#table-wrap');
  tableWrap.focus();
});

HTML（优化508合规性） #

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<p><strong>Please select a location from the dropdown menu:</strong></p>

<p><select id="table-filter" >
<option>Select Me</option>
<option>Data1</option>
<option>Data2</option>
<option>Data3</option>
</select>
</p>

<!-- 改用tabindex="0"维持自然焦点顺序；无需Tab键聚焦则设为-1 -->
<div id="table-wrap" tabindex="0" style="outline: 2px solid transparent; transition: outline 0.2s;">
<table id="table1" style=" width: 100%;"><thead>
<tr>
<th >Column1</th>
<th >Column2</th>
</tr>
</thead><tbody>
<tr>
<td tabindex="0">Data1</td>
<td tabindex="0">Pass</td>
</tr>
<tr>
<td tabindex="0">Data2</td>
<td tabindex="0">In Progress</td>
</tr>
<tr>
<td>Data3</td>
<td>Complete</td>
</tr>
</tbody></table>
</div>

关键说明 #

• 事件替换：用change事件替代click，确保只有用户选择新选项后才触发焦点转移。
• tabindex优化：tabindex="0"让元素按DOM顺序参与Tab键遍历；若不需要手动聚焦，设为tabindex="-1"，允许JS触发聚焦但不干扰默认顺序。
• 焦点可见性：给容器添加轮廓样式，聚焦时提供清晰视觉反馈，这是508合规的核心要求（适配屏幕阅读器和键盘操作用户）。
• 异步兼容：表格内容异步加载时，需将focus()放在数据加载完成的回调中，保证焦点转移时内容已更新。

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