使React应用程序更易于访问

来自菜鸟教程
跳转至：导航、​搜索

花一些时间让你的 React 应用程序可访问可以帮助确保更广泛的人可以使用你正在构建的所有令人惊叹的界面。 值得庆幸的是，提高应用程序的可访问性通常只需要对您的组件进行微小的更改。

可访问性快速介绍

构建可访问的应用程序意味着帮助尽可能多的人与您的应用程序界面进行交互。 这包括有听觉、认知、神经、身体、言语和视觉障碍的个人。 它还可能包括临时情况，例如手腕骨折，这可能会阻止某人像往常一样与应用程序交互。

“a11y”是“可访问性”的代名词。 它指的是第一个和最后一个字母，以及它们之间的 11 个字母。 🤓


可访问性适用于谁？

简短的回答是，可访问性适合所有人！ ✨ 可访问的应用程序通常具有更好的用户体验 (UX)，因为它们具有更直观的交互。 例如，高色彩对比度使每个人都更容易阅读文本，而不仅仅是有视力障碍的人。

可访问的应用程序改善了每个人的用户体验，而不仅仅是那些与“普通用户”不同的应用程序交互的人。


使 React 可访问

值得庆幸的是，React 没有什么是天生无法访问的。 但是，鉴于 React 应用程序是基于组件的，因此很容易从更广泛的角度忘记您的应用程序的可访问性。

让我们看看 五个 使 React 应用程序更易于访问的具体方法。


1. 使用语义标记构建您的应用程序

语义标记是 HTML，它使用为其目的命名的元素。


我们大多数 React 开发人员已经对我们值得信赖的 div 元素感到非常满意。 不过，放弃 div 并改用语义 HTML 可能会非常有帮助，原因有以下几点：

  1. 屏幕阅读器可以更好地理解每个元素的重要性。
  2. 代码库本身对开发人员来说变得更加不言自明。

要了解语义 HTML 为何有用，我们先来看一个仅使用 divs 的无序列表组件： 

...
render() {
  return (
    <div>
      <div className='title'>
        Favourite Foods
      </div>
      <div className='list'>
        <div className='item'>
          - Sushi
        </div>
        <div className='item'>
          - Pizza
        </div>
      </div>
    </div>
  )
}

除非考虑到类和结构，否则尚不清楚该组件是什么。 屏幕阅读器肯定无法分辨这些元素应该是什么，因此我们可以认为这个列表非常难以访问。 🙈

现在让我们用语义 HTML 再试一次： 

...
render() {
  return (
    <section>
      <h2>Favourite Foods</h2>
      <ol>
        <li>Sushi</li>
        <li>Pizza</li>
      </ol>
    </section>
  )
}

作为开发人员，我们现在可以清楚地看到这些元素是什么，屏幕阅读器也知道它们的用途。

默认情况下，尝试在组件中使用除 div 之外的元素。 通常有更好的选项可以极大地提高可访问性和可读性（如页眉、页脚、部分、旁边等）。 ✨)


2. 使用 ARIA 属性升级语义标记

ARIA 代表 Accessible Rich Internet Applications。 ARIA 属性不是必需的，而是可以被视为帮助 HTML 被各种设备读取的补充。


正如我们在上面看到的，语义标记使您的代码库对屏幕阅读器更具可读性。 我们现在可以通过 ARIA 属性获得更具体的信息。

假设我们得到指令来添加一个增加一些东西的按钮。 一种选择是制作 div 并向其添加 onClick 事件，如下所示： 

...
render() {
  return {
    <div>
      <div>Increment Something</div>
      <div onClick={this.incrementSomething}>
        +
      </div>
    <div/>
  )
}

不幸的是，屏幕阅读器不知道这个组件是一个按钮或者标签与它相关。

现在让我们看一个更易于访问的版本： 

...
render() {
  return (
    <button
      onClick={this.incrementSomething}
      aria-label='Increment Something'>
      +
    </button>
  )
}

与第一个示例相比，屏幕阅读器现在知道它是一个按钮，因为我们使用的是原生 HTML 按钮。 它还可以从 aria-label 告诉用户按钮的作用。 💪

现在假设您由于某种原因无法将组件转换为按钮，或者您希望将标签保留在用户界面 (UI) 中。 没问题。 我们可以使用 role 和 aria-labelledby 属性来让屏幕阅读器保持循环。 

