sr

sr

This plugin has been deprecated. According to the latest comments in the original h5bp issue thread (linked from the blog post in the below issue description), the out-of-order reading is no longer occuring in macOS VoiceOver. It is now safe to use the original sr utilities in Tailwind!

This plugin adds screenreader utilities to Tailwind. Tailwind ships with its own variation, so you need to turn off accessibility in the corePlugins.

Read more discussion here on the default implementation compared to this plugin.

Usage

const plugins = require('@viget/tailwindcss-plugins')

module.exports = {
  corePlugins: [
    accessibility: false,
  ],
  plugins: [
    plugins.sr,
    // ...
  ],
}

The above configuration would create the following css, as well as their responsive variants:

.sr-only {
  border: 0;
  clip: rect(0 0 0 0);
  height: 1px;
  margin: -1px;
  overflow: hidden;
  padding: 0px;
  position: absolute;
  width: 1px;
}

.sr-undo {
  clip: auto;
  height: auto;
  margin: 0;
  overflow: visible;
  position: static;
  width: auto;
}

.sr-undo-absolute {
  clip: auto;
  height: auto;
  margin: 0;
  overflow: visible;
  position: absolute;
  width: auto;
}

Skip Links

The .sr-undo-absolute utility is especially helpful for skip links, when you want to preserve position: absolute.

For example:

<a href="#content" class="sr-only focus:sr-undo-absolute">Skip to Main Content</a>