前端无障碍模式

发表于 更新于 分类于 阅读次数：

前端无障碍模式

无障碍模式的服务人群

服务的人群有很多，如：视障人群、听障人群、肢体障碍、认知障碍、老年人。

今天讲的无障碍主要针对 视障人群。

Web的无障碍开发是遵循 WCAG标准，又叫 网页内容无障碍指南。里面规定了字体、颜色、布局等等。

标签语义化

良好的标签语义化开发无障碍，会让屏幕阅读器可以更好的适配。屏幕阅读器会更具标签的语义化去阅读网页中的内容，让视障人群能够清晰的了解。如何：

  • 列表使用 ul li 标签
  • 底部使用 footer 标签
  • 按钮使用 button 标签
  • 标题使用 h1 h2 h3 等标签
  • img 标签中的 alt 属性（屏幕阅读器可以阅读alt的值，也用于SEO优化）
1
2
3
4
5
6
7
8
<ul>
  <li>风风萧兮易水寒</li>
  <li>壮士一去不复返</li>
</ul>
<img src="" alt="蒙娜丽莎图片" />
<button>这是一个按钮</button>
<footer>这里是底部</footer>
</div>

可聚焦元素

什么是可聚焦元素？

在页面中最常见的聚焦元素有： button 、 input 、 select 等等。可聚焦元素聚焦状态通常是通过鼠标点击事件触发，也可以使用键盘 tab 键触发。当为聚焦状态的时候会触发元素的 focus 事件，失去焦点的时候触发元素的 blur 事件。

tabindex

MDN文档链接

作用：元素是否为可聚焦元素。

值：

  • tabindex=负值 (通常是 tabindex=“-1”)，可聚焦但是不能通过 tab 键聚焦
  • tabindex>=0， tab 键可聚焦，如果多个元素的tabindex值不同， tab 键聚焦按照从小到大顺序，如果值相同按照DOM顺序聚焦。最大值不能超过 32767 。
1
2
3
4
5
6
7
<ul>
  <li tabIndex={0}>风风萧兮易水寒</li>
  <li tabIndex={0}>壮士一去不复返</li>
</ul>
<div tabIndex={0}>
  可聚焦
</div>

role

作用： 用于描述元素的角色或作用。

常见的值如下：

  • button ：表示一个可点击的按钮
  • link ：表示一个可点击的链接
  • article：表示一个独立的、完整的、可独立分配或可重复使用的内容块，如博客文章、新闻故事或论坛帖子。
  • search：表示一个搜索框或搜索功能区域
1
2
3
4
<div tabIndex={0} role="button">
	这是一个按钮
</div>
<div role="link">这是一个链接</div>

aria-*属性

MDN文档链接

列举些常用的属性

  • aria-label：阅读的内容，修复不准确的文本标签
  • aria-labelledby=#id：阅读指定元素的内容，值为指定元素的 id。优先级高于 aria-label
  • aria-hidden=”true”：对屏幕阅读器不可见，即跳过。默认为 false
  • aria-checked=”true”：按钮已选中，与 role=”checkbox/raido”搭配使用
  • aria-selected=”true”：选项已选中
  • aria-disabled=”true”：按钮不可用
  • aria-haspopup=”true”：当前元素会触发弹出式 UI 组件，与 aria-expanded 搭配使用。默认 false
  • aria-expanded=”true”：当前元素的弹出式 UI 组已弹出，默认 false
  • 进度条/滑块相关
    • aria-valuemin：最小值
    • aria-valuemax：最大值
    • aria-valuenow：当前值
    • aria-valuetext：阅读内容
1
2
3
4
// 阅读 吃饭了吗
<div aria-label="吃饭了吗"></div>
// 阅读天天嘻嘻哈哈
<div aria-label="吃饭了吗">天天嘻嘻哈哈</div>

focus-visible

键盘 tab 键聚集的元素会默认有黑框，这是**focus-visible** 去实现的样式。

  • focus-visible 是一个 CSS 伪类，用于在用户通过键盘或鼠标聚焦到一个元素时，为该元素添加样式。它的作用是提供一个可见的焦点提示。
  • focus-visible 伪类的作用就是解决这个问题。它只会在用户通过键盘操作聚焦到一个元素时为其添加样式，而不会在鼠标点击或触摸屏操作时添加样式。
  • focus-visible 伪类可以改善可访问性，帮助有视觉障碍的用户更好地导航和交互网页。它也可以提供更好的用户体验，让用户能够更容易地理解页面结构和交互行为。

tabindex 知识点扩展

根据 tabindex 特性，实现一个简易的 Select 组件。

当设置了 tabindex 之后该元素就可以聚焦了，当该元素聚焦时可以触发 focus 事件，失去焦点触发 blur 事件。 

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
export default function Home() {
  const [value, setValue] = useState('');
  const [show, setShow] = useState(false);

  return (
    <div>
      <div
        className="wrapper"
        tabIndex={0}
        onFocus={() => {
          setShow(true);
        }}
        onBlur={() => {
          setShow(false);
        }}
      >
        {value || '请选择'}
        <ul style={{ display: show ? 'block' : 'none' }}>
          {[1, 2, 3].map((item) => (
            <li
              key={item}
              onClick={() => {
                setValue(item.toString());
                setShow(false);
              }}
            >
              选项{item}
            </li>
          ))}
        </ul>
      </div>
    </div>
  );
}

无障碍模式的多样性

网页的无障碍可以是多种形式的，除了上述的WCAG标准，还有很多种，还有像语音播报这种。

平时常见的无障碍的产品：

相关博客