Свойство visibility — это не только видимость

Свойство visibility — это не только видимость

От автора: недавно я столкнулся с проблемой, когда текст, содержащийся в созданной мною button, отсутствовал в дереве доступности и, следовательно, не был доступен для программ чтения с экрана. После некоторой отладки я понял, причина в том, что я визуально анимировал текст, изменяя прозрачность и, что более важно, свойство HTML visibility.

Я знаю, что это был недосмотр, и ранее я писал о различных эффектах различных способов скрытия элементов с помощью CSS. Но это заставило меня задуматься о поведении свойства visibility, особенно о его значении hidden, поскольку оно связано с различными видами «видимости» — визуальным представлением, размещением, вспомогательными технологиями и взаимодействием. Когда мы слышим слово «visibility», мы склонны думать только о видимости. Как мы увидим, свойство visibility — это не только (визуальная) видимость.

visibility: hidden и видимость

Когда речь идет о визуальной видимости, правило visibility: hidden дает ожидаемый эффект. Элемент становится более или менее «невидимым».

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

Макет — какое место занимает элемент на странице?

Отрисовка — что содержится в каждом пикселе?

Составление — в каком порядке рисуется каждый пиксель?

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

visibility: hidden и размещение

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

Как я уже говорил, элемент с visibility: hidden, возможно, не должен проходить этапы отрисовки и составления в конвейере рендеринга. Тем не менее, он пройдет этап макета. Это означает, что, хотя пиксели не окрашены, они все еще занимают место на странице. Это похоже на Гарри Поттера в его плаще-невидимке — его не было видно, но он все еще был там.

Давайте возьмем эти три элемента div, каждый шириной 100 пикселей, к среднему div применено правило visibility: hidden.

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

visibility: hidden и интерактивность

Поскольку элемент с visibility: hidden будет по-прежнему занимать физическое пространство на странице, может показаться, что это правило визуально скрывает элемент аналогично установке для opacity значения 0. Однако, на самом деле правило visibility: hidden гораздо больше похоже на display: none.

Любые интерактивные элементы, такие как формы или ссылки, теряют способность взаимодействовать. Например, button ниже должна отображать предупреждение при нажатии.

Хотя кнопка занимает физическое пространство, с ней никак нельзя взаимодействовать.

visibility: hidden и вспомогательные технологии

Основная причина, по которой правило visibility: hidden касается не только визуальной видимости, заключается в том, что оно также влияет на видимость элементов для вспомогательных технологий. Когда мы применяем к элементу visibility: hidden, оно также удаляет его из дерева доступности, что делает его невидимым для таких технологий, как программы чтения с экрана.

Взять, к примеру, проблему, с которой я столкнулся. У меня есть элемент button с вложенным span.

Если мы посмотрим на свойства доступности элемента button, то увидим, что в нем нет текстового содержимого и, следовательно, нет доступного имени.

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

Источник: //bitsofco.de/

Редакция: Команда webformyself.

Метки:

Похожие статьи:

Комментарии Вконтакте: