W3Cschool
恭喜您成為首批注冊(cè)用戶
獲得88經(jīng)驗(yàn)值獎(jiǎng)勵(lì)
用于改善屏幕閱讀器的可訪問(wèn)性的功能類(lèi)。
Class
|
Properties
|
---|---|
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; |
not-sr-only | position: static; width: auto; height: auto; padding: 0; margin: 0; overflow: visible; clip: auto; white-space: normal; |
使用 ?sr-only
? 來(lái)隱藏一個(gè)元素,而不對(duì)屏幕閱讀器隱藏。
<a href="#">
<svg><!-- ... --></svg>
<span class="sr-only">Settings</span>
</a>
使用 ?not-sr-only
? 來(lái)撤銷(xiāo) ?sr-only
?,使一個(gè)元素對(duì)視力用戶和屏幕閱讀器都可見(jiàn)。當(dāng)您想在小屏幕上隱藏某些元素,但在大屏幕上顯示它時(shí),這很有用。
<a href="#">
<svg><!-- ... --></svg>
<span class="sr-only sm:not-sr-only">Settings</span>
</a>
默認(rèn)情況下,?responsive
?和 ?focus
?變體是為這些功能類(lèi)生成的。您可以使用 ?focus:not-sr-only
? 來(lái)使一個(gè)元素在默認(rèn)情況下被隱藏,但當(dāng)用戶用 tab 鍵點(diǎn)擊它時(shí),它又是可見(jiàn)的—這對(duì) ?skip to content
? 鏈接很有用。
<a href="#" class="sr-only focus:not-sr-only">
Skip to content
</a>
默認(rèn)情況下, 針對(duì) accessibility 功能類(lèi),只生成 responsive, focus-within and focus 變體。
您可以通過(guò)修改您的 ?tailwind.config.js
? 文件中的 ?variants
?部分中的 ?accessibility
?屬性來(lái)控制為 accessibility 功能生成哪些變體。
例如,這個(gè)配置也將生成 hover and active 變體:
// tailwind.config.js
module.exports = {
variants: {
extend: {
// ...
accessibility: ['hover', 'active'],
}
}
}
如果您不打算在您的項(xiàng)目中使用 accessibility 功能,您可以通過(guò)在配置文件的 ?corePlugins
?部分將 ?accessibility
?屬性設(shè)置為 ?false
?來(lái)完全禁用它們:
// tailwind.config.js
module.exports = {
corePlugins: {
// ...
accessibility: false,
}
}
Copyright©2021 w3cschool編程獅|閩ICP備15016281號(hào)-3|閩公網(wǎng)安備35020302033924號(hào)
違法和不良信息舉報(bào)電話:173-0602-2364|舉報(bào)郵箱:jubao@eeedong.com
掃描二維碼
下載編程獅App
編程獅公眾號(hào)
聯(lián)系方式:
更多建議: