Storybook 螢幕閱讀器擴充功能
此擴充功能會在 Storybook 的擴充功能面板中顯示自訂的螢幕閱讀器。讓開發人員無需外部螢幕閱讀器或複雜程式,即可快速測試其可訪問性。
它允許語音和文字有獨立的輸出。
免責聲明
這是一個起始專案,還有許多地方需要改進。
僅涵蓋螢幕閱讀器和鍵盤導覽的一些使用案例,並不打算取代使用真實螢幕閱讀器進行的完整測試。
這是一個個人專案,當我自己在可訪問性主題上不斷進步時,也幫助我深入了解螢幕閱讀器的工作原理,還有什麼比自己嘗試建構一個更好的方式呢?
安裝
就像任何常規的 NPM 套件一樣。
以開發依賴項安裝
npm install -d addon-screen-reader
或
yarn add -dev addon-screen-reader
將擴充功能添加到您的擴充功能檔案(通常是 .storybook/main.js
)
module.exports = {
addons: ['addon-screen-reader'],
};
用法
- 執行您的專案的 Storybook。
- 導覽到新的「螢幕閱讀器」標籤。
- 啟用語音/文字選項。
- 使用 Alt + Tab 或 Option + Tab 導覽您的頁面。
示範
此專案的 CI 整合在 Netlify 中部署了一個示範 Storybook,因此您可以自行檢查。
回饋
歡迎所有回饋!您可以在儲存庫中建立任何問題,我會盡快與您聯繫。
貢獻
您想貢獻嗎?太棒了!
只需 fork 此專案並開啟一個 PR,我會盡力幫助您。