Утилиты для улучшения доступности с помощью программ чтения с экрана.
Используйте sr-only, чтобы скрыть элемент визуально, не скрывая его от программ чтения с экрана:
<a href="#">
<svg><!-- ... --></svg>
<span class="sr-only">Настройки</span>
</a>Используйте not-sr-only, чтобы отменить sr-only, сделав элемент видимым для зрячих пользователей, а также для программ чтения с экрана. Это может быть полезно, когда вы хотите визуально скрыть что-то на маленьких экранах, но показать это на больших экранах, например:
<a href="#">
<svg><!-- ... --></svg>
<span class="sr-only sm:not-sr-only">Настройки</span>
</a>По умолчанию для этих утилит генерируются варианты responsive и focus. Вы можете использовать focus:not-sr-only, чтобы сделать элемент визуально скрытым по умолчанию, но видимым, когда пользователь переходит на него - полезно для ссылок «перейти к содержанию»:
<a href="#" class="sr-only focus:not-sr-only">
Перейти к содержанию
</a>По умолчанию, только responsive, focus-within и focus варианты создаются для утилит accessibility.
Вы можете контролировать, какие варианты создаются для утилит accessibility для изменения свойства accessibility в разделе variants Вашего файла конфигурации tailwind.config.js.
Например, эта конфигурация также будет генерировать варианты hover и active:
// tailwind.config.js
module.exports = {
variants: {
extend: {
// ...
+ accessibility: ['hover', 'active'],
}
}
}Если Вы не планируете использовать в своем проекте утилиты для изменения accessibility, Вы можете полностью отключить их, установив для accessibility свойство значение false в разделе corePlugins Вашего файла конфигурации:
// tailwind.config.js
module.exports = {
corePlugins: {
// ...
+ accessibility: false,
}
}