Visibility hidden что это

Как прятать

Visibility hidden что это. 59e4c45e27712964410668. Visibility hidden что это фото. Visibility hidden что это-59e4c45e27712964410668. картинка Visibility hidden что это. картинка 59e4c45e27712964410668

Когда display: none, а когда visibility: hidden?

Зависит от того, что вы пытаетесь сделать. Есть и другие варианты как спрятать блок и даже специальный атрибут.

Если вам приходится что-то прятать, то лучше всего это вообще убрать: сайт легче, код чище… ошибок меньше! Но если вам нужно, чтобы оно там пряталось до поры, а потом кому-то пригодилось — это другое дело. Здесь важно не ошибиться с выбором способа.

Самый простой и популярный — display: none, он работает как топор: элемент как будто вырубают из HTML. Его не видно на странице и соседние блоки про него ничего не знают. Просто нет и всё. Его даже скринридеры игоририруют и не читают содержимое — будьте аккуратнее с этим.

Что интересно, несмотря на полное вырубание элемента, браузеры всё равно загружают картинку из img с display: none. Если же картинка указана фоном, то Chrome и Edge её тоже загружают, а Firefox и Safari — нет. Ну, разные у них взгляды на оптимизацию загрузки, что поделать.

Другой способ — visibility: hidden, он работает как кольцо всевластья: элемент вроде здесь и соседние блоки его чувствуют, но его не видно. И чем это отличается от opacity: 0? Opacity просто делает элемент прозрачным (или полупрозрачным), а visibility: hidden ещё не даёт с ним взаимодействовать: навести, кликнуть, сфокусировать.

У visibility: hidden есть другая приятная особенность: свойство наследуется, а значит ребёнок невидимого родителя может сменить видимость на visible. Такой трюк не пройдёт ни с display: none, ни с opacity: 0. С ним удобно делать всплывающие меню и подказки.

Иногда нужно, чтобы элемент не мешал дизайну, но при этом не прятался от скринридеров, оставаясь частью содержимого. Ну не нарисовал дизайнер здесь заголовка, а по логике документа он здесь нужен. Вот бы нам что-то вроде display: hidden или visibility: none! Это я только что придумал, в природе их не существует.

Недавно в черновике CSS Display третьего уровня появилось свойство box-suppress со значениями show, discard и hide. Оно отвязывает видимость блока от display — ведь с обратной стороны от none есть не только block, но и inline, flex, grid. Значение discard привычно вырубает элемент, а hide делает то самое волшебное комбо. Читайте подробнее у Рейчел Эндрю.

К сожалению, до box-suppress нам ещё долго ждать. Его не только ещё нет в браузерах, но уже в том черновике — недавно его перенесли в следующий уровень, чтобы закончить текущий вовремя. Так что придётся делать магию самим — следите за руками.

Есть такой паттерн «visually hidden» или «визуально спрятанный», чтобы прятать элементы из дизайна, но оставлять доступным их содержимое. Про другие нюансы со скринридерами читайте у Тима Райта. Как это работает: вы делаете универсальный служебный класс и добавляете его к элементам, которые нужно доступно спрятать. Обычно его так и называют: visually-hidden, через дефис.

Если посмотреть что внутри, то это обычный position: absolute плюс clip, который обрезает элемент до нуля. То есть он не влияет на соседей и становится невидимым. Все остальные свойства добавляют универсальности и кроссбраузерности, чтобы класс можно было не глядя шлёпнуть на любой элемент. Подробнее читайте в справке к ally.js Родни Рейма.

А вы знали, что любому элементу можно добавить атрибут hidden и он пропадёт? Теперь знаете! В современных браузерах на этот атрибут повешен тот самый display: none, который вырубает элемент. Он бинарный как required или checked, так что его удобно выставлять через JavaScript. Только не забудьте добавить в стили [hidden] < display: none >для IE 10, Safari 5 и других старых браузеров.

Это почти всё, что вам нужно знать про прятки в CSS. Попробуйте эти способы, они все хороши в разных ситуациях. Главное, не рубите с плеча и думайте о доступном содержимом.

Источник

