Сontent-visibility и доступная семантика

Сontent-visibility и доступная семантика

От создателя: в то время, как я работал с командой разрабов в прошедшем квартале над платформой общества с открытым начальным кодом Forem, они попросили меня просмотреть Pull Request для доступности на GitHub, который представил новейшую функцию CSS лишь для Chrome: content-visibility. Я пропустил анонс о данной функции несколькими месяцами ранее сторонниками Chrome, потому сперва я специально исследовал его, чтоб осознать возможное воздействие на доступность.

Что такое content-visibility?

Согласно посту Web.dev: content-visibility дозволяет пользовательскому агенту пропускать рендеринг элемента, включая макет и отрисовку, до того времени, пока он не пригодится. Так как рендеринг пропускается, если большая часть вашего контента находится за пределами экрана, внедрение характеристики content-visibility существенно ускоряет первоначальную загрузку юзера. Это также дозволяет резвее вести взаимодействие с экранным контентом.

Эта функция создана для увеличения производительности загрузки странички методом пропуска содержимого, определенного как «вне экрана» либо вне области просмотра. Есть два вероятных значения content-visiblity: auto и hidden.

Forem PR от Бена Халперна включал content-visiblity: auto, который отмечает контент как неэкранный, который станет видимым в области просмотра при прокрутке, и докладывает браузеру пропустить его на исходном шаге рендеринга. Значение hidden показывает браузеру пропускать контент, который никогда не должен автоматом отображаться на дисплее средством прокрутки, что больше похоже на отображение CSS: none либо visibility: hidden, но с доп преимуществами в производительности. Приведены вероятные варианты использования: продвинутые виртуальные скроллеры и схемы измерения.

Аккуратненько. Но мое восприимчивое чувство доступности пропало, как я прочел эти слова: вне экрана и рендеринг. Мы используем внеэкранное содержание в мире доступности для визуализации содержимого с целью разоблачения экрана, к примеру, зрительно укрытых заголовков либо span частей снутри клавиш.

READ
Российские SEO-эксперты поделились мнением о декабрьском апдейте Google

Моя начальная идея заключалась в том, что content-visibility: auto может сделать делему доступа при исходной загрузке из-за угнетения части контура странички из программ чтения с экрана, потому я решил проверить это.

Команда Web.dev включила хорошую демонстрацию на Codepen, которую я сходу же употреблял, так как для локального экземпляра Forem требуется наиболее непростая настройка для имитации работающего веб-сайта Dev.to. Я увидел, что создатели Codepen разметили элементы .storyDIV при помощи CSS content-visibility: autoapplied, с заголовками, предыдущими сиим DIV (как следует, снаружи). Может быть, они ждали задачи с доступностью, но не писали о этом в посте.

Сontent-visibility и доступная семантика

Поиск в Гугл нашел два сообщения от CSS Tricks и Стива Фолкнера, но ни один из их не затронул тему воздействия content-visibility: auto на семантическую структуру. Итак, я начинаю писать о этом!

Воздействие доступности на семантическую структуру

Заглавия и иной контент будут запираться content-visibility, если они выходят за границы экрана. Это значит, что контент будет укрыт при загрузке из перечня частей в NVDA и экранного диктора, что воздействует на общий контур странички и сводку, прочитанную вслух.

Чтоб проверить это, я перемещал h2 в DIV и из назад при помощи content-visibility: auto. Когда заголовок находится за пределами DIV, он отображается. Вот снимок экрана перечня частей в NVDA:

Сontent-visibility и доступная семантика

Перечень частей NVDA, показывающий все заглавия, в том числе «части про припас»

При перемещении вовнутрь DIV .story при помощи content-visibility: auto заголовок запирается программками чтения с экрана, включая NVDA (как и ожидалось):

Сontent-visibility и доступная семантика

В перечне частей NVDA отсутствует заголовок

Это значит, что если вы используете content-visibility в разделах содержимого, включая заглавия и семантическую структуру, юзеры программ чтения с экрана не сумеют пользоваться данной структурой при загрузке. К огорчению, это усугубляет доступность при улучшении производительность загрузки.

READ
Учимся создавать макет Masonry-галереи, используя чистый CSS

Основываясь на моем тестировании, я рекомендую сохранять заглавия и ориентиры за пределами частей, стилизованных при помощи content-visibility: auto.

Без этого подхода к созданию семантической разметки для рендеринга при загрузке content-visibility свел бы на нет цель включения семантической структуры с самого начала, так как для этого потребовалась бы прокрутка странички, чтоб вслух читался полный и четкий план странички. Быстрее всего, это не то, что создатели желали бы употреблять!

Примечание: PR от Forem в итоге отметил лишь содержимое нижнего колонтитула при помощи content-visibility: auto, так как он находится понизу странички и на теоретическом уровне выиграет от отложенного рендеринга. Но один из недочетов использования Forem заключается нескончаемой прокрутке веб-сайта, при которой юзеры все равно не могли добраться до футера … потому вопросец о том, будет ли этот контент доступен при загрузке странички в вспомогательных разработках, был спорным. Если для вас любопытно, смотрите PR для получения наиболее подробной инфы!

Создатель: Marcy Sutton

Редакция: Команда webformyself.

Источник

Оценить статью
Блог о самом интересном.