Skip to content

nikolai-shabalin/visually-hidden

BranchesTags

Folders and files

NameName
Last commit message
Last commit date

Latest commit

 

History

9 Commits
images
images
 
 
README.md
README.md
 
 

Repository files navigation

in progress

Быстрая навигация

Из чего состоит visually-hidden

visually-hidden это популярный класс, который используется для скрытия элементов от пользователей, но оставляет их доступными для программ, например скринридеров(программ чтения экрана).

<h2 class="visually-hidden">Этот текст визуально скрыт, но доступен для программ</h2>
<button type="button">
  <span content="visually-hidden">Этот текст визуально скрыт, но доступен для программ</span>
</button>

За пределами видимости

Когда нам нужно скрыть элемент мы обычно имеем в виду, визуальное скрытие от глаз. Хотя уже можно смело заявить, что экран это не единственный способ вывода HTML-страниц. Люди повседневно используют скринридеры, а также другие устройства и программы, которые полагаются на дерево доступности, например дисплей Брайля.

На самом деле в разной ситуации нам нужно скрыть контент по-разному.

Типы скрытия

Есть несколько типов скрытия контента:

  • Полностью скрыт

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

  • Семантически скрыт

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

  • Визуально скрыт

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

Анатомия класса visually-hidden

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

Если вы знаете другие варианты CSS для visually-hidden, пожалуйста, сообщите мне, и я добавлю их сюда.

Каждое CSS-свойство имеет большую историю и причину попадания в visually-hidden. Некоторые свойства покрывают лишь редкие кейсы для редких программ.

.visually-hidden:not(:focus):not(:active) {
  position: absolute;
  width: 1px;
  height: 1px;
  clip-path: inset(50%);
  overflow: hidden;
  white-space: nowrap;
}

position

Удаляет элемент из потока документа, так что он не занимает места в макете. top и left не задаются; по умолчанию они имеют значение auto, что означает, что начальная позиция элемента в макете не меняется. И это очень важно.

Изначально для визуального скрытия использовалось "позиционирование слева", при котором элемент смещался за пределы области просмотра с помощью параметра left:-100em или подобного. Однако у этого подхода есть несколько проблем:

  • Это приводит к появлению горизонтальных полос прокрутки на страницах RTL (справа налево).
  • Вспомогательное программное обеспечение, которое программно прокручивает содержимое в поле зрения, может работать некорректно, если оно пытается показать содержимое, находящееся за пределами поля зрения. Это может повлиять на программное обеспечение для увеличения экрана, используемое некоторыми людьми со слабым зрением или трудностями чтения.
  • Программы чтения с экрана не могут показывать визуальную индикацию положения курсора чтения, потому что курсор чтения находится за пределами области просмотра. В JAWS эта функция известна как визуальное отслеживание, и она рисует красную границу вокруг элемента, который читается (независимо от того, фокусируется он или нет; это не то же самое, что индикация фокуса). Удерживание элемента в одном положении позволяет избежать всех этих проблем.

width и height и overflow

Поскольку мы не можем переместить элемент, мы визуально скрываем его содержимое, уменьшая размер и переполнение: Эти 1px имеют большое значение. Мы не можем установить нулевые размеры для элемента с overflow:hidden, потому что это может привести к его удалению из дерева доступности.

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

07.2023. Safari не фокусирует элементы с нулевыми размерами. Пропущенные ссылки с нулевой шириной или высотой не будут доступны пользователям Safari с клавиатуры. Поэтому размеры в 1px по-прежнему необходимы и останутся необходимыми в обозримом будущем. Статья

clip и clip-path

При изменении размера и переполнении сохраняется один пиксель, который может быть виден. Если у элемента, например, зеленый фон, вы все равно получите один зеленый пиксель. От этого можно избавиться с помощью clip и/или clip-path:

  clip: rect(0 0 0 0);
  clip-path: inset(50%);

Обратите внимание, что clip здесь фактически избыточен, поскольку определение clip-path приводит к тому же результату. Clip - это наследие, оставшееся с тех времен, когда clip-path еще не существовало. Но теперь, когда он существует и широко поддерживается (а clip в любом случае устарел), нет необходимости включать его, если вам не нужна поддержка Internet Explorer (IE).