Свойства CSS display и visibility: как скрыть элемент CSS или элемент HTML?

Свойства display и visibility используются, чтобы вывести или скрыть элемент HTML или CSS. Но тогда какая между ними разница? Чтобы понять это, посмотрите на приведенный ниже рисунок, здесь я использовал три элемента div :

Visibility hidden что это. css display visibility 130921. Visibility hidden что это фото. Visibility hidden что это-css display visibility 130921. картинка Visibility hidden что это. картинка css display visibility 130921

Посмотреть онлайн демо-версию и код

Посмотреть онлайн демо-версию и код

Посмотреть онлайн демо-версию и код

Синтаксис свойства CSS visibility

Вот, как использовать свойство CSS visibility :

Синтаксис свойства CSS display

Это позволяет скрыть элемент, для которого задано значение данного свойства. Именно его я применил для раздела 3 в приведенном выше примере.

Свойство HTML display также используется, чтобы изменить поведение строчных или блочных элементов:

Пример применения свойства display для отображения / скрытия меню

Visibility hidden что это. 42 css display 131013. Visibility hidden что это фото. Visibility hidden что это-42 css display 131013. картинка Visibility hidden что это. картинка 42 css display 131013

Посмотреть онлайн демо-версию и код

Демо-версия меню с использованием свойства visibility

Visibility hidden что это. 43 css visibility 131016. Visibility hidden что это фото. Visibility hidden что это-43 css visibility 131016. картинка Visibility hidden что это. картинка 43 css visibility 131016

Посмотреть онлайн демо-версию и код

В этом примере можно увидеть разницу. Когда нажимается ссылка скрыть меню, меню исчезает. При клике по ссылке показать меню, оно вновь становится видимым. Но ссылки при этом остаются на своих местах и не смещаются ( в отличие от HTML display ).

Пример использования свойства CSS visibility для HTML-таблицы

Visibility hidden что это. display visibility table 131017. Visibility hidden что это фото. Visibility hidden что это-display visibility table 131017. картинка Visibility hidden что это. картинка display visibility table 131017

Посмотреть онлайн демо-версию и код

Теперь я использую свойство visibility для второй строки, чтобы скрыть ее. Это делается следующим образом:

Таким образом значение collapse также используется для элементов таблицы. Оно применяется для удаления строки, при этом структура таблицы не изменяется. Посмотрите на приведенный ниже рисунок и на код демо-версии:

Visibility hidden что это. 45 css visibility table 131019. Visibility hidden что это фото. Visibility hidden что это-45 css visibility table 131019. картинка Visibility hidden что это. картинка 45 css visibility table 131019

Посмотреть онлайн демо-версию и код

Применение свойства CSS display к таблице

Visibility hidden что это. 46 css display table 131106. Visibility hidden что это фото. Visibility hidden что это-46 css display table 131106. картинка Visibility hidden что это. картинка 46 css display table 131106

Посмотреть онлайн демо-версию и код

Вторая строка исчезла, а третья строка перемещается вверх, чтобы занять ее место.

Использование display для строчных элементов

Свойство CSS display также используется для изменения поведения строчных и блочных элементов.

Напомню, что блочные элементы занимают все доступное им пространство и начинаются с новой строки. Например, абзацы или блоки div — это блочные элементы.

Свойство HTML display позволяет изменять поведение строчных и блочных элементов.

Чтобы изменить поведение блочного элемента на поведение строчного:

Чтобы изменить поведение строчного элемента на поведение блочного:

В следующем примере поведение элемента span изменяется на поведение блочного элемента. А поведение абзаца с помощью свойства CSS display изменяется на поведение строчного элемента.

Чтобы понять, в чем заключается разница, сначала посмотрите на приведенный ниже рисунок и исходный код, в котором свойство HTML display еще не применено:

Visibility hidden что это. 47 css display inline bl 131111. Visibility hidden что это фото. Visibility hidden что это-47 css display inline bl 131111. картинка Visibility hidden что это. картинка 47 css display inline bl 131111

Посмотреть онлайн демо-версию и код

