什麼是 Visually Hidden

Visually Hidden 是一個可以讓某些資訊在畫面上隱藏，但在螢幕閱讀器 (Screen Reader) 上可以讀取到的元件。在 WebAim 有提到相關的內容，大家可以參考一下 WebAim - Visually Hidden。

為什麼要使用 Visually Hidden

當今天你一如往常地開啟 X (前身 Twitter)，學習當今最新潮的技術，這時你看到一個 thread 裡面的內容大概是這樣的：

🐔 👬 🦆 🗣

明眼人一看就知道這是『雞同鴨講』的意思並且嘴角上揚了一下。但如果是透過 Screen Reader 的使用者可能就沒辦法有這種體驗，可能會遇到沒辦法辨識又或是會產生出奇怪的解釋。

所以就有了 <VisuallyHidden /> 這個元件，並且可以這樣使用：

<div>
  <VisuallyHidden>雞同鴨講</VisuallyHidden>
  <span>🐔 👬 🦆 🗣</span>
</div>

如此一來，我們就可以透過 Screen Reader 將『雞同鴨講』傳達給使用者！

Visually Hidden 的實作

第一步驟 - 透過 plop 建立 Visually Hidden 的組件

首先我們需要透過先前提到的 組件模板 產生出一個新的組件專案，來建立 Visually Hidden 的元件。如果還沒建立專案，可以先看這裡篇文章！

pnpm generate // name: visually-hidden

第二步驟 - 實作 Visually Hidden 的組件

import VisuallyHidden from './visually-hidden'

export default () => {
  return (
    <div>
      <VisuallyHidden>雞同鴨講</VisuallyHidden>
      <span>🐔 👬 🦆 🗣</span>
    </div>
  )
}

這樣就完成了，主要就是把元件內容透過 CSS 的方式讓元件在畫面中隱藏，但是在螢幕閱讀器上可以讀取到。

這裡也附上 Visually Hidden 的 測試 與 Storybook，讓大家參考！

最後再透過 changest 來產生 changelog，就完成了我們的第一個元件了！

> design-system/ pnpm changest

參考資料

1. Beware smushed off-screen accessible text