参加在线直播: 周四,美国东部时间上午11点,Storybook 9 发布 & AMA

一个 Screen Reader Storybook 插件

在 Github 上查看

Storybook Screen Reader 插件

Storybook Demo NPM Version Known Vulnerabilities Security Score Pipeline status Netlify Status

在 Storybook 插件面板中显示一个自定义的屏幕阅读器插件。开发者无需外部屏幕阅读器或复杂程序即可快速测试其可访问性。

它允许为语音和文本提供单独的输出。

免责声明

这是一个有很多方面需要改进的初始项目。

仅涵盖了屏幕阅读器和键盘导航的少数用例,不旨在取代使用真实屏幕阅读器进行的完整测试。

这是一个个人项目,我在提升自己的可访问性知识的同时,帮助我深入理解屏幕阅读器的工作原理,还有什么比尝试自己构建一个更好的方法呢,对吧?

安装

就像任何普通的 NPM 包一样。

安装为开发依赖

npm install -d addon-screen-reader

yarn add -dev addon-screen-reader

将插件添加到你的插件文件 (通常是 .storybook/main.js)

module.exports = {
  addons: ['addon-screen-reader'],
};

用法

  • 运行你的项目中的 storybook。
  • 导航到新的“Screen Reader”标签页。
  • 启用语音/文本选项。
  • 通过 Alt + Tab 或 Option + Tab 导航你的页面。

演示

该项目的 CI 集成在 netlify 中部署了一个演示 storybook,因此你可以亲自查看。

演示

反馈

欢迎所有反馈!你可以在仓库中创建任何问题,我会尽快与你联系。

贡献

你想贡献吗?太好了!

只需 fork 这个项目并创建一个 PR,我会提供你需要的帮助。