Учет доступности

Доступность веб-сайтов, основанных на CMS, зависит от правильного моделирования контента, создания доступных шаблонов и создания контента с учетом рекомендаций по удобочитаемости и доступности.

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

Моделирование контента
Доступность в шаблонах
Создание доступного контента
Ресурсы по доступности

Моделирование контента

В рамках определения моделей вашего сайта следует обратить особое внимание на следующие моменты:

Описание альтернативного текста для изображений

По умолчанию для изображений Wagtail используется поле title в качестве описания альтернативного текста (#4945). Это неприемлемо, так как оно не отображается в интерфейсе CMS, а форма загрузки изображений по умолчанию использует имя файла изображения в качестве заголовка.

В идеале, всегда добавляйте необязательное поле «Описание альтернативного текста» при использовании изображения, наряду с полем для изображения:

Для обычных полей добавьте поле описания альтернативного текста в панель изображения.
Для StreamField добавьте дополнительное поле в блок изображения.
Для форматированного текста Wagtail уже позволяет настроить описание альтернативного текста для изображений в форматированном тексте.

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

Примечание

Нужно ли добавлять поле описания альтернативного текста в модель Image для моего сайта?

Наличие выделенного поля для описания альтернативного текста в модели Image (#5789) лучше, чем ничего, и может быть уместно для некоторых веб-сайтов, но мы рекомендуем размещать его непосредственно в контенте, поскольку в идеале описание альтернативного текста должно быть написано в контексте использования изображения:

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

См. RFC 51: Контекстуальное описание альтернативного текста для долгосрочного решения этой проблемы.

Заголовок вставки

Отсутствие заголовков у вставленных элементов — распространенная ошибка при проверке доступности веб-сайтов Wagtail. В некоторых случаях у iframe вставки Wagtail отсутствует атрибут title. Это, как правило, проблема с поставщиками OEmbed, такими как YouTube (#5982). Это очень проблематично для пользователей считывателей экрана, которые полагаются на заголовок, чтобы понять, что представляет собой вставка, и стоит ли взаимодействовать с ней.

Если ваш веб-сайт использует вставки без заголовков, убедитесь в следующем:

Добавьте поле OEmbed title как атрибут title в iframe.
Добавьте пользовательское обязательное поле Заголовок в ваши вставки и добавьте его как атрибут iframe в title.

Доступные уровни заголовков

Wagtail позволяет разработчикам очень легко контролировать уровни заголовков, доступные для каждого содержимого, через функции форматированного текста или пользовательские блоки StreamField. В обоих случаях уделите время, чтобы ограничить доступные уровни заголовков, чтобы структура документа страниц была более логичной и последовательной. Рассмотрите следующие ограничения:

Запретить h1 в форматированном тексте. Должен быть только один тег h1 на странице, который, как правило, соответствует title страницы.
Ограничить уровни заголовков до h2 для основного содержимого страницы. Добавить h3 только если это необходимо. Как правило, избегайте других уровней.
Для контента, отображаемого в определенном разделе страницы, ограничьте уровни заголовков теми, которые находятся непосредственно ниже основного заголовка раздела.

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

Форматирование полужирным и курсивом в форматированном тексте

По умолчанию Wagtail сохраняет форматирование полужирным шрифтом как тег b, а курсивом как тег i (#4665). Хотя эти теги не всегда имеют корректную семантику (strong и em более распространены), для пользователей считывателей экрана это не имеет большого значения, так как по умолчанию считыватели экрана не объявляют содержимое по-разному в зависимости от выделения.

Если это для вас важно, вы можете изменить используемые теги при сохранении контента с помощью конвертеров форматов форматированного текста. В будущем обработчики переопределения форматированного текста также должны поддерживать возможность этого без изменения формата хранения (#4223).

Блок таблицы

Реализация TableBlock по умолчанию слишком упрощает пропуск необходимости строк или столбцов заголовков (#5989). Убедитесь, что всегда заданы заголовки строк или столбцов. Всегда добавляйте заголовок, чтобы пользователи считывателей экрана, просматривающие таблицы сайта, понимали, где они находятся.

Доступность в шаблонах

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

Описание альтернативного текста в шаблонах

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

Пустые теги заголовков

Как в форматированном тексте, так и в пользовательских блоках StreamField бывает легко создать блок заголовка, но не добавить в него никакого контента. Если эта проблема возникает на вашем сайте,

Добавьте правила проверки для этих полей, чтобы предотвратить сохранение страницы с пустыми заголовками, например, используя StreamField CharBlock, который по умолчанию является обязательным.
Рассмотрите возможность добавления аналогичных правил проверки для полей форматированного текста (#6526).

Кроме того, вы можете скрыть пустые блоки заголовков с помощью CSS:

h1:empty, h2:empty, h3:empty, h4:empty, h5:empty, h6:empty {
    display: none;
}

Формы

wagtailforms Построитель форм использует API форм Django. Ниже приведены соображения, специфичные для форм в шаблонах:

Избегайте использования вспомогательных функций, таких как as_table, as_ul, as_p, которые могут затруднить навигацию по формам для пользователей считывателей экрана или привести к ошибкам валидации HTML (см. билет Django #32339).
Убедитесь, что обязательные и необязательные поля визуально отличаются.
Уделите время, чтобы сгруппировать связанные поля вместе в fieldset, с соответствующим legend, особенно для переключателей и флажков (см. билет Django #32338).
Если необходимо, используйте соответствующие атрибуты autocomplete и autocapitalize.
Для полей «Дата» и «Дата и время» убедитесь, что отображается ожидаемый формат или пример значения (см. билет Django #32340). Или используйте input type=”date”.
Для числовых полей подумайте, подходит ли input type="number" или могут существовать лучшие альтернативы, такие как inputmode.

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

Создание доступного контента

Вот что вы можете сделать, чтобы помочь авторам создавать доступный контент.

wagtail-доступность

wagtail-accessibility — это пакет стороннего разработчика, который добавляет tota11y к предварительным просмотрам Wagtail. Это упрощает авторам выполнение базовых проверок доступности — проверка структуры заголовков страницы или текста ссылок.

help_text и HelpPanel

Иногда пользователи Wagtail могут не знать правил оформления контента сайта или лучших практик веб-разработки. Используйте поля help_text и HelpPanel (см. Типы панелей).

Читабельность

Читабельность — фундаментальный аспект доступности. Одним из способов улучшения текстового контента является установление четкой цели для уровня чтения/возраста, которая может быть оценена с помощью wagtail-readinglevel в виде оценки, отображаемой в полях с форматированием Rich Text.

Ресурсы по доступности

Мы сосредоточиваемся на аспектах, специфичных для веб-сайтов Wagtail, но доступность — это гораздо больше. Вот ценные ресурсы для изучения, для разработчиков, но также и для дизайнеров и авторов: