网页中 button 元素与 div 模拟按钮在可访问性上的区别

语义标签与交互行为的差异

网页中 button 元素是专门用于交互的标签，浏览器会自动将其识别为可点击控件，屏幕阅读器也能直接朗读其功能。而 div 元素本身没有交互语义，仅作为通用容器，无法被辅助技术识别为按钮。若要使用 div 模拟按钮，必须通过 ARIA 属性赋予其可点击的角色，否则无法实现基本的可访问性。

button 元素支持键盘操作，如 Tab 键聚焦和 Enter 键触发，这是浏览器默认行为。div 模拟按钮若不添加 ARIA role 属性，键盘导航将失效，用户无法通过键盘完成点击操作。因此，从语义和交互角度看，button 元素是构建可访问按钮的标准选择。

当使用 div 元素模拟按钮时，必须添加 role 属性并设置值为 button，才能让屏幕阅读器将其识别为可点击控件。例如，设置 role='button' 后，屏幕阅读器会朗读该元素为按钮，并告知用户可点击。若不添加此属性，屏幕阅读器可能将其视为普通文本或容器，导致用户无法感知其交互功能。

除了 role 属性，div 模拟按钮还需要通过 tabindex 属性使其获得键盘焦点，并通过 JavaScript 监听点击事件来触发功能。这种方式虽然可行，但增加了代码复杂度，且容易因实现不当导致可访问性缺陷。相比之下，button 元素无需额外标记即可满足这些要求。

使用浏览器开发者工具检查元素的可访问性属性。对于 button 元素，查看其是否包含 role 属性（通常为空或默认值），并确认其是否支持键盘操作。对于 div 模拟按钮，检查是否添加了 role='button' 和 tabindex 属性，并验证 JavaScript 是否正确绑定点击事件。

使用屏幕阅读器测试按钮的可访问性。在浏览器中加载页面，使用屏幕阅读器朗读页面内容，确认 button 元素是否被识别为按钮，以及 div 模拟按钮是否通过 ARIA 标记被正确识别。若屏幕阅读器未识别为按钮，说明可访问性实现存在问题。

在构建网页时，优先使用 button 元素作为按钮，以确保其原生可访问性。仅在特殊场景下（如需要复杂样式或动态布局）才考虑使用 div 模拟按钮，并务必添加 ARIA 角色标记和键盘支持。避免因追求视觉效果而牺牲可访问性，导致部分用户无法正常使用页面功能。

若必须使用 div 模拟按钮，应确保其实现符合可访问性标准，包括添加 role 属性、支持键盘操作和提供清晰的视觉反馈。同时，定期使用可访问性测试工具（如 NVDA 或 axe DevTools）验证按钮的可访问性，确保其符合无障碍设计要求。