花一些时间让您的 React 应用程序可访问性可以帮助确保更广泛的人可以使用您正在构建的所有惊人的界面. 幸运的是,改进应用程序的可访问性往往只需要对您的组件进行小的更改。
快速入门 可访问性
构建可访问的应用意味着帮助尽可能多的人与应用程序的界面进行交互。这包括有听力,认知,神经系统,身体,语音和视力障碍的人。
<$>[注]a11y是可访问性的号码。它指的是第一个和最后一个字母,以及之间有11个字母。
谁的可访问性?
简短的答案是,可访问性适用于每个人! ✨ 可访问的应用程序往往具有更好的用户体验(UX),因为它们具有更直观的交互性。
<$>[注] 可访问的应用程序为每个人改善用户体验,而不仅仅是那些与应用程序不同于平均用户互动的人。
让 React 可访问
幸运的是,在React中没有什么是不可访问的,但是考虑到React应用是基于组件的,你可以很容易地失去你的应用程序从更广泛的视图中是多么容易访问的。
让我们来看看 React 应用程序更易于访问的五种具体方法。
1、使用语义标记来构建您的应用程序
<$>[注] 语义标记是使用标题为目的的元素的HTML。
我们大多数的 React 开发人员都很舒服,使用我们可信赖的div元素,而使用div并使用语义 HTML 可以非常有帮助,因为几个原因:
- 屏幕阅读器更好地理解每个元素的重要性.
- 代码库本身对开发人员来说变得更加自我解释
要了解为什么语义HTML是有用的,让我们先看看一个只使用div的非分类列表组件:
1...
2render() {
3 return (
4 <div>
5 <div className='title'>
6 Favourite Foods
7 </div>
8 <div className='list'>
9 <div className='item'>
10 - Sushi
11 </div>
12 <div className='item'>
13 - Pizza
14 </div>
15 </div>
16 </div>
17 )
18}
除非考虑到类和结构,否则这个组件是怎么回事并不清楚。 屏幕阅读器绝对不能说这些元素应该是什么,所以我们可以认为这个列表相当无法访问。
让我们现在用语义HTML再次尝试一下:
1...
2render() {
3 return (
4 <section>
5 <h2>Favourite Foods</h2>
6 <ol>
7 <li>Sushi</li>
8 <li>Pizza</li>
9 </ol>
10 </section>
11 )
12}
作为开发人员,我们现在可以清楚地看到这些元素是什么,屏幕阅读器也知道它们的目的。
<$>[注] 默认情况下,请尝试在您的组件中使用非 div 元素. 通常有更好的选项可以大大提高可访问性和可读性(如头部、脚部、部分、侧面等)。
使用ARIA属性升级语义标记
ARIA 是 Accessible Rich Internet Applications 的缩写,不需要 ARIA 属性,可以被认为是帮助各种设备读取 HTML 的补充。
正如我们上面所看到的,语义标记使您的代码库更易于阅读的屏幕读者. 我们现在可以得到更具体的ARIA属性。
假设我们得到指示添加一个增加某些东西的按钮. 一个选项是创建一个div,并像这样添加一个onClick事件:
1...
2render() {
3 return {
4 <div>
5 <div>Increment Something</div>
6 <div onClick={this.incrementSomething}>
7 +
8 </div>
9 <div/>
10 )
11}
不幸的是,屏幕阅读器不会知道这个组件是一个按钮或标签与它相关。
现在让我们看看一个更易于访问的版本:
1...
2render() {
3 return (
4 <button
5 onClick={this.incrementSomething}
6 aria-label='Increment Something'>
7 +
8 </button>
9 )
10}
与第一个例子相比,屏幕阅读器现在知道这是一个按钮,因为我们正在使用一个原生HTML按钮。
现在,假设您无法将您的组件转换为按钮,或者您想在用户界面(UI)中保留标签。 没有问题. 我们可以使用角色和aria-labelledby属性来保持屏幕阅读器在循环中。
1...
2render() {
3 return (
4 <>
5 <h3 id='incrementButtonTitle>
6 Increment Something
7 </h3>
8 <div
9 onClick={this.incrementSomething}
10 role='button'
11 aria-labelledby='incrementButtonTitle'>
12 +
13 </div>
14 </>
15 )
16}
角色插件告诉屏幕阅读器,该元素应该作为原生HTML按钮读取,而aria-labelledby属性表示,具有该ID的元素(<h3>)是按钮的标签。
3、使用一个元素的集中式风格
浏览器的默认焦点风格不是你会看到的最漂亮的风格,但它对于使用键盘导航应用程序非常有帮助。
要查看浏览器的集中式风格,请尝试点击Tab几次,您应该看到当前集中的元素周围的边界。
点击几次后,想象边界不在导航栏中的那个链接周围,你无法使用鼠标。
最简单的解决方案是始终留下浏览器的默认焦点风格。 或者,如果默认风格不适合您的设计,请将默认风格与此类的自定义风格覆盖:
1a.nav-links:focus {
2 outline: 0;
3 border-bottom: 2px solid pink;
4}
<$>[注]一般来说,网页是固有的可用性。设计决策,如删除焦点风格,可以降低网站的可用性。
四、向重要部位打字
允许人们仅使用他们的键盘导航您的应用程序是提高可访问性的一种很好的方法。
这样做的一种方法是利用tabindex属性,它允许开发者控制焦点的元素的顺序,同时在默认顺序之外键入。
<$>[注] 只有可以交互的元素(如输入)被包含在标签顺序中。
默认情况下, tab 顺序是元素在 DOM 中显示的顺序。
1...
2render() {
3 return (
4 <footer>
5 <a href='#link1' tabindex='3'>
6 first
7 </a>
8 <a href='#link2' tabindex='2'>
9 second
10 </a>
11 <a href='#link3' tabindex='1'>
12 third
13 </a>
14 </footer>
15 )
16}
在这种情况下,而不是按它们出现的顺序键入链接(第一,第二,第三),tabindex控制了顺序(第三,第二,第一)。
有几种方法可以更改默认卡的顺序:
- 正数:‘tabindex’ 以序列读取,而‘tabindex=’1’ 是第一个接收焦点的(然后是 2, 3, 100,等等)。
- 负数:使用负数将防止从键盘上访问某个元素(例如 `tabindex='-3'),但对于提高可访问性是罕见的。
<$>[警告] 始终测试将 tabindex 添加到您的 React 组件中的 UX,以确保它比阻碍用户更有帮助。
5、图像上的文字
alt(或alternate)属性是使您的React应用程序更易于访问的另一个快速方法.当屏幕阅读器到达图像时,它会大声阅读alt文本以提供图像内容的描述。
1const AlligatorImg = () => (
2 <img
3 src='./img/alligator.png'
4 alt='Alligator coming out of water with mouth open'
5 />
6)
alt文本的目的是让听到它的人理解图像的内容,它应该足够具体,使人能够想象图像而不看它。
您的 alt 文本不需要包含图像或图像。屏幕阅读器已经知道这是一个图像,因为它是一个图像元素,所以不需要添加它! <$>
作为一个一般的规则,尝试保持你的alt文本简洁(大约20到100个字符),但仍然描述性。
进一步阅读
总的来说,可访问性是一个很大的话题,有许多方法可以最大限度地增加多少人可以使用您的所有惊人的React应用程序。
如果你想做一个更深的潜水,请查看 WAI (Web Accessibility Initiative)的更多提示。