Зробіть свої сторінки доступними.

Вивчення DXPR BuilderКерування сайтомДоступність і пошук сторінок

Ви даєте кожному зображенню опис, тримаєте заголовки в порядку й робите текст читабельним на кольорі, щоб користувачі екранних читачів і клавіатури могли користуватися вашими сторінками. Ця сторінка перелічує те, що DXPR Builder робить за вас, те, що ви додаєте самі, і як ви перевіряєте результат перед публікацією.

Що конструктор робить за вас

  • Справжня структура тексту. Елемент Text використовує CKEditor 5 зі справжніми заголовками (Heading 1 до Heading 6), абзацами та списками.
  • ARIA на інтерактивних елементах. Вкладки несуть role="tablist" і role="tab". Смуги прогресу та кругові лічильники несуть role="progressbar" зі своїм мінімальним, максимальним і поточним значеннями. Заголовки панелей Collapse це кнопки, які повідомляють, чи відкрита їхня панель.
  • Доступні діалогові вікна редактора. Кожне діалогове вікно налаштувань це role="dialog" з aria-modal і заголовком.
  • Доступ із клавіатури в редакторі. Enter відкриває налаштування елемента, Escape закриває панель або знімає вибір з елемента, а Ctrl (Cmd на Mac) зі стрілкою пересуває елементи. Див. довідник сполучень клавіш.

Елементи макета (розділи, рядки та колонки) це звичайні div-елементи. Структура, яку оголошує екранний читач, походить із ваших заголовків.

Додавання альтернативного тексту до зображення

  1. Наведіть курсор на зображення й натисніть More > Settings.
  2. Відкрийте панель SEO.
  3. Введіть опис у Alt attribute: що показує зображення і чому воно на сторінці, одним-двома реченнями, без «image of».
  4. Натисніть Save у діалоговому вікні, потім Save на панелі контейнера.

Панель SEO елемента Image з Alt attribute Orange painting of a face in profile, поруч із тією картиною та її підписом Spring exhibition

Коли Alt attribute порожній, елемент Image взагалі не пише alt , і екранні читачі можуть прочитати ім’я файла. Для суто декоративного зображення натомість використайте Background image розділу на панелі Style; екранні читачі пропускають фони. Image carousel використовує один Alt attribute для всіх своїх зображень, тож опишіть набір.

Зображення, створені ШІ, починаються з вашого промпту як альтернативного тексту. Відредагуйте його, щоб він описував результат, а не запит. Див. альтернативний текст зображень.

Тримайте заголовки в порядку

  1. Дайте сторінці один Heading 1. Більшість тем показують назву сторінки як Heading 1, тож не додавайте другого в конструкторі. На DXPR CMS ви можете натомість сховати цю назву на одній сторінці: на її формі редагування відкрийте DXPR Theme Settings і позначте Page Title у DXPR Hide Regions.
  2. На панелі інструментів елемента Text використовуйте список заголовків, щоб позначити назви розділів як Heading 2, а підрозділи як Heading 3. Не пропускайте рівнів.
  3. Використовуйте кнопки списків панелі інструментів для списків, а не введені дефіси.

Три елементи фіксують свій рівень заголовка. Title Jumbotron завжди Heading 1, Title Card завжди Heading 5, а кожен Toggle title панелі Collapse це Heading 2.

Перевірте контраст кольорів

Вибори кольору пропонують палітру вашої теми, але не вимірюють контраст, тож перевірте його самі:

Текст Мінімальне співвідношення (WCAG AA)
Основний текст 4,5:1
Великий текст (24 px або близько 19 px жирним) 3:1

Для тексту поверх фото затемніть фото, щоб співвідношення трималося по всьому зображенню. На панелі Background effects розділу встановіть Background effect у Gradient із напівпрозорими темними Start color і End color. Кроки показує сторінка Фони.

Панель Background effects розділу Section з вибраним Gradient, темними напівпрозорими чипами кольору під Start color і End color і напрямком 180, поруч із фото стола, затемненим під білим заголовком

Елементи Button і Link показують введений вами текст як текст посилання. Пишіть, що робить посилання («Register for Open Day»), а не «click here». Елемент Link також має Title attribute на своїй панелі SEO для довшого опису.

Що ви бачите

  1. Установіть View mode на панелі контейнера в Preview, щоб жодні елементи керування редактором не заважали.
  2. Натискайте Tab, щоб рухатися сторінкою. Кожна кнопка, посилання та вкладка досяжні й показують видиме кільце фокуса.
  3. Автоматична перевірка, наприклад аудит доступності браузера або розширення axe, не повідомляє про помилки для вмісту конструктора на опублікованій сторінці.

Якщо ви не бачите чистого звіту

  • Перевірка повідомляє про зображення без альтернативного тексту. Alt attribute елемента Image порожній. Заповніть його або пересуньте декоративне зображення на фон розділу.
  • Перевірка повідомляє про два Heading 1. Title Jumbotron завжди Heading 1, поруч із назвою сторінки вашої теми. Натомість використайте елемент Text із Heading 2.
  • Перевірка повідомляє про пропущений рівень заголовка. Title Card завжди Heading 5. Залиште його порожнім і почніть картку заголовком елемента Text на правильному рівні.
  • Перевірка повідомляє про низький контраст тексту поверх фото. Додайте градієнт, описаний вище, або виберіть темніший фон тексту.

Що далі?