---
url: 'https://dxpr.com/uk/hc/%D0%B4%D0%BE%D0%BA%D1%83%D0%BC%D0%B5%D0%BD%D1%82%D0%B0%D1%86%D1%96%D1%8F/%D0%BD%D0%B0%D0%B2%D1%87%D0%B0%D0%BD%D0%BD%D1%8F-dxpr-builder/%D0%B4%D0%BE%D0%B4%D0%B0%D1%82%D0%BA%D0%BE%D0%B2%D0%BE/%D0%B4%D0%BE%D1%81%D1%82%D1%83%D0%BF%D0%BD%D1%96%D1%81%D1%82%D1%8C'
title: 'Зробіть свої сторінки доступними | DXPR'
author:
  name: Jurriaan
  url: 'https://dxpr.com/users/jurriaan'
date: '2026-10-24T19:59:51+00:00'
updated: '2026-10-24T20:08:10+00:00'
copyright: 'Copyright DXPR. All rights reserved.'
type: article
summary: |-
  Ви даєте кожному зображенню опис, тримаєте заголовки в порядку й робите
  текст читабельним на кольорі, щоб користувачі екранних читачів і клавіатури могли
  користуватися вашими сторінками. Ця сторінка перелічує те, що DXPR Builder робить за вас,
  те, що ви додаєте самі, і як ви перевіряєте результат перед
  публікацією.
tags:
  - 'Make pages accessible and findable'
image: 'https://dxpr.com/themes/custom/dxpr_com/images/dxpr-share-card.jpg'
published: true
og:
  site_name: DXPR
  updated_time: '2026-10-24T20:08:10+0000'
  'image:alt': 'DXPR, powered by Drupal: AI-powered Drupal for marketers.'
schema:
  '@context': 'https://schema.org'
  '@graph':
    -
      mainEntity: {  }
    -
      '@type': TechArticle
      headline: 'Зробіть свої сторінки доступними'
      description: |-
        Ви даєте кожному зображенню опис, тримаєте заголовки в порядку й робите
        текст читабельним на кольорі, щоб користувачі екранних читачів і клавіатури могли
        користуватися вашими сторінками. Ця сторінка перелічує те, що DXPR Builder робить за вас,
        те, що ви додаєте самі, і як ви перевіряєте результат перед
        публікацією.
      image:
        '@type': ImageObject
        url: 'https://dxpr.com/themes/custom/dxpr_com/images/dxpr-share-card.jpg'
        width: '1200'
        height: '630'
      datePublished: '2026-10-24T19:59:51+0000'
      dateModified: '2026-10-24T20:08:10+0000'
      author:
        '@type': Organization
        '@id': 'https://dxpr.com/#organization'
        name: DXPR
        url: 'https://dxpr.com/'
        logo:
          '@type': ImageObject
          url: 'https://dxpr.com/themes/custom/dxpr_com/dxpr-logo-dark.svg'
          width: '1348'
          height: '501'
      publisher:
        '@type': Organization
        '@id': 'https://dxpr.com/#organization'
        name: DXPR
        url: 'https://dxpr.com/'
        logo:
          '@type': ImageObject
          url: 'https://dxpr.com/themes/custom/dxpr_com/dxpr-logo-dark.svg'
          width: '1348'
          height: '501'
      mainEntityOfPage: 'https://dxpr.com/uk/hc/%D0%B4%D0%BE%D0%BA%D1%83%D0%BC%D0%B5%D0%BD%D1%82%D0%B0%D1%86%D1%96%D1%8F/%D0%BD%D0%B0%D0%B2%D1%87%D0%B0%D0%BD%D0%BD%D1%8F-dxpr-builder/%D0%B4%D0%BE%D0%B4%D0%B0%D1%82%D0%BA%D0%BE%D0%B2%D0%BE/%D0%B4%D0%BE%D1%81%D1%82%D1%83%D0%BF%D0%BD%D1%96%D1%81%D1%82%D1%8C'
      articleSection: 'Доступність і пошук сторінок'
    -
      '@type': WebPage
      '@id': 'https://dxpr.com/uk/hc/%D0%B4%D0%BE%D0%BA%D1%83%D0%BC%D0%B5%D0%BD%D1%82%D0%B0%D1%86%D1%96%D1%8F/%D0%BD%D0%B0%D0%B2%D1%87%D0%B0%D0%BD%D0%BD%D1%8F-dxpr-builder/%D0%B4%D0%BE%D0%B4%D0%B0%D1%82%D0%BA%D0%BE%D0%B2%D0%BE/%D0%B4%D0%BE%D1%81%D1%82%D1%83%D0%BF%D0%BD%D1%96%D1%81%D1%82%D1%8C'
      description: |-
        Ви даєте кожному зображенню опис, тримаєте заголовки в порядку й робите
        текст читабельним на кольорі, щоб користувачі екранних читачів і клавіатури могли
        користуватися вашими сторінками. Ця сторінка перелічує те, що DXPR Builder робить за вас,
        те, що ви додаєте самі, і як ви перевіряєте результат перед
        публікацією.
      breadcrumb:
        '@type': BreadcrumbList
        itemListElement:
          -
            '@type': ListItem
            position: 1
            name: Home
            item: 'https://dxpr.com/uk'
      publisher:
        '@type': Organization
        '@id': 'https://dxpr.com/#organization'
        name: DXPR
      inLanguage: uk