Теперь с помощью HTML display block я изменю поведение span на поведение блочного элемента, а поведение абзаца на поведение строчного. Родительский div остается без изменений. Смотрите результат и демо-версию:

Visibility hidden что это. css display block inline 131113. Visibility hidden что это фото. Visibility hidden что это-css display block inline 131113. картинка Visibility hidden что это. картинка css display block inline 131113

Посмотреть онлайн демо-версию и код

Пожалуйста, оставляйте ваши комментарии по текущей теме материала. Мы очень благодарим вас за ваши комментарии, лайки, отклики, дизлайки, подписки!

Пожалуйста, оставьте ваши отзывы по текущей теме статьи. Мы крайне благодарны вам за ваши комментарии, отклики, лайки, подписки, дизлайки!

Источник

Как прятать

Visibility hidden что это. 20160102 b1fd7ac6 60. Visibility hidden что это фото. Visibility hidden что это-20160102 b1fd7ac6 60. картинка Visibility hidden что это. картинка 20160102 b1fd7ac6 60

Когда display: none, а когда visibility: hidden? — спрашивает нас RedFox. Зависит от того, что вы пытаетесь сделать. Есть и другие варианты как спрятать блок и даже специальный атрибут. Давайте разберёмся!

Если вам приходится что-то прятать, то лучше всего это вообще убрать: сайт легче, код чище… ошибок меньше! Но если вам нужно, чтобы оно там пряталось до поры, а потом кому-то пригодилось — это другое дело. Здесь важно не ошибиться с выбором способа.

Самый простой и популярный — display: none, он работает как топор: элемент как будто вырубают из HTML. Его не видно на странице и соседние блоки про него ничего не знают. Просто нет и всё. Его даже скринридеры игоририруют и не читают содержимое — будьте аккуратнее с этим.

Что интересно, несмотря на полное вырубание элемента, браузеры всё равно загружают картинку из img с display: none. Если же картинка указана фоном, то Chrome и Edge её тоже загружают, а Firefox и Safari — нет. Ну, разные у них взгляды на оптимизацию загрузки, что поделать.

Другой способ — visibility: hidden, он работает как кольцо всевластья: элемент вроде здесь и соседние блоки его чувствуют, но его не видно. И чем это отличается от opacity: 0? Opacity просто делает элемент прозрачным (или полупрозрачным), а visibility: hidden ещё не даёт с ним взаимодействовать: навести, кликнуть, сфокусировать.

У visibility: hidden есть другая приятная особенность: свойство наследуется, а значит ребёнок невидимого родителя может сменить видимость на visible. Такой трюк не пройдёт ни с display: none, ни с opacity: 0. С ним удобно делать всплывающие меню и подказки.

Иногда нужно, чтобы элемент не мешал дизайну, но при этом не прятался от скринридеров, оставаясь частью содержимого. Ну не нарисовал дизайнер здесь заголовка, а по логике документа он здесь нужен. Вот бы нам что-то вроде display: hidden или visibility: none! Это я только что придумал, в природе их не существует.

Недавно в черновике CSS Display третьего уровня появилось свойство box-suppress со значениями show, discard и hide. Оно отвязывает видимость блока от display — ведь с обратной стороны от none есть не только block, но и inline, flex, grid. Значение discard привычно вырубает элемент, а hide делает то самое волшебное комбо. Читайте подробнее у Рейчел Эндрю.

К сожалению, до box-suppress нам ещё долго ждать. Его не только ещё нет в браузерах, но уже в том черновике — недавно его перенесли в следующий уровень, чтобы закончить текущий вовремя. Так что придётся делать магию самим — следите за руками.

Есть такой паттерн «visually hidden» или «визуально спрятанный», чтобы прятать элементы из дизайна, но оставлять доступным их содержимое. Про другие нюансы со скринридерами читайте у Тима Райта. Как это работает: вы делаете универсальный служебный класс и добавляете его к элементам, которые нужно доступно спрятать. Обычно его так и называют: visually-hidden, через дефис.