...
render() {
  return (
    <>
      <h3 id='incrementButtonTitle>
        Increment Something
      </h3>
      <div
        onClick={this.incrementSomething}
        role='button'
        aria-labelledby='incrementButtonTitle'>
        +
      </div>
    </>
  )
}

role 属性告诉屏幕阅读器该元素应作为原生 HTML 按钮读取，aria-labelledby 属性表示具有该 ID 的元素（<h3>）是按钮的标签。 🎉


3. 使用元素的焦点样式

浏览器的默认焦点样式不是您会看到的最漂亮的样式，但它对于使用键盘导航应用程序非常有帮助。

要查看浏览器的焦点样式，现在尝试点击几次 Tab，您应该会看到当前焦点元素周围的边框。


在点击几次之后，想象导航栏中的链接周围没有边框，并且您无法使用鼠标。 当没有当前焦点的视觉指示器时，几乎不可能选择预期的元素。

最简单的解决方案是始终保留浏览器的默认焦点样式。 或者，如果默认样式不适合您的设计，请使用自定义样式覆盖默认样式，如下所示： 

a.nav-links:focus {
  outline: 0;
  border-bottom: 2px solid pink;
}

一般来说，网络本质上是可访问的。 设计决策（例如删除焦点样式）会降低网站的可访问性。 这意味着如果您保留这些默认样式，则已经为您完成了很多工作！ 🌈


4. 重要部分的标签权

让人们仅使用键盘浏览您的应用程序是提高可访问性的好方法。

一种方法是利用 tabindex 属性。 它允许开发人员控制在默认顺序之外的选项卡中聚焦的元素的顺序。

只有可以交互的元素（如输入）才会包含在 Tab 键顺序中。


默认情况下，tab 顺序是元素在 DOM 中出现的顺序。 

...
render() {
  return (
    <footer>
      <a href='#link1' tabindex='3'>
        first
      </a>
      <a href='#link2' tabindex='2'>
        second
      </a>
      <a href='#link3' tabindex='1'>
        third
      </a>
    </footer>
  )
}

在这种情况下，tabindex 控制顺序（第三、第二、第一），而不是按它们出现的顺序（第一、第二、第三）在链接中切换。

有几种方法可以更改默认的 Tab 键顺序：

  • 正数：顺序读取tabindex，tabindex='1'是第一个获得焦点的（然后是2、3、100等）。
  • 负数：使用负数将阻止从键盘访问元素（例如 tabindex='-3') 但在提高可访问性方面并不常见。
  • Zero：零/0 的 tabindex 将允许用户使用选项卡来跳转到其他方式无法跳转到的元素。 如果您无法使用语义 HTML，这会很有用。

始终测试向 React 组件添加 tabindex 的 UX，以确保它对用户的帮助大于对用户的阻碍。 如果您的 HTML 是语义化的，则不需要 tabindex。


5. 图像上的替代文字

alt（或“alternate”）属性是使您的 React 应用程序更易于访问的另一种快速方法。 当屏幕阅读器到达图像时，它将大声读出 alt 文本以提供图像内容的描述。 

const AlligatorImg = () => (
  <img
    src='./img/alligator.png'
    alt='Alligator coming out of water with mouth open'
  />
)

alt 文本的目的是让听到它的人理解图像的内容。 它应该足够具体，以至于人们可以在没有看到图像的情况下想象图像。

您的替代文本不需要包含诸如“图片”或“图片”之类的短语。 屏幕阅读器已经知道这是一张图片，因为它是一个图像元素，所以不需要添加它！ 🤓


作为一般规则，请尽量保持 [X36X] 文本简洁（大约 20-100 个字符）但仍具有描述性。 过于简洁（如 alt='alligator'）不会告诉您的用户太多关于照片的信息。


延伸阅读

总的来说，可访问性是一个很大的话题，有很多方法可以最大限度地让多少人使用你所有令人惊叹的 React 应用程序。

如果您想深入了解，请查看 WAI（Web Accessibility Initiative） 以获取更多提示。

取自“https://cainiaojiaocheng.com/index.php?title=使React应用程序更易于访问&oldid=27550”
Powered by MediaWiki