在前端开发中，使用 React 开发组件已经成为了大势所趋。而随着不同人群对 Web 应用程序可访问性需求的不断增加，我们需要更好的接口让屏幕阅读器和其他易用性工具分辨特定元素或定位特定状态。本文将介绍 npm 包 babel-plugin-jsx-aria，它可以帮助我们指定应用程序中的 tabIndex、aria-* 属性和其他辅助功能属性，以使用户更容易访问页面。
安装
你需要安装的软件为 babel 和 npm。使用以下命令安装：
npm install --save-dev babel-plugin-jsx-aria
下面我们将简要介绍如何在 Babel 中设置此插件。
配置
创建 .babelrc 文件并在其中添加以下配置：
{
"plugins": ["jsx-aria"]
}使用
babel-plugin-jsx-aria 可以指定通过设置 props 的方式设置 tabIndex、aria-* 属性和其他辅助功能属性。
tabIndex
tabIndex 属性控制元素的聚焦顺序。你应该将 tabIndex 属性设置为 0 以确保它们被完全包含在组件中，并且用户可以使用 Tab 键转到它们。例如：
-- -------------------- ---- -------
------ ----- ---- --------
----- ------- - -- -- -
---- -------------
--------- -----------
------
--
------ ------- --------ARIA 属性
ARIA 属性被用来给网站添加更多意义。你可以使用 ARIA 属性“aria-label”为无障碍用户提供文本标签。任何元素都可以使用 aria-* 属性。
-- -------------------- ---- -------
------ ----- ---- --------
----- ------- - -- -- -
------- ------------------
--
---------
--
------ ------- --------其他辅助功能属性
除了 tabIndex 和 aria-* 属性之外，还可以使用其他辅助功能属性。这些属性应该被用来帮助屏幕阅读器分辨页面中不同元素的状态。下面是一些例子：
- role
- aria-haspopup
- aria-controls
- aria-expanded
-- -------------------- ---- -------
------ ----- ---- --------
----- ------- - -- -- -
-------
-------------
--------------------
-------------------------
----------------------
--
---------
--
------ ------- --------总结
babel-plugin-jsx-aria 是一个非常实用的 npm 包，它可以帮助我们指定组件的一些辅助功能属性，以便屏幕阅读器和其他易用性工具能够更好地理解我们的页面。如果你想要让你的组件变得更加易于访问，那么你应该一定尝试使用 babel-plugin-jsx-aria。
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/60055cbc81e8991b448da4aa