螢幕閱讀器文字

類別

將這個 class 用在仍應供輔助技術讀取的文字上。它不是停用元素或將元素移出鍵盤導覽的方式。

視覺裁切與無障礙命名是兩件事

sr-only 讓元素脫離一般流向，將它設為 1px 的盒子，並裁切繪製區域。它不會套用 display: none、visibility: hidden 或 aria-hidden，因此文字仍可用來形成無障礙名稱。

箭頭具有 aria-hidden="true"。標籤文字由 sr-only 在視覺上裁切，並提供連結的無障礙名稱。連結本身仍然可見且可聚焦。

文字說明

1. 連結包含一個不參與無障礙名稱計算的箭頭，以及一個包含 Read the utility definition 的 span。
2. span 使用實際的 sr-only 預設樣式：絕對定位、1px 盒子、隱藏溢位與裁切。它仍留在 DOM 中，沒有設定 aria-hidden。
3. 可見連結仍占用 40px 正方形區域，並顯示箭頭。它的無障礙角色是 link，名稱為 Read the utility definition。
4. 兩個分支是同一個控制項的不同表示，不是依序執行的操作。若祖先元素從無障礙樹中隱藏，其後代元素也會一併隱藏。

將 class 放在控制項內的標籤文字上，讓控制項本身保持可見且可聚焦。標記為 aria-hidden="true" 的圖示不會參與名稱計算，便可由文字描述動作。

不要將可聚焦的控制項放進始終被裁切的區域，否則鍵盤使用者可能會移到看不見的控制項。跳至內容連結需要自行設定聚焦時顯示的樣式；預設集沒有提供 not-sr-only 反向 utility。

如果祖先元素將整個子樹移出無障礙樹，這段文字也會一併移除。sr-only 無法抵消祖先元素上的 hidden、display: none 或 aria-hidden="true"。請在實際控制項中測試最終的角色與名稱。

另見 無障礙名稱.

用法

為只有圖示的連結提供名稱，讓它開啟下方的 utility 定義。

<a href="#customize">  <span aria-hidden="true">↓</span>  <span class="sr-only">Read the utility definition</span></a>

@layer utilities {  .sr-only {    position: absolute;    width: 1px;    height: 1px;    padding: 0;    margin: -1px;    overflow: hidden;    clip: rect(0, 0, 0, 0);    white-space: nowrap;    border-width: 0  }}

自訂

預設集使用 @utility 定義這些類別。在你的樣式表中定義相同名稱，即可取代原本的定義。

@utility sr-only {  position: absolute;  width: 1px;  height: 1px;  padding: 0;  margin: -1px;  overflow: hidden;  clip: rect(0, 0, 0, 0);  white-space: nowrap;  border-width: 0;}

另見 utility 定義.