Tailwind CSS 屏幕閱讀器

屏幕閱讀器

用于改善屏幕閱讀器的可訪問性的功能類。

使用

使用 ?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 鍵點擊它時，它又是可見的—這對 ?skip to content? 鏈接很有用。

<a href="#" class="sr-only focus:not-sr-only">
  Skip to content
</a>

自定義

變體

默認情況下， 針對 accessibility 功能類，只生成 responsive, focus-within and focus 變體。

您可以通過修改您的 ?tailwind.config.js? 文件中的 ?variants ?部分中的 ?accessibility ?屬性來控制為 accessibility 功能生成哪些變體。

例如，這個配置也將生成 hover and active 變體:

  // tailwind.config.js
  module.exports = {
    variants: {
      extend: {
        // ...
       accessibility: ['hover', 'active'],
      }
    }
  }

禁用

如果您不打算在您的項目中使用 accessibility 功能，您可以通過在配置文件的 ?corePlugins ?部分將 ?accessibility ?屬性設置為 ?false ?來完全禁用它們：

  // tailwind.config.js
  module.exports = {
    corePlugins: {
      // ...
     accessibility: false,
    }
  }