身处“前端已死”年代,或许你更应该关注 a11y

哈喽大家好啊,我是广州小井。本来给大家带来一点前端冷门小菜——可访问性(Accessibility)。也许在座的各位更多知道看过这个词,但没有过多的了解,所以本文将带你稍微深入了解那么一丢丢…

其实很早就有写这类文章的想法,但一直也不知道何从下笔。如果说从规范的角度写个 checklist 、当个翻译官,很容易写成内容多深度小的文章,毕竟规范文档一大堆…所以,本文仅聚焦于 buttoninput 这个两个原生标签来一起学习 a11y

笔者在这里简单介绍一下稍有标题党嫌疑的 a11y,这是个啥玩意?笔者第一次看到的时候也是不知道是啥,单词不像单词,数字不像数字的。它是单词 Accessibility 的简写,MDN-Accessibility 是这么介绍它的:often abbreviated to A11y — as in, “a”, then 11 characters, and then “y”。换过来就是:a11个字母y

为什么说笔者很早就有写这篇文章的想法,主要还是因为想让大家跟 产品经理 掰头、argue 的时候更有底气!哈哈哈,开玩笑的,我们还是走回正题吧~

前言

正文开始前,不得不说的一点就是,国内的环境下,大家确实对 可访问性 也就是 a11y(后文统一使用该词) 关注得比较少的。不管你的角色是产品经理还是前端工程师或是其他。当然,这不是个人的问题,毕竟大环境如此,但笔者认为,如果前端这个行业想走得更深更远,这是我们必须要关注的一个领域,更何况身处“前端已死”的年代。

网上已经有很多对 a11y 的一些概念的介绍和基本的注意事项了,笔者不打算在本文进行太多概念性的分享,就默认大家对其已经有一定的认知了,本文会更加侧重 buttoninput 这两个标签在实战中的一些注意点的经验分享。

在我们不了解 a11y 的时候,很容易带着自己的主观意识去判断一些浏览器现象,然后将其处理成自己想要的模样。比如笔者初学前端的时候,就喜欢一上来就干掉各种浏览器的默认样式,比如 outline: none; ,单纯因为自我感觉得那个玩意 不 好 看

不知道有没有跟笔者一样的小伙伴哈哈。其实很多时候 事出必有因,在我们一上来干掉默认样式之前我们不妨先思考一下,为什么会有这样的一个默认样式?真的是因为“丑”而来“丑”哭用户吗?其实不然。接下来我们在码上掘金玩玩它是干嘛的:

上面实例代码中,有 8 个 input ,笔者给奇数的 input 设置了 outline: none; 。当然如果你仅用鼠标操作不会觉得有什么不妥,甚至可能觉得没 outline 的看起来还更加舒服,但是如果你是使用键盘操作的话,或许就不是这么认为的了…当你通过 TAB 键来选中 input 时,你会发现没有 outlineinput 并不是那么的明显,用户体验相对也是没那么好了。

可访问性的其中一个点就是:尽可能地让不同用户都能访问到相应的内容,不管通过何种方式、设备,键盘或是鼠标,阅读器或是其他,也不管他们自身的认知、身体条件等。so~接下来,让我们看看日常开发中, buttoninput 这两个标签需要我们注意的可访问性的点是什么吧!

一、重识 outline

相信在前言的码上掘金小 demo 中,你已经稍微了解 outline 对于 input 在键盘访问时候的作用了,那我们在实战中对待 outline 应该要有所忌惮了是吧?哈哈哈,毕竟不能一上来就干掉它了。那既然讲到了 outline 对于 a11y 的作用,我们来重新认识下 outline

1. 可交互元素 与 outline

这是 MDN-outline (详细了解可以点进去看看)中关于 a11y 的介绍:

身处“前端已死”年代,或许你更应该关注 a11y

里面有提到:如果一个元素可交互,需要提供一个 focus 的样式。也就是不管我们要用原生的还是自己搞的,反正就得提供这么一个样式。好巧不巧,到这一步的时候又有一个概念进入了我们的视野——可交互元素,我们大概知道它代表什么,但…顺便过一下吧~

MDN-HTML elements这里也有提到可交互元素,当然除了我们比较熟悉的表单元素之外,还有这些可能相对陌生的元素:

身处“前端已死”年代,或许你更应该关注 a11y

当然,文档中提到的元素非常多,笔者不一一列举了,感兴趣的直接点击笔者提供的链接到 MDN 当中详细了解。笔者就随便挑个元素来搞个小 demo 给大家体验体验:

话不多说,跟前言的 demo 差不多。如果仅使用键盘浏览的话,可交互标签有 outline 用户才能知道自己当前操作到哪个位置了。

ok,讲完 可交互标签 和 outline 后基础概念后,有没有什么是我们实战开发的时候要注意的呢?额…还真有一点,也是笔者最近碰到的一个 issue : outlineoverflow: hidden; 切割的问题。这个问题很好理解,我们直接看 MDN 的其中一段介绍:

身处“前端已死”年代,或许你更应该关注 a11y

关键点就在于:border 外的线段、不占据空间。所以,我们很容易就联想到,如果父元素设置了 overflow: hidden; 且宽或者高刚好等于可交互元素,那么当可交互元素处于 focus 状态需要展示 outline 的时候就会存在被切割的问题。这个大家可以看看下图,笔者就不搞 demo 了。

身处“前端已死”年代,或许你更应该关注 a11y

当然,解决方案可以有很多,比如:

  1. 可以给父级容器用 padding 撑开一个宽度预留给 outline
  2. 考虑去除 overflow: hidden; 样式;
  3. 通过 outline-offsetoutline-width 来调整 outline 使其不超出 border

