Компонент VisuallyHidden в WordPress используется для скрытия текста на экране, делая его видимым только для вспомогательных технологий, например, экранных читалок. Это полезно для повышения доступности, когда текстовая информация должна быть доступна для пользователей с ограниченными возможностями, но не должна отображаться визуально.
Пример базового использования VisuallyHidden
import { VisuallyHidden } from '@wordpress/components';
function BasicVisuallyHiddenExample() {
return (
<VisuallyHidden>
<label>Код — это поэзия</label>
</VisuallyHidden>
);
}
В этом примере текст внутри <label> будет скрыт на экране, но будет доступен для экранных читалок, улучшая доступность контента для людей с нарушениями зрения.
Наилучшие практики при использовании VisuallyHidden
Компонент VisuallyHidden использует position: absolute для скрытия элемента. Следует учитывать его поведение в стековых контекстах, так как скрытый элемент может все равно повлиять на компоновку страницы. Например, VisuallyHidden может игнорировать стили переполнения (overflow) предков и выходить за их пределы. В некоторых случаях это может вызвать появление полос прокрутки.
Решение проблем со стековыми контекстами
Чтобы избежать появления нежелательных эффектов, таких как полосы прокрутки, можно установить position: relative для ближайшего родительского элемента VisuallyHidden, чтобы создать новый стековый контекст.
function ExampleWithStackingContext() {
return (
<div style={{ position: 'relative' }}>
<VisuallyHidden>
<p>Этот текст будет скрыт, но виден для экранных читалок</p>
</VisuallyHidden>
</div>
);
}
Свойства компонента VisuallyHidden
Компонент VisuallyHidden очень простой и не требует сложных настроек. Все содержимое, переданное в children, будет скрыто визуально, но доступно для технологий чтения с экрана. У VisuallyHidden нет дополнительных свойств, поэтому основное внимание уделяется тому, как правильно использовать его для повышения доступности.
Пример с текстом-инструкцией для экранных читалок
Использование VisuallyHidden полезно, когда необходимо добавить скрытую текстовую инструкцию к форме, чтобы улучшить пользовательский опыт для людей, использующих экранные читалки.
function FormWithHiddenInstructions() {
return (
<form>
<VisuallyHidden>
<p>Заполните поля формы для завершения регистрации.</p>
</VisuallyHidden>
<label htmlFor="username">Имя пользователя</label>
<input type="text" id="username" name="username" />
<label htmlFor="password">Пароль</label>
<input type="password" id="password" name="password" />
</form>
);
}
Пример с кнопкой и скрытым текстом
Добавление скрытого текста к кнопкам может улучшить понимание их назначения, особенно если кнопка представлена только иконкой.
function IconButtonWithHiddenText() {
return (
<button aria-label="Закрыть окно">
<VisuallyHidden>Закрыть окно</VisuallyHidden>
<span aria-hidden="true">×</span>
</button>
);
}
Здесь скрытый текст «Закрыть окно» обеспечивает ясность для пользователей экранных читалок, в то время как символ «×» отображается для визуальных пользователей.
Заключение
Компонент VisuallyHidden — это мощный инструмент для повышения доступности сайтов. С его помощью можно предоставлять важную информацию для пользователей с ограниченными возможностями, при этом не загромождая визуальный интерфейс.