---
[Help Center](/uk/hc)/[Documentation](/uk/hc/%D0%B4%D0%BE%D0%BA%D1%83%D0%BC%D0%B5%D0%BD%D1%82%D0%B0%D1%86%D1%96%D1%8F) /[Вивчення DXPR Builder](/uk/hc/documentation/learn-dxpr-builder) /[Керування сайтом](/uk/hc/documentation/learn-dxpr-builder/manage) /[Доступність і пошук сторінок](/uk/hc/documentation/learn-dxpr-builder/manage/accessible-findable) # Зробіть свої сторінки доступними.

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

   ## In this guide

 Related guides

- [Комбінації клавіш](/uk/hc/%D0%B4%D0%BE%D0%BA%D1%83%D0%BC%D0%B5%D0%BD%D1%82%D0%B0%D1%86%D1%96%D1%8F/%D0%BD%D0%B0%D0%B2%D1%87%D0%B0%D0%BD%D0%BD%D1%8F-dxpr-builder/%D0%B4%D0%BE%D0%B2%D1%96%D0%B4%D0%BD%D0%B8%D0%BA/%D0%BA%D0%BE%D0%BC%D0%B1%D1%96%D0%BD%D0%B0%D1%86%D1%96%D1%97-%D0%BA%D0%BB%D0%B0%D0%B2%D1%96%D1%88)
- [Фаєрвол і резидентність даних](/uk/hc/%D0%B4%D0%BE%D0%BA%D1%83%D0%BC%D0%B5%D0%BD%D1%82%D0%B0%D1%86%D1%96%D1%8F/%D0%BD%D0%B0%D0%B2%D1%87%D0%B0%D0%BD%D0%BD%D1%8F-dxpr-builder/%D0%BF%D0%BE%D1%87%D0%B0%D1%82%D0%BE%D0%BA-%D1%80%D0%BE%D0%B1%D0%BE%D1%82%D0%B8/%D1%84%D0%B0%D1%94%D1%80%D0%B2%D0%BE%D0%BB-%D1%82%D0%B0-%D1%80%D0%B5%D0%B7%D0%B8%D0%B4%D0%B5%D0%BD%D1%82%D0%BD%D1%96%D1%81%D1%82%D1%8C-%D0%B4%D0%B0%D0%BD%D0%B8%D1%85)

