К содержанию

Главное

Доступность

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

Что Docara делает сама

  • Структура страницы. Шапка, меню, основной текст, содержание страницы и подвал выводятся элементами header, nav, main, aside и footer, у каждого меню есть своё название. Программа экранного доступа позволяет переходить между этими частями.
  • Переход к содержанию. Первая ссылка страницы — «К содержанию»: она появляется при нажатии Tab и переносит фокус сразу к тексту, минуя шапку и меню.
  • Текущая страница. Пункт меню и хлебные крошки текущей страницы отмечены для программ экранного доступа (aria-current).
  • Язык. У страницы указан язык и направление письма (lang, dir), по ним программа экранного доступа выбирает произношение.
  • Клавиатура. Меню, вкладки, раскрывающиеся блоки, настройки читателя и кнопки копирования работают с клавиатуры, а рамка фокуса видна. Порядок — на страницах компонентов, в разделе «Доступность».
  • Уменьшение движения. Если в системе читателя включено уменьшение движения, Docara отключает плавную прокрутку и анимации, а фоновый эффект первого экрана показывает неподвижный кадр.
  • Размер шрифта и тема. Читатель может увеличить шрифт и выбрать светлую или тёмную тему в настройках читателя. Размер меняется в процентах, поэтому учитывает и собственную настройку браузера.

Что остаётся автору

Что Как правильно
Описание картинки Напишите в квадратных скобках, что изображено и зачем: ![Схема сборки: Markdown, проверка, готовый сайт](scheme.webp). Декоративную картинку оставьте с пустым описанием ![](…).
Текст ссылки Пишите, куда ведёт ссылка: «Открыть быстрый старт», а не «здесь» или «подробнее».
Заголовки Один заголовок # на страницу, дальше по порядку: ##, ###, не пропуская уровни. Программы экранного доступа строят по ним оглавление.
Таблицы Первая строка — названия столбцов. Не используйте таблицу для раскладки текста по колонкам.
Цвет Не передавайте смысл только цветом: «красная кнопка» не поможет тому, кто цвет не различает. Добавьте слово или значок.
Видео и звук Дайте субтитры или текстовую расшифровку рядом.
Подписи компонентов Заполняйте label у примеров и встраиваний, title у схем: это название рамки для программы экранного доступа.

Как проверить

Отчёт о качестве. docara qa report проверяет то, что можно найти в тексте автоматически: картинки без описания, ссылки вида «здесь», порядок заголовков, таблицы без строки заголовков и язык страницы. Коды находок — в разделе «Доступность» справочника ошибок.

Bash
php vendor/bin/docara build production
php vendor/bin/docara qa report --env=production

Вручную. Откройте страницу и пройдите её только клавиатурой: Tab, Shift+Tab, Enter, пробел, стрелки во вкладках и меню. Проверьте, что фокус всегда виден и ни одна часть страницы не остаётся недоступной. Включите программу экранного доступа — VoiceOver на macOS и iOS, NVDA на Windows, TalkBack на Android — и прослушайте начало страницы. Посмотрите страницу в светлой и тёмной теме и с крупным шрифтом.

Автоматическая проверка не заменяет ручную: она не оценит, понятно ли описание картинки и верен ли порядок чтения.

См. также