В дизайне заголовка нет, но по логике вещей он нужен и дело даже не в валидаторе. С сайтом могут взаимодействовать программы чтения с экрана или монитор Брайля. Они ориентируются на то, что доступно в дереве документа. Все, доступные на сегодняшний день, варианты свойств и атрибутов для прятанья элементов в лоб не подходят.
Display: none или атрибут hidden — выпиливает элемент из дерева от слова совсем, делая его не доступным скринридерам.
opacity: 0 — делает элемент прозрачным(невидимым). Сам элемент остаётся на мест и занимает пространство.
visability: hidden — с элементом уже нельзя взаимодействовать но он всё ещё занимает пространство.
Вопрос в следующем — как сделать невидимый на экране элемент, который не толкается с соседними блоками и доступен в DOM. Выход https://allyjs.io/tutorials/hiding-elements.html. На самом деле ничего сверхъестественного. Нужно просто уменьшить элемент так чтобы его содержимое ни как не проявилось. Как это сделать читайте по ссылке выше или мой перевод далее.
Чтобы элемент был доступен в DOM и не был виден на странице и ни как не мешал другим элементам, его нужно сделать очень маленьким(1px x 1px) и исключить из потока(position: absolute). По итогу имеем
.visuallyhidden:not(:focus):not(:active) {
position: absolute;
width: 1px;
height: 1px;
margin: -1px;
border: 0;
padding: 0;
white-space: nowrap;
clip-path: inset(100%);
overflow: hidden;
}
В некоторых ситуациях устройство чтения с экрана может объединяет слова и неправильно их читать. white-space: nowrap; отображает весь текст одной строкой поэтому текст распознаётся как надо.
Свойство clip уберёт все видимые части элемента со страницы.
- Войдите, чтобы оставлять комментарии