Если посмотреть что внутри, то это обычный position: absolute плюс clip, который обрезает элемент до нуля. То есть он не влияет на соседей и становится невидимым. Все остальные свойства добавляют универсальности и кроссбраузерности, чтобы класс можно было не глядя шлёпнуть на любой элемент. Подробнее читайте в справке к ally.js Родни Рейма.

А вы знали, что любому элементу можно добавить атрибут hidden и он пропадёт? Теперь знаете! В современных браузерах на этот атрибут повешен тот самый display: none, который вырубает элемент. Он бинарный как required или checked, так что его удобно выставлять через JavaScript. Только не забудьте добавить в стили [hidden] < display: none >для IE 10, Safari 5 и других старых браузеров.

Это почти всё, что вам нужно знать про прятки в CSS. Попробуйте эти способы, они все хороши в разных ситуациях. Главное, не рубите с плеча и думайте о доступном содержимом.

Источник

Методы скрытия элементов веб-страниц

Visibility hidden что это. e9jtr4svpvlwf. Visibility hidden что это фото. Visibility hidden что это-e9jtr4svpvlwf. картинка Visibility hidden что это. картинка e9jtr4svpvlwf

Веб-разработчикам приходится скрывать элементы веб-страниц по самым разным причинам. Например, есть кнопка, которая должна быть видимой при просмотре сайта на мобильном устройстве, и скрытой — при использовании настольного браузера. Или, например, имеется некий навигационный элемент, который должен быть скрыт в мобильном браузере и отображён в настольном. Элементы, невидимые на странице, могут пребывать в различных состояниях:

HTML5-атрибут hidden

Рассмотрим следующий пример:

В CSS я воспользовался атрибутом hidden для вывода элемента только в том случае, если область просмотра страницы имеет необходимый размер.

Visibility hidden что это. 5fccf240a4fd79109f64e39aa6a5f318. Visibility hidden что это фото. Visibility hidden что это-5fccf240a4fd79109f64e39aa6a5f318. картинка Visibility hidden что это. картинка 5fccf240a4fd79109f64e39aa6a5f318

Вот CSS-код, который здесь использован:

→ Вот пример этой страницы на CodePen

▍Атрибут hidden и доступность контента

Если рассмотреть атрибут hidden с точки зрения доступности контента, то окажется, что этот атрибут полностью скрывает элемент. В результате с этим элементом не смогут работать средства для чтения с экрана. Не используйте этот атрибут в тех случаях, когда некие элементы страниц нужно делать невидимыми для человека, но не для программ для чтения с экрана.

CSS-свойство display

Представим, что мы хотим скрыть изображение из предыдущего примера и решили воспользоваться следующим CSS-кодом:

При таком подходе изображение будет полностью исключено из документа (из так называемого document flow — «потока документа»), оно будет недоступно программам для чтения с экрана. Возможно, вы не очень хорошо представляете себе понятие «поток документа». Для того чтобы с этим понятием разобраться — взгляните на следующий рисунок.

Visibility hidden что это. image loader. Visibility hidden что это фото. Visibility hidden что это-image loader. картинка Visibility hidden что это. картинка image loader

Синюю книгу убрали из стопки

Вот анимированный вариант примера с книгами, показывающий то, что происходит в том случае, если одну из них убирают из стопки.

Visibility hidden что это. image loader. Visibility hidden что это фото. Visibility hidden что это-image loader. картинка Visibility hidden что это. картинка image loader

Если убрать книгу из стопки — положение других книг в ней изменится

▍Производится ли загрузка ресурсов, скрытых средствами CSS?

Если коротко ответить на этот вопрос — то да, загрузка таких ресурсов производится. Например, если элемент скрыт средствами CSS, и мы показываем этот элемент в некий момент работы со страницей, к этому моменту изображение уже будет загружено. Наличие на странице изображения, даже скрытого средствами CSS, приведёт к выполнению HTTP-запроса на его загрузку.

Visibility hidden что это. image loader. Visibility hidden что это фото. Visibility hidden что это-image loader. картинка Visibility hidden что это. картинка image loader

Исследование страницы, содержащей скрытое изображение

Источник

Скрытие элементов в вебе

