你尚未登录,仅允许查看本站部分内容。请登录使用邀请码注册
IntPtr

用户体验与可访问性 (1) - 按钮与链接 0个回复 专栏 @ CSS

IntPtr 发布于 2 年前

于是,这是这个系列的第一篇。

这个系列的文章主要是针对用户体验以及 Web 可访问性方面的一些问题进行说明 (其实只是吐槽向的而已),设计师跑路等情况不在吐槽范围之内 (喂)。

:focus 样式

a:focus, button:focus {
  outline: none;
}

首先要提的,便是这个相当常见的 :focus 的问题。也许上面这段样式对「普通用户」没有什么影响,但是对使用键盘访问网页的用户来说,这个影响却是致命的:用户无法知道当前的键盘焦点在哪个元素上。所以为了确保网页对所有用户都是可访问的,应该保留默认的 :focus 样式,或者在干掉默认 :focus 样式后再额外定义其他样式。

对于重新定义 :focus 样式,针对浏览器的行为表现,有一些建议。对于 <button> 标签,在点击后,会保留键盘焦点,并且应用全部 :focus 样式。而对于 <a> 标签来说,在点击后同样会保留键盘焦点,但是只会应用除默认 :focus 样式外的其他 :focus 样式。

对于这点,我个人的意见是:对于所有 <button> 标签以及带有按钮语义的 <a> 标签自定义 :focus 样式,而对于其他 <a> 标签,保留默认的 :focus 样式。这样可以做到比较好的用户体验效果。

可点击区域

应该保证 <a> 标签的样式区域与可点击区域一致。这也是一个比较常见的问题,多见于由设计师直接出品的页面。具体效果就是页面上有一个看上去很大的按钮,甚至 borderpadding 部分都是有 :hover 效果的,但是实际可点击区域只有中间的文字部分。这种情况下,应该给 <a> 标签设置 display: block / inline-block,然后将 border / padding 设置在 <a> 标签上。

中键点击

这个问题不那么常见,不过相当影响用户体验。在使用前端 router 的情况下,会对 <a> 标签的 click 事件进行劫持,阻止默认行为,并通过 router 更新页面。但是某些 router 并没有对中键点击链接进行处理,导致中键点击时依旧会在当前页面打开。于是需要新标签页打开链接的时候,就必须拖动链接到标签页栏或者右键 -> 新标签页打开。前端 router 应该在 click 事件中判断是否为中键点击,如果为中键点击,应该由浏览器处理中键点击的默认行为,而不应该调用 preventDefault 阻止默认行为。

Original: 用户体验与可访问性 (1) - 按钮与链接

等待第一条回复
登录后回复,如无账号,请使用邀请码注册