Скрыть содержание

23/04/2020, by maria

Скрытие контента очень полезно для доступности. Мы можем скрывать вещи визуально и отображать их только пользователям программы чтения с экрана, мы можем скрывать контент от пользователей программы чтения с экрана и отображать его только визуально, или мы можем скрывать контент от обоих. Drupal поставляется с некоторыми встроенными классами CSS, которые могут помочь убедиться в ясности намерений. Мы не рекомендуем использовать { display:none; } как это часто неправильно используется.

Техника	Визуально скрытый	Screen reader скрыт	Дополнительная информация
CSS: `<div class="visually-hidden"></div>`	Да	Нет	Это встроено в Drupal 8. В Drupal 7 это было class="element-invisible".
CSS: `<div class="hidden"></div>`	Да	Да	Это встроено в Drupal 8. В Drupal 7 это было class="element-invisible".
HTML5 attribute: `<div hidden></div>`	Да	Да	В поддерживаемых браузерах это то же самое, что и CSS { display:none; }
ARIA attribute: `<div aria-hidden="true"></div>`	Нет	Да	Встроен в современные браузеры. очень похож на скрытый атрибут HTML5
CSS: `<div class="visually-hidden focusable"></div>`	Да	Да	Это встроено в Drupal 8. В Drupal 7 это было class="element-invisible element-focusable"

Этот формат взят со страницы скрытого контента 18F.

Source URL:

Hide Content Summary

Source authors:

mgifford

Drupal’s online documentation is © 2000-2020 by the individual contributors and can be used in accordance with the Creative Commons License, Attribution-ShareAlike 2.0. PHP code is distributed under the GNU General Public License.

Extra Block Types (EBT) - New Layout Builder experience❗

❗Extra Paragraph Types (EPT) - New Paragraphs experience

Скрыть содержание