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

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

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

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

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

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

См. 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

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

Текст альтернативности в шаблонах

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

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

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

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

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

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

Формы

Формообработчик использует 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-accessibility

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

help_text и HelpPanel

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

Читаемость

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