Удаление элементов со страницы может показаться простой задачей, но важно учитывать, как это повлияет на поисковую оптимизацию (SEO) и доступность для программ-скринридеров. Если сделать это неправильно, можно ненароком снизить рейтинг страницы или сделать её менее доступной для людей с ограниченными возможностями. В этой статье мы рассмотрим несколько подходов, которые помогут избежать этих проблем.
Скрытие элементов с помощью screen-reader-text
Один из способов удаления элемента с экрана, сохранив его доступность для скринридеров и поисковых систем, — использование класса .screen-reader-text:
.screen-reader-text {
position: absolute;
top: -9999px;
left: -9999px;
}
Присвоив элементу этот класс, мы выведем его за пределы видимой области, но оставим доступным для скринридеров. Такой метод эффективен для предотвращения проблем с переполнением при скроллинге, что часто возникает при использовании display: none; или visibility: hidden;.
Альтернативный подход от Snook
Snook предлагает ещё один способ, который обеспечивает большую надёжность и поддерживает кроссбраузерную совместимость:
.element-invisible {
position: absolute !important;
height: 1px;
width: 1px;
overflow: hidden;
clip: rect(1px, 1px, 1px, 1px); /* Поддержка IE6, IE7 */
}
Этот код делает элемент практически невидимым и не нарушает работу скринридеров.
Решение от WordPress
WordPress использует собственный класс .screen-reader-text, который не только скрывает элемент, но и учитывает его отображение при фокусировке:
.screen-reader-text {
border: 0;
clip: rect(1px, 1px, 1px, 1px);
clip-path: inset(50%);
height: 1px;
margin: -1px;
overflow: hidden;
padding: 0;
position: absolute;
width: 1px;
word-wrap: normal !important;
}
.screen-reader-text:focus {
background-color: #eee;
clip: auto !important;
clip-path: none;
color: #444;
display: block;
font-size: 1em;
height: auto;
left: 5px;
line-height: normal;
padding: 15px 23px 14px;
text-decoration: none;
top: 5px;
width: auto;
z-index: 100000; /* Выше панели инструментов WP. */
}
Этот метод делает элемент видимым, когда он получает фокус, что особенно важно для пользователей, использующих клавиатуру для навигации.
Заключение
Удаление элементов с экрана, сохраняя при этом их доступность для SEO и скринридеров, требует продуманного подхода. Использование таких методов, как screen-reader-text, element-invisible, или подход WordPress, помогает обеспечить, что ваш сайт останется доступным и оптимизированным для поисковых систем. Выбирайте подходящий метод в зависимости от ваших нужд и избегайте использования display: none; или visibility: hidden;, чтобы избежать непредвиденных последствий.
