Веб Мастерская | Веб разработка и программирование | ИТ | IT
Без категории · 15 сентября 2026 г.
БАЗА:
БАЗА: Разница между display: none, visibility: hidden и aria-hidden Коллеги, сегодня про три способа «спрятать» элемент, которые путают даже на собеседованиях. Ошибка здесь стоит либо прыгающей верстки, либо недоступного интерфейса. 1️⃣ display: none Элемент исчезает полностью: не занимает место, не рендерится, выпадает из потока и дерева доступности. Его нельзя сфокусировать клавиатурой, скринридер его не увидит. Смена display запускает reflow, поэтому интерфейс может пересчитывать геометрию. Подходит для вкладок, модалок и блоков, которых сейчас реально нет на экране. 2️⃣ visibility: hidden Элемент невидим, но место под него сохраняется. Он влияет на раскладку, но кликнуть и сфокусировать его нельзя. Для ассистивных технологий он тоже скрыт. Полезно, когда нужно избежать прыжков макета: подгрузили контент, плавно показали, ничего не поехало. 3️⃣ aria-hidden="true" Это не визуальная маскировка. Элемент остается видимым и занимает место, но скрывается от скринридеров. Так прячут декоративные иконки, повторяющиеся подписи, разделители. Опасность: если внутри есть кнопки или ссылки, зрячий пользователь их увидит, а пользователь скринридера — нет. Для фокусируемых элементов без крайней необходимости не используйте. ✅ Шпаргалка для продакшена: — убрать визуально и из потока → display: none / hidden; — сохранить геометрию → visibility: hidden; — скрыть только от ассистивных технологий → aria-hidden. И главное: не делайте фокусируемый элемент невидимым для скринридера, не убрав его из tab-order. Иначе клавиатурная навигация превратится в квест. Вот так. Идем кодить дальше! 🚀 #верстка #css #a11y #доступность #frontend #webdev #html #javascript #юзабилити #вебмастерская #сергейабрамов #разработка #кодинг #база #ui