Крис Фердинанди собрал полезную шпаргалку, в каком случае как лучше прятать элементы в 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/