Благодаря нашей работе веб-разработчиков нам нужно скрывать элементы по многим причинам. Например, кнопка, которая должна быть видна в мобильном окне просмотра и скрыта в окне просмотра в декстопе. Или элемент навигации, который скрыт на мобильном устройстве и отображается в десктопе. При скрытии элемента существует три разных состояния:

В этой статье мы узнаем о сокрытии элементов в HTML и CSS и рассмотрении аспектов доступности, анимации и вариантов использования для сокрытия.

HTML5 атрибут hidden

Рассмотрим следующий пример.

Visibility hidden что это. 88702337894949197820460065653219498213. Visibility hidden что это фото. Visibility hidden что это-88702337894949197820460065653219498213. картинка Visibility hidden что это. картинка 88702337894949197820460065653219498213

Visibility hidden что это. 97699636015686002088113766086461154069. Visibility hidden что это фото. Visibility hidden что это-97699636015686002088113766086461154069. картинка Visibility hidden что это. картинка 97699636015686002088113766086461154069

Значения доступности для hidden

С точки зрения доступности hidden полностью скрывает элемент от веб-страницы, поэтому он не будет доступен для программ чтения с экрана. Не используйте его, чтобы скрыть элементы только в презентационных целях.

CSS свойство display

Учтите, что у нас тот же пример, что и выше, и мы хотим скрыть изображение.

Это полностью скрывает изображение от потока документов и от программ чтения с экрана. Может быть, вам интересно, что такое документооборот? Смотрите рисунок ниже:

Visibility hidden что это. 278934673980667258432685703840388985018. Visibility hidden что это фото. Visibility hidden что это-278934673980667258432685703840388985018. картинка Visibility hidden что это. картинка 278934673980667258432685703840388985018

Обратите внимание, когда синяя книга скрыта, она полностью удалена из стопки. Пространство, которое было сохранено для этого, ушло. Та же концепция применяется при скрытии элементов в HTML. Зарезервированное пространство для элемента исчезло, и оно меняет поток документов или, в нашем примере, стек книг.

Вот анимация, показывающая, что происходит при удалении книги:

Visibility hidden что это. 75156657381189902004495955988215467559. Visibility hidden что это фото. Visibility hidden что это-75156657381189902004495955988215467559. картинка Visibility hidden что это. картинка 75156657381189902004495955988215467559

Загружаются ли ресурсы, если они были скрыты с помощью CSS?

Да, это короткий ответ. Например, если скрыть тег img с помощью CSS, и мы показываем его в определенной точке останова, он уже будет загружен. Изображение вызовет HTTP-запрос, даже если оно скрыто с помощью CSS.

В этой демонстрации я добавил только изображение и скрыл его с помощью CSS. Затем я открыл DevTools и проверил вкладку сети, которая показывает, что изображение загружено.

Visibility hidden что это. 26057081730350104802662598922768252611. Visibility hidden что это фото. Visibility hidden что это-26057081730350104802662598922768252611. картинка Visibility hidden что это. картинка 26057081730350104802662598922768252611

Мы вернемся к этому позже, чтобы объяснить, как уменьшить HTTP-запросы, когда они не нужны в определенной точке останова или размере области просмотра.

Элемент style

Стоит отметить, что существуют элементы со значением display: none по умолчанию. Элемент style может быть добавлен внутри HTML страницы, и мы можем изменить его свойство отображения блока, чтобы он мог быть виден.

Visibility hidden что это. 245209890664212548415396830046410637366. Visibility hidden что это фото. Visibility hidden что это-245209890664212548415396830046410637366. картинка Visibility hidden что это. картинка 245209890664212548415396830046410637366

Значение доступности для display: none

При использовании display: none он полностью скрывает элемент от программ чтения с экрана.

Opacity

Visibility hidden что это. 136572050686354902938790969763624178850. Visibility hidden что это фото. Visibility hidden что это-136572050686354902938790969763624178850. картинка Visibility hidden что это. картинка 136572050686354902938790969763624178850

Исходя из нашего первоначального примера, если мы хотим скрыть изображение с непрозрачностью, результат будет выглядеть следующим образом:

