Utilities for improving accessibility with screen readers.
Use sr-only
to hide an element visually without hiding it from screen readers:
<a href="#">
<svg><!-- ... --></svg>
<span class="sr-only">Settings</span>
</a>
Use not-sr-only
to undo sr-only
, making an element visible to sighted users as well as screen readers. This can be useful when you want to visually hide something on small screens but show it on larger screens for example:
<a href="#">
<svg><!-- ... --></svg>
<span class="sr-only sm:not-sr-only">Settings</span>
</a>
By default, responsive
and focus
variants are generated for these utilities. You can use focus:not-sr-only
to make an element visually hidden by default but visible when the user tabs to it — useful for "skip to content" links:
<a href="#" class="sr-only focus:not-sr-only">
Skip to content
</a>
By default, only responsive, focus-within and focus variants are generated for accessibility utilities.
You can control which variants are generated for the accessibility utilities by modifying the accessibility
property in the variants
section of your tailwind.config.js
file.
For example, this config will also generate hover and active variants:
// tailwind.config.js
module.exports = {
variants: {
extend: {
// ...
+ accessibility: ['hover', 'active'],
}
}
}
If you don't plan to use the accessibility utilities in your project, you can disable them entirely by setting the accessibility
property to false
in the corePlugins
section of your config file:
// tailwind.config.js
module.exports = {
corePlugins: {
// ...
+ accessibility: false,
}
}