white-space

NVDA

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

Проблема на данный момент сложно воспроизводится, но она была в прошлом и скорее всего касалась очень старых версий NVDA. Статья

JAWS

Обёртывание текста влияет на размер индикатора визуального отслеживания в JAWS.

img.png

:not(:focus):not(:active)

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

12.2022. Cелектор также включает отрицание :active. В первоначальной версии этого поста она не была включена, поскольку с точки зрения логики в ней не должно быть необходимости - элемент с этими стилями не может находиться в состоянии :active, если он уже не находится в состоянии :focus. Safari не следует ожидаемой схеме взаимодействия. Если элемент имеет фокус клавиатуры, а затем на него нажимают указателем, событие "указатель вниз" приводит к потере состояния :focus в Safari, что означает, что ссылка на пропуск исчезнет до того, как она будет активирована. Статья.

Варианты использования visually-hidden

Название классов

  • visually-hidden
  • sr-only
  • creen-reader-text
  • element-invisible

Селекторы

  • Простой селектор:
    • по классу .visually-hidden,
    • по атрибуту [visually-hidden]
  • Подробный селектор: .visually-hidden:not(:focus):not(:active) означает что элемент не будет виден, пока он не в фокусе или не активен.

Фреймворки

<ScreenReaderOnly>
  <Heading as="h2" variant="heading20">Flex</Heading>
</ScreenReaderOnly>
<Button>
  <VisuallyHidden>Save</VisuallyHidden>
</Button>

Тело

.visually-hidden {
  position: absolute;
  width: 1px;
  height: 1px;
  margin: -1px;
  border: 0;
  padding: 0;
  white-space: nowrap;
  clip-path: inset(100%);
  clip: rect(0 0 0 0);
  overflow: hidden;
}
.visually-hidden {
  clip: rect(0 0 0 0);
  clip-path: inset(50%);
  height: 1px;
  overflow: hidden;
  position: absolute;
  white-space: nowrap;
  width: 1px;
}
.visually-hidden {
  border: 0 !important;
  clip: rect(1px, 1px, 1px, 1px) !important;
  -webkit-clip-path: inset(50%) !important;
  clip-path: inset(50%) !important;
  height: 1px !important;
  overflow: hidden !important;
  margin: -1px !important;
  padding: 0 !important;
  position: absolute !important;
  width: 1px !important;
  white-space: nowrap !important;
}
[visually-hidden] {
  position: fixed !important;
  /* сохраните на экране просмотра */
  top: 0px !important;
  left: 0px !important;
  /* Задайте ненулевой размер, VoiceOver в Safari требует не менее 2 пикселей
     прежде чем разрешить активацию кнопок. */
  width: 4px !important;
  height: 4px !important;
  /* визуально скрыть его с помощью перелива и непрозрачности */
  opacity: 0 !important;
  overflow: hidden !important;
  /* удалите все поля и подкладки */
  border: none !important;
  margin: 0 !important;
  padding: 0 !important;
  /* Убедитесь, что ни один другой стиль не устанавливает отображение на none */
  display: block !important;
  visibility: visible !important;
  pointer-events: none !important;
}

Другие, абсолютно не рабочие, способы скрытия элементов

  • Этот метод не работает с письмом справа налево.

  • .element-invisible {
  text-indent: -9999em;
  outline: 0;
}

  • В этом случае Voice Over от Apple не будет читать содержимое элемента, имеющего нулевую высоту.

    .element-invisible {
  height: 0;
  overflow: hidden;
  position: absolute;
}

  • В этом случае, если у вас есть фокусируемый контент внутри позиционированного элемента, страница будет прокручиваться до этого элемента, создавая прыжок для зрячих пользователей. Всё это из-за огромного отрицательного значения top: -999999em;.

    .element-invisible {
  position: absolute;
  top: -999999em;
  left: auto;
  width: 1px;
  height: 1px;
  overflow:hidden;
  }

Источники

About

No description, website, or topics provided.

Resources

Readme
Activity

Stars

1 star

Watchers

1 watching

Forks

0 forks
Report repository

Releases

No releases published

Packages

No packages published