mefody.dev

Разные способы спрятать что-то в DOM



Крис Фердинанди собрал полезную шпаргалку, в каком случае как лучше прятать элементы в DOM.



1. Свойство display: none. Прячет элемент полностью, контент элемента не читается скринридерами.



2. Атрибут [hidden]. Почти как display: none, только в HTML. Крис не пишет про это, но [hidden] легко теряет свою визуальную спрятанность, если поверх выставить display: block.



3. Свойство visibility: hidden. Прячет элемент, но оставляет вместо него пустое пространство. Контент элемента не читается скринридерами.



4. Класс .visually-hidden. Популярный набор свойств, которые заставляют элемент занимать нулевое пространство на странице, то есть быть визуально невидимым, но при этом оставляют содержимое читаемым скринридерами.



5. Атрибут [aria-hidden="true"]. Прячет содержимое от скринридеров, не влияет на визуальное отображение.



Статья Криса Фердинанди:

https://gomakethings.com/the-many-ways-to-hide-things-in-the-dom/



А ещё есть хорошая статья про прятание содержимого от скринридеров у Доки:

https://doka.guide/a11y/content-hidden/