Visibility hidden что это. 156531493546820419747769901009871220017. Visibility hidden что это фото. Visibility hidden что это-156531493546820419747769901009871220017. картинка Visibility hidden что это. картинка 156531493546820419747769901009871220017

Изображение все еще там, и его место зарезервировано. Оно скрыто только с визуальной точки зрения.

Значение доступности для opacity: 0

Visibility

Visibility hidden что это. 256447062684411064319439907700250959631. Visibility hidden что это фото. Visibility hidden что это-256447062684411064319439907700250959631. картинка Visibility hidden что это. картинка 256447062684411064319439907700250959631

Обратите внимание, как синяя книга скрыта от визуального потока, но это не влияет на порядок стопки книг.

Visibility hidden что это. 115741479314376849815795263736167228659. Visibility hidden что это фото. Visibility hidden что это-115741479314376849815795263736167228659. картинка Visibility hidden что это. картинка 115741479314376849815795263736167228659

Visibility hidden что это. 107357401994230475887139142913370675186. Visibility hidden что это фото. Visibility hidden что это-107357401994230475887139142913370675186. картинка Visibility hidden что это. картинка 107357401994230475887139142913370675186

Значения доступности для visibility: hidden

Элемент скрыт, и его потомки будут удалены из дерева доступности, и программа чтения с экрана не сообщит об этом.

Позиционирование

Visibility hidden что это. 317152934275324214925643284417800362564. Visibility hidden что это фото. Visibility hidden что это-317152934275324214925643284417800362564. картинка Visibility hidden что это. картинка 317152934275324214925643284417800362564

Чтобы разместить ссылку вне экрана, мы должны добавить следующее:

Значения доступности для position: absolute | fixed

Элемент доступен для программ чтения с экрана и фокусируется на клавиатуре. Это скрыто только визуально из области просмотра.

Clip Path

Visibility hidden что это. 211949794893140139630026607334827180175. Visibility hidden что это фото. Visibility hidden что это-211949794893140139630026607334827180175. картинка Visibility hidden что это. картинка 211949794893140139630026607334827180175

Чтобы продемонстрировать вышесказанное более наглядно, я буду использовать для этого инструмент Clippy. В GIF ниже у меня есть следующий clip-path:

Visibility hidden что это. 176430257189897590010351600920784161040. Visibility hidden что это фото. Visibility hidden что это-176430257189897590010351600920784161040. картинка Visibility hidden что это. картинка 176430257189897590010351600920784161040

Установка значений многоугольника 0 0 для каждого направления приведет к изменению размера области отсечения до нуля. В результате изображение не будет отображаться. Также это можно сделать с помощью круга вместо многоугольника:

Visibility hidden что это. 307430228618495399204920466934387868890. Visibility hidden что это фото. Visibility hidden что это-307430228618495399204920466934387868890. картинка Visibility hidden что это. картинка 307430228618495399204920466934387868890

Значения доступности для clip-path

Элемент скрыт только визуально. Это все еще доступно для программ чтения с экрана и клавиатуры.

Управление цветом и размером шрифта

Хотя эти два метода не являются общими, как мы обсуждали предыдущий, они могут быть полезны для некоторых случаев использования.

Прозрачный цвет

Сделав цвет прозрачным для текста, он будет скрыт визуально. Это может быть полезно для кнопки с иконкой.

Размер шрифта

Также может быть полезно установить размер шрифта равным нулю, так как это будет скрывать текст визуально.

Рассмотрим следующий пример, где у нас есть кнопка со следующей структурой:

И с этим, текст скрыт. Он может работать даже без изменения цвета, но я добавил его для пояснения.

Visibility hidden что это. 330439448411138068464908466419011160691. Visibility hidden что это фото. Visibility hidden что это-330439448411138068464908466419011160691. картинка Visibility hidden что это. картинка 330439448411138068464908466419011160691

Aria Hidden

При добавлении атрибута aria-hidden к элементу он удаляет этот элемент из дерева специальных возможностей, что может улучшить взаимодействие пользователям программ чтения с экрана. Обратите внимание, что он не скрывает элемент визуально, он предназначен только для пользователей программы чтения с экрана.