额,好吧,关于 outline 实战开发注意的问题和解决方案笔者暂时就想到这么点,如果你也有遇到一些其他的问题,或者有解决方案都可以评论区告诉大伙,可以互相学习~

2. :focuse-visible

既然提到了 outline,笔者认为必须带上 :focuse-visible 一嘴,或许它将会是你在提升网站 a11y 路上的好哥们之一。需要快速了解这个伪类的话笔者推荐大家看看大神的文章:CSS :focus-visible伪类让我感动哭了

MDN-:focus-visible 是这么定义的:

The  :focus-visible pseudo-class applies while an element matches the :focus pseudo-class and the UA (User Agent) determines via heuristics that the focus should be made evident on the element.

来来来,笔者慢慢给大家解释解释。它是完全由浏览器决定是否需要展示突出样式的。也就是说,它区别于 :focus 最重要的一点就是,:focus 是对于匹配所有元素的聚焦状态, 而它 由浏览器来判断 是否需要展示聚焦状态,详情大家可以看看这个文章:With :focus-visible, you can have focus styles when it makes sense

概念没 get 到点的也没关系,它本来就晦涩,但我们可以通过一个具体场景来理解它:


在码上掘金中,我们可以发现,:focus 的样式在鼠标点击的时候也会触发(但在鼠标交互的时候我们并不需要凸显 outline),而 :focuse-visible 的样式仅仅在键盘操作的时候才会触发。这个时候这个伪类对我们来说就很有用了,因为大部分时候我们不需要在网站内容跟鼠标交互中去凸显元素的 outline

总结一下,我们可以简单的认为::focus 在鼠标、键盘的操作下都会触发,:focuse-visible 仅仅在键盘操作的时候触发但其实,最终决定是否为 :focuse-visible 状态的主要还是浏览器

二、重识 button

对于重识 button 这一节,笔者打算从一个现象说起。相信有用过 antd4element 这两个组件库的童鞋都有碰到过一个现象:button 点击后的状态没恢复。大家可以通过笔者提供的链接自己去自行一下:

  1. antd4
  2. element-ui
  3. element-plus

笔者随便找了个好对比的图如下,其中点击过的 button 颜色明显不同于旁边的:

身处“前端已死”年代,或许你更应该关注 a11y

不在意的话,这当然不是事(这本来也不是问题),但团队中总有一个像素眼的产品大姐会找上门来说:

  • 你这按钮怎么回事?
  • 为什么交互这么奇怪?
  • 点击完了还处于 hover 的状态?
  • 还要再点一下其他才能取消状态?

不知道大家现实工作中有没有遇到这样的场景,如果遇到了,没关系!!!只要你看到了本文,你就可以理直气壮地告诉她:老子不改!因为这是正常的交互!(还别说,我看了好几个 issue 都是这样的,看来这场景大家准熟)

好,那首先我们要排除这不是组件库的问题,且证明这是一个正常的交互,最简单的方式就是看原生的表现:


通过 demo 我们可以发现,当我们点击完按钮后,按钮一直保持着 :focus 的状态,直到我们下一次操作鼠标、键盘的时候 :focus 的状态才消失。而这一点就很好的说明了,这是浏览器自己的行为,跟组件库无关,这是一个正常的交互

那既然明确了这是一个正常的交互,我们一起探讨一下为什么要这样设计呢?答案很明显,就是 a11y。因为我们无法确保我们的用户都是通过鼠标来访问的。

假设现在有这么一个场景,一个长页面有好多个按钮,每个按钮点击完都会有一个表单弹窗,用户需要填写这些表单。我们可以通过 buttonfocus 状态来快速恢复当前的阅读上下文

身处“前端已死”年代,或许你更应该关注 a11y

通过 focus 状态,我们可以操作完 button1,通过 TAB 再操作 button2。假设 button 点击后没有 focus 状态,我们填写完弹窗再回到页面就无法恢复到当前的上下文环境了,就需要从 button1 开始,一个一个地按 TAB …

这下,产品经理再因为按钮点击后的状态问题再找过来,你就可以理直气壮地通过 a11y 的设计出发点跟他解释这个现象了。当然,如果他觉得没必要管这些,很可能你解释完了还是要改,毕竟现在国内的大环境下确实比较少同学会注重这一块…

最后,笔者再提一嘴就是组件库的按钮状态, hoverfocus 的样式实在是太接近了(可能就是一样的),感觉这样更容易让一些同学认为这是一个 bug ~

写在最后

写这篇文章的出发点,更多还是希望前端开发者更关注用户体验,更重视细节,毕竟用户体验对于前端来说一直都是一个核心需求。何况现如今处于“前端已死”的大环境下,没有任何一个人能够做到不被替代,或许我们能做的只有不断提升自己,关注细节,关注用户体验,找到前端的本质才能在职业发展的道路上走得更远(生存下来)。

好吧,扯远了,个人感觉关注 a11y 其实更是一个更高层的境界。个人印象很深的一个 MDN 关于 a11y 的介绍:

For many people, technology makes things easier. For people with disabilities, technology makes things possible. Accessibility means developing content to be as accessible as possible, no matter an individual’s physical and cognitive abilities and how they access the web

so,科技让生活更简单,让很多事情成为可能。正是因为科技改变生活,而作为软件工程师的我们更应该通过“科技”让所有的用户都能平等的获取内容。

参考文献:

  1. MDN-outline
  2. MDN-Accessibility
  3. MDN-HTML elements
  4. CSS :focus-visible伪类让我感动哭了
  5. MDN-:focus-visible
  6. With :focus-visible, you can have focus styles when it makes sense

本文正在参加「金石计划」

原文链接:https://juejin.cn/post/7216227563012833337 作者:井柏然

(0)
上一篇 2023年3月30日 上午10:42
下一篇 2023年3月30日 下午4:05

相关推荐

发表评论

登录后才能评论