提高模拟按钮的可访问性

在实际的 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() 就好!

回复

你正在以游客身份访问网站,请输入你的昵称和 E-mail
:wink: :roll: :oops: :mrgreen: :idea: :cry: :?: :-| :-o :-P :-? :) :( 8-O