Screen Reader Storybook 擴充功能

在 Github 上檢視

Storybook 螢幕閱讀器擴充功能

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。
  • 導覽到新的「螢幕閱讀器」標籤。
  • 啟用語音/文字選項。
  • 使用 Alt + Tab 或 Option + Tab 導覽您的頁面。

示範

此專案的 CI 整合在 Netlify 中部署了一個示範 Storybook,因此您可以自行檢查。

示範

回饋

歡迎所有回饋!您可以在儲存庫中建立任何問題,我會盡快與您聯繫。

貢獻

您想貢獻嗎?太棒了!

只需 fork 此專案並開啟一個 PR,我會盡力幫助您。