在实际的 Web 开发中，不免会出现一种情况 —— 为了做出美观的按钮样式或者是兼容低级浏览器，而使用 a 、span 等标签来设计按钮。从外观的角度上说，这样是一个不错的解决方案，做出了美观的按钮又便于兼容不同的浏览器，只是在这个过程中，网页的可访问性悄悄地降低了。
既然是可访问性降低了，那么在这个模拟按钮的过程中，相对于使用如 input[button]、button 这类原生按钮标签的网页来说，必定是缺少了一些特性，而这些特性往往是开发者很容易忽略的。
那么究竟缺少了什么？
具体可以从语义和行为两个方面展开说明：
1.语义
从语义上来说，模拟按钮时使用了 a、span 等没有按钮语义的标签来制作按钮，虽然外观上仍是一个按钮，但是实际上并没有按钮的语义，这对于普通用户来说并没有影响，但是爬虫、读屏软件等机械工具不会认知它的按钮外观，而是从它的标签本质上理解它，从而认为这不是一个按钮，这并不利于 SEO 和无障碍网页设计。因此，我们可以使用 HTML5 的 role 属性为按钮添加语义，告知机械这是一个按钮。
以 a 标签模拟一个点击后更新文章的按钮为例，可以这样做：
<a id="refresh-posts" href="#" role="button">更新</a>
2.行为
关于行为方面的缺失，主要是体现在一些表单按钮的模拟上。习惯上来说，用户对于表单的按钮默认会有一定的键盘行为依赖，例如使用键盘上的 “tab” 键获取/切换焦点，或是使用键盘 Enter 键、空格键触发某些按钮。
对于焦点，如果是用 a 标签模拟的按钮还是能如常获得焦点，但是 span 等其他元素就无法获取到焦点了，这时候开发者可以在标签上手动加入 tabindex 属性，把这个模拟按钮添加到 “tab” 键的焦点序列中；
对于键盘的行为则需要通过 JS 解决，开发者可以使用 JS 为模拟的按钮绑定键盘事件，从而赋予它键盘行为的处理。例如，通过 Enter 键触发提交按钮可以这样做：
var submit = document.getElementById('submit');
document.onkeypress = function(){
var currentKey = 0,
e = e||event;
currentKey = e.keyCode || e.which || e.charCode;
if( currentKey == 13 ) submit.click();
};
本文由 Kayo Lee 发表，本文链接：https://kayosite.com/improve-analog-button-accessibility.html
评论列表
沙发。。。话说无障碍网页设计，很多站长都不太重视，甚至都不知道。。。
@魅影重生 相对于UI的直观设计，无障碍设计主要在网页内部进行设计，因此也常常容易被人忽视，只能多点宣传，让无障碍逐渐被重视吧！
文章分享的好有个性，支持一下
SO…你其实可以考虑在这个模拟按钮的旁边放一个 display:none 的真实按钮来做SEO….但submit 事件 在很多复杂的情况下并不 支持用 其它html标签来模拟…例如做过一个项目，在IE下，form 里面 用了 jquery 的Clone 事件 你再去 模拟一下 submit… 噔~~一声报错就出来了。
@EvolutionJay 不大喜欢用真实按钮辅助，这样一来会多出一个没有意义的 input/button ，另外读屏软件还是无法明确那个模拟按钮的语义。
jQuery 的 submit 方法只适用于表单元素，模拟的按钮最好还是用 click（），或者用原生 JS 直接 click() 就好！