React 是目前最流行的前端框架之一，它能够极大地提高开发者的生产力。但是，一个好的应用不仅仅要追求美观和功能，还要追求可访问性，也就是能够让每个用户都能够方便且平等地使用。那么在 React 应用中，如何实现可访问性呢？
理解可访问性
首先，我们需要理解可访问性的概念。可访问性是指一个产品、服务或环境，能够被所有人包括身体障碍、认知障碍以及技术障碍的人群使用。可访问性不仅仅是为了满足法律要求，更是关乎人权的问题。
对于一个网站或应用来说，实现可访问性意味着你需要考虑和优化以下方面：
- 语义化 HTML：正确使用 HTML 标签、表单元素、图像等可以帮助用户理解页面结构，这些对于屏幕阅读器和其他辅助工具非常重要。
- 可见性：确保网站的所有内容都能被用户看到，例如，颜色对比度、字体大小等。此外，你还需要支持用户自定义样式，比如白底黑字，以应对一些用户视力的差异。
- 可操作性：保证所有的交互元素都是可操作的，并且可以使用鼠标、键盘和触摸等多种方式进行访问。当用户使用键盘浏览网页时，要注意“当前焦点位置”并且要相应地添加语义化的意义与交互体验。
- 反馈：用户需要能够及时了解自己的操作结果和状态，例如，提交表单时需要正确的提交成功或失败的反馈。对于功能或连接的异常状态，需要给用户详细的错误信息。
只有考虑到这些方面，我们的应用才能真正做到全面可访问。
用 React 实现可访问性
在 React 应用中，实现可访问性可以通过以下几个方面来实现。
1. 语义化 HTML
最基本的做法是在应用中正确地使用 HTML 标签，例如使用<button>标签而不是<a>标签来实现按钮。同时，为了确保屏幕阅读器等辅助工具能够正确地解读页面，你还需要考虑添加一些 ARIA 属性。
ARIA 是诸多 API 的缩写，全称 Accessible Rich Internet Applications，意为“无障碍富互联网应用程序”。ARIA 的目的是提供一一些可单独识别和访问的元素，使之适应各种传感器，辅助技术及其规范下自适应知识的迅速发展。
例如，你可以使用aria-label属性来添加一个按钮的说明，在屏幕阅读器中会以语音提示用户：
<button aria-label="搜索" onClick={this.handleSearch}>搜索</button>除了 ARIA 属性之外，你还可以使用无障碍工具，例如react-axe这个库可以分析你的 React 应用，并且提示出现潜在的可访问性问题。将其加入到你的项目中非常简单，如下所示：
-- -------------------- ---- ------- ------ ----- ---- -------- ------ -------- ---- ------------ ------ --- ---- -------- ------ --- ---- ------------ ----------------------- --- -------------- ---------- --------- ------ - -------------------- --- ---------------------------------
将其加入到应用中后，在非生产环境渲染时使用，就可以及时发现可访问性的问题。
2. 提供可配置的样式
确保所有内容的可见性对于提高可访问性至关重要。你需要确保你的应用的内容可以清晰地显示在不同的屏幕上。
可以使用 CSS 变量来创建一些默认的颜色、大小等变量。同时，还需要提供一些简单的设置选项，让用户可以根据自己的喜好配置样式。
例如，你可以提供一个“高对比度”模式，让用户可以更容易地阅读内容。在这个模式下，你可以使用更加明亮的颜色，以便于让用户在不同的视力情况下观看应用。同时，你还可以使用更大、更清晰的字体。
3. 支持键盘和触摸操作
还有很多用户无法使用鼠标进行访问，例如使用屏幕阅读器或者物理障碍。保证你的应用支持键盘和触摸操作可以让这些用户更加方便地使用你的应用。
首先，你需要确保所有的元素都能够由键盘操作，这些通常都是简单按钮、链接、输入框等等。
其次，在设计一些交互元素时，你需要支持键盘焦点。例如，如果你在网站上有一个侧边栏链接，当用户按下 TAB 键时，应该将焦点移到侧边栏链接上，让用户可以更方便地使用链接。
最后，当用户使用触摸设备时，也需要确保所有的操作都是可用的。
以下是一个示例，用来添加焦点状态和用键盘触发选定元素的样式。
button:focus {
box-shadow: 0 0 0.25rem 0.125rem #7b9ce2;
}4. 提供反馈信息
当用户进行操作时，他们需要准确的反馈信息，以检查自己操作的效果。在设计交互时记得包括反馈信息，例如成功/失败信息、错误信息等等。
一个好的实践是使用 ARIA 属性，例如aria-live属性，它可以使某个元素可以在屏幕阅读器中防止自动更新。这可以帮助你的用户更加快速地消化反馈信息。
<div aria-live="assertive">提交成功</a>
结论
React 应用中真正实现可访问性需要考虑多个方面，它不仅是为某些用户提供辅助，也是每个用户的权利。在设计应用时，这更应该是一个原则和稳定态的引导思想。使用 ARIA 属性，语义化 HTML，合理设计交互，提供反馈等等都是确保应用可访问性的关键。记住，让你的应用更加可访问不但是一项好的实践，更是关乎人权的问题。
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/67136052ad1e889fe20c713b