[铁人赛 Day02] 如何提升你的 React 网站易用性？（Web Accessibility）(上）- 无障碍网站 intro

文章大纲与涵盖范围

这篇文章会介绍无障碍网站（Web Accessibility，又称为 a11y）的目的与实践方向，给对於这个概念还感觉到陌生的朋友，如果已经熟稔，可以直接跳到（中）（下）篇，会带到 React 官方文件给开发者的一些实作提醒。

为什麽要有无障碍网站？

一个设计良好的网站应该要为所有人服务，不论他们使用的是什麽工具、所处何地，或者使用什麽语言。当专案达成这个目标时，意味着拥有不同听觉、视觉、行动或者认知能力的使用者，都可以使用我们的网站。

此外，还有一些特殊情境，例如：

1. 使用智慧型手表、智慧电视等不同「输入方法」的载具
2. 在特殊环境限制，例如吵杂、一片黑暗看不见的环境中
3. 网路连接品质不佳或者过慢

也都可以受益於无障碍网站的设计。

并且，在 Google 的 Lighthouse 网站性能检测工具中，Accessibility 也与 Performance、 SEO 列为网站开发优化的几大指标。

无障碍网站的实作概念

无障碍网站的实作方式也许会有一点琐碎，所以让我们从需求方的角度来理解，以上提到的使用者们，他们都透过什麽方式来浏览网页呢？

常见的辅助科技包括 Screen reader、Voice browser，主要是将网页里的内容转换成音讯、或者盲文等其他媒介，也提供 highlight 功能帮助使用者看清楚内容，网页控制、内容输入也有不同的操作模式。

所以 Accessibility 的实作大方向就是：你的网页好不好「读」？HTML 中关於内容的线索够多吗？在不使用滑鼠、触控板的状况下，你的网页能不能光靠键盘（或者其他类型的）指令，也能顺畅的填写表单、按下送出？当使用者输入帐号的时候，他知道自己正在哪一个输入框上吗？你的网页动画、设计是否会干扰使用者的「阅读」？

无障碍网站的检测工具

Google 的 web.dev 就针对 Accessibility 图文并茂地提供了不少需要注意的问题。Google Dev Tool 也提供了一套检测工具可以看到网页的 Accessibility Tree：

无障碍网站的实作方法

让我们先暖暖身体验一下（你也可以直接进入下一篇文章）。以下是几个常见的场景，以及他们的简略解决方法：

1. 可以放大缩小的文字 － 有时候为了美观，我们会使用这样的 meta tag 设定，限制网页的最大宽度为 100%，使用者无法自由缩放，然而这种作法应该被避免。

<!--以下为反例-->
<meta name="viewport" content="width=device-width, initial-scale=1.0,
maximum-scale=1.0, user-scalable=no" />

2. 加上 prefers-reduced-motion 样式属性 - 重复或者会有闪动的动画、自动播放影片可能让某些使用者不适，这个属性可以限制动画出现在这些使用者的眼前。

@media (prefers-reduced-motion: reduce) {
  button {
    animation: none;
  }
}

3. 加上 tabindex attribute - <button/>、<select/> 这类 tag 通常有无障碍的 built-in functionality，但如果是客制的 UI components，会需要额外设定。

<!-- 这个设定让我们赋予一个 element focus 的效果 -->
<input tabindex="-1">

从这里应该可以看出来了，有些无障碍网页的实作方法，写在 HTML 元素上，那使用了 React JSX 的我们，可以直接加上这些属性吗？除了 JSX 的小问题，使用 React 的开发者，又有哪些需要注意的细节呢？请见之後的文章。

参考资料

W3C 官方介绍文件

https://www.w3.org/WAI/fundamentals/accessibility-intro/

https://www.w3.org/WAI/people-use-web/tools-techniques/

https://www.w3.org/TR/WCAG20/#visual-audio-contrast-contrast

Google Web dev 的指南

https://web.dev/a11y-tips-for-web-dev/

Tableindex 解说

https://www.wufoo.com/html5/tabindex-attribute/