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

Alt-текст для изображений

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

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

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

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

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

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

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

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

• Добавьте поле OEmbed title в качестве title в iframe.
• Добавьте пользовательское обязательное поле Title к вашим вставкам и добавьте его в качестве iframe в title.

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

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

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

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

Жирный и курсивный шрифты в форматированном тексте

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

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

TableBlock

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

Alt-текст в шаблонах

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

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

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

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

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

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

Формы

The Form builder uses Django’s forms API. Here are considerations specific to forms in templates:

• Avoid rendering helpers such as as_table, as_ul, as_p, which can make forms harder to navigate for screen reader users or cause HTML validation issues (see Django ticket #32339).
• Make sure to visually distinguish required and optional fields.
• Take the time to group related fields together in fieldset, with an appropriate legend, in particular for radios and checkboxes (see Django ticket #32338).
• If relevant, use the appropriate autocomplete and autocapitalize attributes.
• For Date and Datetime fields, make sure to display the expected format or an example value (see Django ticket #32340). Or use input type=”date”.
• For Number fields, consider whether input type="number" really is appropriate, or whether there may be better alternatives such as inputmode.

Make sure to test your forms’ implementation with assistive technologies, and review official W3C guidance on accessible forms development for further information.

wagtail-accessibility

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

help_text и HelpPanel

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

Читаемость

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