Значения доступности для aria-hidden=»true»

Он предназначен для программ чтения с экрана, поскольку скрывает содержимое только от программ чтения с экрана. Тем не менее, контент по-прежнему виден для зрячих пользователей и фокусируется на клавиатуре.

Анимация и интерактивность

Прежде чем мы начнем с примеров, я хочу выделить свойства, упомянутые ранее, чтобы сравнить их и выбрать подходящий метод на основе наших потребностей. Шпаргалка вдохновлена этой замечательной статьей о CSS-хитростях.

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

У нас есть меню, которое должно иметь анимацию скольжения или снятия холста, когда оно развернуто. Проще всего добавить в меню следующее:

Visibility hidden что это. 180223220672310311451931116799607014939. Visibility hidden что это фото. Visibility hidden что это-180223220672310311451931116799607014939. картинка Visibility hidden что это. картинка 180223220672310311451931116799607014939

Результат может показаться хорошим, но в нем есть большая ошибка. Использование opacity: 0 не скрывает навигацию от дерева доступности. Даже если навигация скрыта визуально, она по-прежнему фокусируется с клавиатуры и доступна для программ чтения с экрана. Он должен быть скрыт, чтобы не запутать пользователя.

Вот скриншот дерева доступности из DevTools Chrome:

Visibility hidden что это. 147950920361206539109271284511636069416. Visibility hidden что это фото. Visibility hidden что это-147950920361206539109271284511636069416. картинка Visibility hidden что это. картинка 147950920361206539109271284511636069416

На приведенном ниже снимке экрана показано, как VoiceOver в Mac OS видит страницу. Список навигации там пока скрыт визуально!

Visibility hidden что это. 196569164449302039994750801073584566879. Visibility hidden что это фото. Visibility hidden что это-196569164449302039994750801073584566879. картинка Visibility hidden что это. картинка 196569164449302039994750801073584566879

Чтобы исправить эту ошибку, нам нужно использовать visibility: hidden для меню навигации. Это гарантирует, что меню скрыто визуально и для программ чтения с экрана.

Как только это добавлено, теперь меню скрыто от программ чтения с экрана. Давайте снова протестируем и посмотрим, что VoiceOver покажет:

Visibility hidden что это. 250184090531745384820492909925022752806. Visibility hidden что это фото. Visibility hidden что это-250184090531745384820492909925022752806. картинка Visibility hidden что это. картинка 250184090531745384820492909925022752806

Checkbox

Visibility hidden что это. 226334073457255979490570756502367616087. Visibility hidden что это фото. Visibility hidden что это-226334073457255979490570756502367616087. картинка Visibility hidden что это. картинка 226334073457255979490570756502367616087

Дизайн флажка по умолчанию сложно настроить, и в результате нам нужно создать собственный дизайн флажка. Давайте посмотрим на основной HTML:

Скрытие контента от программ чтения с экрана

Visibility hidden что это. 168452823919333050575215037753216341456. Visibility hidden что это фото. Visibility hidden что это-168452823919333050575215037753216341456. картинка Visibility hidden что это. картинка 168452823919333050575215037753216341456

В заголовке таблицы я добавил Emoji после элемента заголовка. Если это не скрыто должным образом, вот как программа чтения с экрана будет читать текст:

Маленькая перемена, большая победа!

Сокрытие кнопок

Visibility hidden что это. 308887182696746496899144319563933693989. Visibility hidden что это фото. Visibility hidden что это-308887182696746496899144319563933693989. картинка Visibility hidden что это. картинка 308887182696746496899144319563933693989

В Твиттере есть кнопка с надписью «Смотреть новые твиты», которая скрыта для программ чтения с экрана с помощью aria-hidden и отображается только визуально, когда доступны новые твиты.

Скрытие декоративного контента

Visibility hidden что это. 25252450127087248991053827239496446127. Visibility hidden что это фото. Visibility hidden что это-25252450127087248991053827239496446127. картинка Visibility hidden что это. картинка 25252450127087248991053827239496446127

Источник

Добавить комментарий

Ваш адрес email не будет опубликован. Обязательные поля помечены *