网页中 div 元素模拟按钮时如何恢复键盘可访问性
网页中使用 div 元素模拟按钮时，可以通过添加 tabindex 属性和 role 属性来恢复键盘可访问性。
使用 div 模拟按钮失去的默认功能
网页开发中有时会用 div 元素配合 JavaScript 来模拟按钮，例如添加点击事件。这种做法虽然能实现视觉效果，但会丢失原生 button 元素自带的键盘可访问性。用户无法通过 Tab 键聚焦到这些 div 元素，也无法使用空格键或回车键触发点击。此外，div 元素也不会获得浏览器默认的按钮样式，需要开发者手动编写 CSS。
浏览器默认的按钮元素内置了键盘交互逻辑，支持 Tab 键导航和回车键激活。如果用 div 替代，这些功能全部失效。屏幕阅读器也无法识别这些 div 为可交互控件，导致依赖键盘或辅助技术的用户无法操作。因此，在非必要情况下应优先使用语义化的 button 元素。
通过属性手动恢复键盘可访问性
如果必须使用 div 元素作为按钮，可以通过添加 tabindex 属性和 role 属性来恢复部分功能。tabindex 属性允许非默认可聚焦元素获得焦点。将 tabindex 设置为 0 可以让 div 元素进入 Tab 键的导航序列，使其可以被聚焦。同时，设置 role 属性为 button 可以告知屏幕阅读器该元素是一个按钮，从而提供正确的语义信息。
在代码示例中，给 div 添加 tabindex='0' 和 role='button' 后，用户可以通过 Tab 键选中该元素。选中后，按下空格键或回车键即可触发点击事件。这需要配合 JavaScript 监听键盘事件来实现完整的按钮行为，例如处理 Enter 键的点击和 Space 键的激活。
实现完整按钮行为的操作步骤
要实现完整的按钮功能，需要在 HTML 中添加 tabindex 和 role 属性，并在 JavaScript 中添加事件监听。首先，在 HTML 中将 div 标记为可聚焦元素并指定角色。然后，使用 JavaScript 监听键盘事件，当用户按下空格键或回车键时，模拟按钮的点击行为。这包括阻止默认行为（如空格键滚动页面）并执行相应的操作。
具体操作包括：在 div 上添加 tabindex='0' 和 role='button'。在 JavaScript 中，使用 addEventListener 方法监听 'keydown' 事件。当检测到按键为空格键或回车键时，调用 click 方法或执行相应的逻辑。同时，需要处理焦点管理，确保点击后焦点保持在按钮上，以符合无障碍标准。
验证可访问性是否恢复的方法
可以通过浏览器开发者工具和屏幕阅读器来验证可访问性是否恢复。首先，打开开发者工具，启用“显示页面 Tab 顺序”功能。按下 Tab 键，观察焦点是否能够移动到 div 元素上。如果焦点能够移动，说明 tabindex 属性生效。然后，选中该元素，按下空格键或回车键，检查是否触发了预期的点击事件。
使用屏幕阅读器测试时，朗读该元素的内容，确认屏幕阅读器将其识别为按钮。尝试通过 Tab 键导航到该元素，并使用空格键激活。如果屏幕阅读器正确朗读并支持激活，说明 role 属性和键盘事件处理均已生效。如果无法聚焦或无法激活，需要检查 tabindex 值和 JavaScript 事件监听是否正确配置。
资料与延伸阅读
你可以通过以下原始资料核对文中概念，并继续深入阅读。