От автора: недавно я столкнулся с проблемой, когда текст, содержащийся в созданной мною button, отсутствовал в дереве доступности и, следовательно, не был доступен для программ чтения с экрана. После некоторой отладки я понял, причина в том, что я визуально анимировал текст, изменяя прозрачность и, что более важно, свойство HTML visibility.
Я знаю, что это был недосмотр, и ранее я писал о различных эффектах различных способов скрытия элементов с помощью CSS. Но это заставило меня задуматься о поведении свойства visibility, особенно о его значении hidden, поскольку оно связано с различными видами «видимости» — визуальным представлением, размещением, вспомогательными технологиями и взаимодействием. Когда мы слышим слово «visibility», мы склонны думать только о видимости. Как мы увидим, свойство visibility — это не только (визуальная) видимость.
visibility: hidden и видимость
Когда речь идет о визуальной видимости, правило visibility: hidden дает ожидаемый эффект. Элемент становится более или менее «невидимым».
It's gone! ---> <span style="visibility: hidden;">I'm gone!</span>
Чтобы точно понять, что происходит, давайте вернемся к конвейеру рендеринга браузера, который также называется критическим путем рендеринга. Как правило, после определения стилей страницы происходят три вещи:
Макет — какое место занимает элемент на странице?
Отрисовка — что содержится в каждом пикселе?
Составление — в каком порядке рисуется каждый пиксель?
Для элемента с правилом visibility: hidden было бы целесообразно оптимизировать браузеры, не выполняя этапов отрисовки и составления, так как в месте, где будет находиться элемент, нет пикселей. Хотя в спецификации не указано, что браузеры должны выполнять эту оптимизацию, это помогает мне понять, как работает это правило, представляя его таким образом.
visibility: hidden и размещение
Хотя технически верно сказать, что элемент при применении к нему правила visibility: hidden невидим, можно утверждать, что он не является действительно невидимым, поскольку он все еще занимает место на странице.
Как я уже говорил, элемент с visibility: hidden, возможно, не должен проходить этапы отрисовки и составления в конвейере рендеринга. Тем не менее, он пройдет этап макета. Это означает, что, хотя пиксели не окрашены, они все еще занимают место на странице. Это похоже на Гарри Поттера в его плаще-невидимке — его не было видно, но он все еще был там.
Давайте возьмем эти три элемента div, каждый шириной 100 пикселей, к среднему div применено правило visibility: hidden.
<style> div { width: 100px; display: inline-block; background-color: #ffdb3a; }
</style> <div>One</div>
<div style="visibility: hidden;">Two</div>
<div>Three</div>Хотя средний div технически «визуально скрыт», можно утверждать, что он не является действительно невидимым из-за того, что он все еще занимает пространство.
visibility: hidden и интерактивность
Поскольку элемент с visibility: hidden будет по-прежнему занимать физическое пространство на странице, может показаться, что это правило визуально скрывает элемент аналогично установке для opacity значения 0. Однако, на самом деле правило visibility: hidden гораздо больше похоже на display: none.
Любые интерактивные элементы, такие как формы или ссылки, теряют способность взаимодействовать. Например, button ниже должна отображать предупреждение при нажатии.
It's gone! ---> <button style="visibility: hidden;" onclick="alert('Hello!')">I'm gone!</button>
<--- You can't touch it!Хотя кнопка занимает физическое пространство, с ней никак нельзя взаимодействовать.
visibility: hidden и вспомогательные технологии
Основная причина, по которой правило visibility: hidden касается не только визуальной видимости, заключается в том, что оно также влияет на видимость элементов для вспомогательных технологий. Когда мы применяем к элементу visibility: hidden, оно также удаляет его из дерева доступности, что делает его невидимым для таких технологий, как программы чтения с экрана.
Взять, к примеру, проблему, с которой я столкнулся. У меня есть элемент button с вложенным span.
<button> <span style="visibility: hidden">Button label here</span> </button>
Если мы посмотрим на свойства доступности элемента button, то увидим, что в нем нет текстового содержимого и, следовательно, нет доступного имени.
Хотя может показаться, что свойство видимости влияет только на визуальную составляющую, мы видим, что оно делает гораздо больше.
Источник: https://bitsofco.de/
Редакция: Команда webformyself.