Design System 101 - Visually Hidden

什麼是 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