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

问题描述 投票:0回答:1

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

reactjs accessibility
1个回答
0
投票

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

我将从

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

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

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

首先,您需要集成

useTabListState()
中的
@react-stately/tabs
钩子以响应鼠标、触摸和键盘事件。

它生成的

state
对象将被传递到以下
@react-aria/tabs
钩子,每个钩子都会公开要应用于各自元素的必要 DOM/ARIA 属性:

  • useTabList()
  • useTab()
  • useTabPanel()

您可以进一步查看 Github 上的 docssource code

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

© www.soinside.com 2019 - 2024. All rights reserved.