Ви даєте кожному зображенню опис, тримаєте заголовки в порядку й робите текст читабельним на кольорі, щоб користувачі екранних читачів і клавіатури могли користуватися вашими сторінками. Ця сторінка перелічує те, що 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) зі стрілкою пересуває елементи. Див. [довідник сполучень клавіш](/uk/hc/%D0%B4%D0%BE%D0%BA%D1%83%D0%BC%D0%B5%D0%BD%D1%82%D0%B0%D1%86%D1%96%D1%8F/%D0%BD%D0%B0%D0%B2%D1%87%D0%B0%D0%BD%D0%BD%D1%8F-dxpr-builder/%D0%B4%D0%BE%D0%B2%D1%96%D0%B4%D0%BD%D0%B8%D0%BA/%D0%BA%D0%BE%D0%BC%D0%B1%D1%96%D0%BD%D0%B0%D1%86%D1%96%D1%97-%D0%BA%D0%BB%D0%B0%D0%B2%D1%96%D1%88).

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

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

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

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

Зображення, створені ШІ, починаються з вашого промпту як альтернативного тексту. Відредагуйте його, щоб він описував результат, а не запит. Див. [альтернативний текст зображень](/uk/hc/%D0%B4%D0%BE%D0%BA%D1%83%D0%BC%D0%B5%D0%BD%D1%82%D0%B0%D1%86%D1%96%D1%8F/%D0%BD%D0%B0%D0%B2%D1%87%D0%B0%D0%BD%D0%BD%D1%8F-dxpr-builder/%D1%88%D1%96/%D0%B0%D0%BB%D1%8C%D1%82%D0%B5%D1%80%D0%BD%D0%B0%D1%82%D0%B8%D0%B2%D0%BD%D0%B8%D0%B9-%D1%82%D0%B5%D0%BA%D1%81%D1%82).

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

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**. Кроки показує сторінка [Фони](/uk/hc/%D0%B4%D0%BE%D0%BA%D1%83%D0%BC%D0%B5%D0%BD%D1%82%D0%B0%D1%86%D1%96%D1%8F/%D0%BD%D0%B0%D0%B2%D1%87%D0%B0%D0%BD%D0%BD%D1%8F-dxpr-builder/%D0%BD%D0%B0%D0%BB%D0%B0%D1%88%D1%82%D1%83%D0%B2%D0%B0%D0%BD%D0%BD%D1%8F-%D0%B5%D0%BB%D0%B5%D0%BC%D0%B5%D0%BD%D1%82%D1%96%D0%B2/%D1%82%D0%BB%D0%BE).

## Використовуйте описові посилання та кнопки

Елементи 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 на правильному рівні.
- **Перевірка повідомляє про низький контраст тексту поверх фото.** Додайте градієнт, описаний вище, або виберіть темніший фон тексту.

## Що далі?

- [Сполучення клавіш](/uk/hc/%D0%B4%D0%BE%D0%BA%D1%83%D0%BC%D0%B5%D0%BD%D1%82%D0%B0%D1%86%D1%96%D1%8F/%D0%BD%D0%B0%D0%B2%D1%87%D0%B0%D0%BD%D0%BD%D1%8F-dxpr-builder/%D0%B4%D0%BE%D0%B2%D1%96%D0%B4%D0%BD%D0%B8%D0%BA/%D0%BA%D0%BE%D0%BC%D0%B1%D1%96%D0%BD%D0%B0%D1%86%D1%96%D1%97-%D0%BA%D0%BB%D0%B0%D0%B2%D1%96%D1%88) для повного списку скорочень редактора.
- [Мережевий екран і резидентність даних](/uk/hc/%D0%B4%D0%BE%D0%BA%D1%83%D0%BC%D0%B5%D0%BD%D1%82%D0%B0%D1%86%D1%96%D1%8F/%D0%BD%D0%B0%D0%B2%D1%87%D0%B0%D0%BD%D0%BD%D1%8F-dxpr-builder/%D0%BF%D0%BE%D1%87%D0%B0%D1%82%D0%BE%D0%BA-%D1%80%D0%BE%D0%B1%D0%BE%D1%82%D0%B8/%D1%84%D0%B0%D1%94%D1%80%D0%B2%D0%BE%D0%BB-%D1%82%D0%B0-%D1%80%D0%B5%D0%B7%D0%B8%D0%B4%D0%B5%D0%BD%D1%82%D0%BD%D1%96%D1%81%D1%82%D1%8C-%D0%B4%D0%B0%D0%BD%D0%B8%D1%85) для інших тем відповідності.