提升螢幕報讀機之無障礙功能的功能。
透過 sr-only
可以在視覺上隱藏元素但不會影響到螢幕報讀機:
<a href="#">
<svg><!-- ... --></svg>
<span class="sr-only">Settings</span>
</a>
使用 not-sr-only
可以復原 sr-only
,讓元素可以被使用者跟螢幕報讀機判讀,這便於當你想要在小螢幕時,在視覺上的隱藏某個元件,但是在大螢幕要顯示的情況,舉個例子:
<a href="#">
<svg><!-- ... --></svg>
<span class="sr-only sm:not-sr-only">Settings</span>
</a>
預設情況下, responsive
跟 focus
會生成這個功能,你可以透過使用 focus:not-sr-only
讓元素在預設的情況隱藏,但在使用者 tab 到該元素時顯示 - 尤其利於 “前往内容” 連結:
<a href="#" class="sr-only focus:not-sr-only">
Skip to content
</a>
默認情況下, 只有 響應式、focus-within 和 focus 的 accessibility 變化模式 (variants) 會產生。
在 tailwind.config.js
的 variants
區塊中變更 accessibility
屬性來決定有哪些變化模式會生成。
舉個例子來說,這個設定將會生成 響應式 和 hover 的變化模式。
// tailwind.config.js
module.exports = {
variants: {
extend: {
// ...
+ accessibility: ['responsive', 'hover'],
}
}
}
如果你不打算在專案中使用 accessibility 功能,可以在你的設定檔裡的 corePlugins
屬性中將 accessibility
設定為 false
來停用功能:
// tailwind.config.js
module.exports = {
corePlugins: {
// ...
+ accessibility: false,
}
}