为什么不能用 div 模拟按钮来提升点击率？
使用 div 模拟按钮会丢失浏览器内置的键盘可访问性功能，导致无法通过 Tab 键聚焦。
浏览器原生控件提供的键盘导航功能
浏览器为 button 等语义化标签内置了键盘操作逻辑，用户可以通过 Tab 键在页面元素间切换焦点，并使用 Enter 或 Space 键触发点击。这种原生行为是浏览器直接提供的，不需要额外的 JavaScript 代码来实现。如果开发者用 div 模拟按钮，就必须手动编写脚本才能让用户通过键盘进行操作。
MDN 文档指出，使用正确的 HTML 元素（如 button）能获得内置的键盘可访问性支持。这意味着用户可以顺畅地浏览网页并执行交互，而不会因为元素类型错误而遇到操作障碍。这种原生支持是浏览器引擎层面的功能，对于提升用户体验至关重要。
div 模拟按钮导致的可访问性缺失
当开发者使用 div 来模拟按钮时，会直接失去浏览器提供的默认键盘交互能力。div 元素默认无法通过 Tab 键获得焦点，也无法通过键盘快捷键激活，这使得依赖键盘导航的用户（如视障人士）无法正常使用该控件。虽然可以通过添加 tabindex 属性让 div 获得焦点，但这只是解决了聚焦问题，并未解决激活问题。
MDN 强调，使用非语义化标签（如 div）来模拟按钮是不推荐的，因为这会剥夺用户原本应享有的原生键盘支持。如果必须使用非按钮元素，需要通过 WAI-ARIA 的 role 属性和复杂的 JavaScript 逻辑来手动实现所有交互行为，这大大增加了代码复杂度和出错的可能性。
检查页面按钮是否使用了正确的语义化标签
要验证页面中的按钮是否使用了正确的语义化标签，可以使用浏览器的开发者工具进行简单的检查。首先，在网页上右键点击目标按钮，选择“检查”或“审查元素”，查看其 HTML 标签是否为 button。如果标签是 div 或 span，则说明该按钮未使用正确的语义化标签。
另一种方法是使用浏览器的无障碍检查功能。在 Chrome 或 Firefox 的开发者工具中，可以启用“无障碍检查器”或“显示网页标签顺序”功能，然后使用 Tab 键在页面上导航。如果目标按钮无法通过 Tab 键获得焦点，或者无法通过 Enter 键激活，则说明该按钮可能使用了 div 等非语义化标签，存在可访问性问题。
如何修复并验证修复结果
修复方法是直接将模拟按钮的 div 标签替换为 button 标签，并确保其内部包含可点击的文本内容。例如，将 `<div>点击我</div>` 修改为 `<button>点击我</button>`。这样，浏览器会自动为该元素提供默认的样式和键盘交互功能，无需额外的 CSS 或 JavaScript 代码。
修复后，再次使用上述检查方法进行验证。在开发者工具中检查标签是否已变为 button，并使用 Tab 键测试焦点是否能正确移动到该按钮上，最后按 Enter 键确认是否能触发点击事件。如果所有操作均正常，则说明修复成功，页面按钮已具备正确的语义化和可访问性。
资料与延伸阅读
你可以通过以下原始资料核对文中概念，并继续深入阅读。