Tailwind CSS 屏幕閱讀器

屏幕閱讀器

用于改善屏幕閱讀器的可訪問(wèn)性的功能類(lèi)。

使用

使用 ?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,
    }
  }