Делаем свернутый контент доступным с помощью hidden=Until-Found

Эта статья — перевод оригинальной статьи "Making collapsed content accessible with hidden=until-found"

Также я веду телеграм канал “Frontend по-флотски”, где рассказываю про интересные вещи из мира разработки интерфейсов.

Вступление

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

HTML-атрибут hidden=until-found и событие beforematch могут решить эти проблемы. Добавляя hidden=until-found в контейнер для вашего скрытого контента, вы позволяете браузеру искать текст в этой скрытой области и открывать раздел, если совпадение найдено.

Эта функция не только позволяет выполнять поиск на странице в скрытых разделах, но и делает этот скрытый контент доступным для поисковых систем. Google Search даже сформирует ссылки, которые прокручиваются до обнаруженного фрагмента.

Эти функции доступны в Chrome 102, поэтому давайте посмотрим, как они работают.

Как этим пользоваться?

Если на вашем веб-сайте уже есть сворачиваемые разделы, которые вы хотите сделать доступными для поиска, замените стили, которые делают раздел скрытым, атрибутом hidden=until-found. Если ваша страница также имеет другое состояние, которое необходимо синхронизировать с тем, открыт ли ваш раздел, добавьте прослушиватель событий beforematch, который будет запускаться для элемента hidden=until-found прямо перед тем, как элемент будет обнаружен браузером.

Codepen

Предостережения

Для обеспечения единообразия взаимодействия с пользователем содержимое hidden=until-found должно быть доступно для просмотра без использования поиска на странице. Не все пользователи будут использовать поиск на странице, а браузеры, которые не поддерживают hidden=until-found, получат исходный опыт скрытого содержимого без раскрытия.

Если вы хотите убедиться, что ваш скрытый контент доступен для поиска в браузерах, которые не поддерживают hidden=until-found, вы всегда можете раскрыть скрытый контент в этих браузерах. Обнаружение функции можно выполнить, проверив наличие обработчика события beforematch:

if (!(‘onbeforematch' in document.body)) {
  // expand all hidden content
}

hidden=until-found применяет свойство CSS content-visibility:hidden вместо свойства display:none, к которому применяется обычный скрытый атрибут. Это необходимо для поиска содержимого, когда оно закрыто, но также имеет следующие побочные эффекты:

• Некоторые API-интерфейсы макета, такие как getBoundingClientRect, сообщают, что скрытый контент внутри элемента hidden=until-found занимает место и занимает определенную позицию на странице.

• Дочерние узлы элемента hidden=until-found не будут отображаться, но сам элемент hidden=until-found по-прежнему будет иметь поле. Это означает, что свойства CSS, такие как border и размер, по-прежнему будут влиять на рендеринг.

В качестве примера в следующей демонстрации добавлены border, padding и margin к элементу, для которого применено значение hidden=until-found. В том месте, где будет отображаться скрытый контент, находится поле с серой рамкой, которое затем заполняется скрытым контентом при его раскрытии. Это размер скрытого элемента.

CodePen

Чтобы избежать этой проблемы, добавьте border к элементу, вложенному внутрь контейнера, для которого установлено значение hidden=until-found.

CodePen