Storybook Screen Reader 插件
在 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,我会提供你需要的帮助。