我想为我的 React 组件库添加辅助功能支持，我应该从哪里开始？

Question

有什么文件或者例子可以参考吗？我不知道如何开始..

Answer 1

感谢您考虑将可访问性作为组件库的一部分。

我将从

react-aria

开始，特别是无头钩子，它可以集成到任何具有适当 DOM 结构的 React 组件中。

钩子实现 ARIA 行为并提供应用于 React 组件的必要属性。

例如，假设您已经实现了 Tabs 模式。

首先，您需要集成

useTabListState()

中的

@react-stately/tabs

钩子以响应鼠标、触摸和键盘事件。

它生成的

state

对象将被传递到以下

@react-aria/tabs

钩子，每个钩子都会公开要应用于各自元素的必要 DOM/ARIA 属性：

• useTabList()

• useTab()

• useTabPanel()

您可以进一步查看 Github 上的 docs 和 source code。

如果您不想集成库或发现挂钩不符合人体工程学，您可以从它们中汲取灵感并以类似的方式编写自己的库，以保持辅助功能与渲染的其余部分隔离。