Скрыть контент правильно

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

Делать контент невидимым (визуально скрытым)

Если элемент на странице:

• является интерактивным элементом, но его необходимо сделать невидимым, чтобы он мог быть тематическим (например, ссылка, флажок, переключатель или элемент управления формы с пользовательскими стилями),
• является заголовком или меткой для чего-то, чья цель очевидна (и, следовательно, заголовок / метку не нужно показывать зрячим пользователям; например, метка раздела или метка элемента формы), 
• не должен быть видимым для зрячих пользователей, но должен быть видимым для пользователей программы чтения с экрана,

... тогда вы должны сделать его невидимым (визуально скрытым).

Вы можете сделать это:

придание элементу visually-hidden класс,
в Drupal 8 настройте поля на странице управления отображением для подтипов сущностей (например, поле «Теги» в типе содержимого Article), чтобы установить для метки поля значение «- Visually Hidden -»,
используйте CSS, чтобы расположить его вне видимой области страницы, или,
используйте CSS

position: absolute !important;
clip: rect(1px, 1px, 1px, 1px);
overflow: hidden;
height: 1px;
width: 1px;
word-wrap: normal;

на элементе.

Пример:
Скрытие заголовка сообщения об ошибке, предупреждения и состояния.

Обоснование:
В большинстве тем сообщения о состоянии отображаются на видном месте в цветной рамке, поэтому они привлекают внимание зрячих пользователей, но, в соответствии с разделом 1.3.3 WCAG 2.0, понимание и эксплуатационное содержание не должны опираться исключительно на сенсорные характеристики компонентов. такие как форма, размер, визуальное расположение или ориентация.

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

Большинство программ чтения с экрана могут пропустить страницу, используя заголовки на странице. Задание заголовка сообщений облегчит их поиск.

Делать контент невидимым, пока кто-нибудь не перейдет к нему с помощью клавиатуры

Если элемент на странице:

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

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

Вы можете сделать это:

• давая элемент BOTH visually-hidden и focusable классам, или,
• используя CSS

css_selector_for_my_element {
  position: absolute !important;
  clip: rect(1px, 1px, 1px, 1px);
  overflow: hidden;
  height: 1px;
  width: 1px;
  word-wrap: normal;
}
css_selector_for_my_element:active,
css_selector_for_my_element:focus {
  position: static !important;
  clip: auto;
  overflow: visible;
  height: auto;
  width: auto;
}

Где css_selector_for_my_element - селектор для элемента, который вы хотите сделать невидимым, пока кто-нибудь не перейдет к нему с помощью клавиатуры.

Пример:
Ссылка «Перейти к основному содержанию» вверху каждой страницы в основных темах.

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

Чтобы соответствовать стандартам WCAG 2.0 раздела 2.4.1, вы должны предоставить способ пропустить блоки контента, которые повторяются на нескольких страницах.

Полностью скрыть контент для всех пользователей

Если элемент на странице:

• не должен отображаться, пока событие JavaScript не сделает его видимым,
• не относится к зрячим пользователям или пользователям программ чтения с экрана в контексте,
• содержит значения, которые читаются / пишутся JavaScript, но никогда не должны отображаться напрямую, или,
• как правило, не должны быть видны зрячим пользователям или пользователям программ чтения с экрана,

... тогда вы должны полностью скрыть это для всех пользователей.

Вы можете сделать это:

• давая элементу hidden класс (D8),
• если это поле в подтипе сущности, установите его Формат на «- Скрытый -» на странице управления отображением для этого подтипа сущности,
• если это метка поля в подтипе сущности, установите для отображения метки значение «- Скрытый -» на странице управления отображением для этого подтипа сущности, или,
• с использованием отображения CSS: display: none;.

Пример:
Скрытие области предварительного просмотра цветового модуля до запуска Javascript:

/* color.css (Drupal 7 and 8) */
#preview {
  display: none;
}

Обоснование:
Предварительный просмотр не работает, если JavaScript не работает, поэтому он никому не нужен.

Злоупотребление

Распространенное неуместное использование «display:none» - удаление метки или заголовка формы для изменения внешнего вида страницы. Однако это сделает элемент формы непригодным для пользователей программы чтения с экрана!

Например, если вы удалите метку формы с «display:none», пользователь программы чтения с экрана может сказать вам: «У меня есть обязательное текстовое поле для ввода, но я понятия не имею, для чего это поле». В этой ситуации более подходящим было бы сделать контент невидимым (визуально скрытым).

Делать контент невидимым для программ чтения с экрана

Если элемент на странице:

• будет сбивать с толку сам по себе, или,
•  должен быть виден только зрячим пользователям,

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

Вы можете сделать это:

• присвоение элементу атрибута aria-hidden="true"

Пример:
Элемент управления для удаления фильтра поиска показывает «x» только для зрячих пользователей И предоставляет доступные визуально скрытые инструкции для пользователей программы чтения с экрана:

Currently filtering by: <a href="...">Module <span class="visually-hidden">Click to remove this filter.</span> <span aria-hidden="true">x</span></a>

Обоснование:
Уже есть доступный альтернативный текст.

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

Злоупотребления

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

Еще о невидимом контенте

• Рекомендации WebAIM
• дисплей: нет проблемы для программ чтения с экрана