在React Advanced 2025会议上,Aurora Scharff发表了题为《使用React 19和Ariakit构建交互式异步UI》的演讲,分享了ARIAKit(一个开源的无障碍库)如何使开发者能够构建符合WCAG标准的自定义UI组件,而无需深厚的无障碍专业知识。该演讲展示了一种将ARIAKit的未样式化基元与现代React模式相结合,以创建可用于生产环境的无障碍界面的实践方法。
ARIAKit提供了未样式化的、具备无障碍功能的UI基元,可自动处理键盘导航、屏幕阅读器支持和ARIA属性。该库已在包括WordPress Gutenberg和WooCommerce在内的主要项目中获得采用,遵循WAI-ARIA标准,同时允许完全的样式设计自由。与完全样式化的组件库不同,ARIAKit导出可组合的基元,开发者可以使用任何样式解决方案(包括Tailwind CSS)进行自定义。
演讲者阐述了需要实现自定义设计同时保持无障碍性的开发者所面临的挑战。在一些国家,公共应用必须依法遵守WCAG 2标准,不合规可能会导致罚款。然而,许多开发团队缺乏专门的无障碍资源,这在设计需求和实现能力之间造成了差距。
演示从一个非无障碍的账户选择器组件开始,展示了常见的无障碍缺陷,包括缺少键盘导航、Esc键处理无效以及缺乏屏幕阅读器支持。最初的实现依赖于通用的div元素,并通过多个useState钩子和冗长的事件处理代码进行手动状态管理。
向无障碍组件的转换涉及将通用HTML元素替换为ARIAKit基元。一个SelectProvider组件管理交互状态,而Select、SelectPopover和SelectItem组件提供了结构。ARIAKit自动应用适当的ARIA属性并处理键盘交互,包括方向键导航和焦点管理。
演讲重点介绍了ARIAKit如何通过数据属性而非传统的状态管理来实现样式设计。开发者无需手动管理悬停和焦点状态,而是可以使用ARIAKit自动应用的data-active-item和data-focus-visible等属性来设置组件样式。这种方法对于键盘用户尤其有价值,因为他们需要比鼠标用户更高对比度的焦点指示器。
与React 19功能的集成展示了ARIAKit组件如何与现代异步模式协同工作。演讲者使用useTransition来协调服务器操作与UI更新,消除了闪烁的等待状态。useOptimistic钩子为状态变化提供了即时反馈,同时在出错时保持自动回滚。服务器函数取代了传统的API端点,通过允许从客户端组件直接调用函数来简化架构。
ARIAKit以MIT许可证作为开源库提供,在ariakit.org上有活跃的开发和全面的文档。该库适用于React 17及以上版本,其基元可以通过npm、yarn或pnpm包管理器安装。