Зразок

Зразок звіту: що отримує ваш клієнт

Це повний автоматичний звіт про Linden & Loom, вигаданий інтернет-магазин, підготовлений під брендом Kestrel & Pine, вигаданої веб-студії. Обидві назви придумано для цього зразка; проблеми — справжні результати нашого сканера на демонстраційних сторінках магазину.

Відкрити зразок PDF Переглянути ціни

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

Зразок із вигаданими назвами

Звіт про доступність

lindenloom.example

Перевірено 12 жовтня 2026 · Підготовлено: Kestrel & Pine

Знайдено проблем: 36

Типів проблем: 9 · перевірено сторінок: 3

Критично: 6
Серйозно: 27
Помірно: 3
Незначно: 0

Критичних проблем: 6. Вони можуть завадити частині відвідувачів купити або зв’язатися з вами.

Перший екран lindenloom.example так, як його побачив наш сканер. — Перший екран сторінки. Номери позначають проблеми з переліку нижче.

Усі проблеми

Критично 4 елементи

Деякі кнопки не мають назви

WCAG 2.2 4.1.2 (A) Name, Role, Value · EN 301 549 9.4.1.2

Що це означає для ваших відвідувачів

Користувачі програм зчитування з екрана та голосового керування не можуть зрозуміти, яка кнопка додає товар у кошик, відкриває меню чи запускає пошук. Через це вони можуть узагалі не зробити покупку.

Кого це стосується

незрячі покупці
користувачі програм зчитування з екрана
користувачі голосового керування

Як виправити

Дайте кожній кнопці назву: видимий текст, aria-label або aria-labelledby з посиланням на видимий текст. Кнопкам лише з іконкою потрібен aria-label, наприклад «Додати в кошик» або «Закрити». Не покладайтеся на атрибут title чи іконки, задані лише через CSS.

Частину пояснення перекладено машинно, носій мови її ще не вичитав.

Сторінки, де трапляється

/×2
/product.html×2

Приклади на вашому сайті

Знімок елемента на вашій сторінці, обведеного червоним: Деякі кнопки не мають назви

Елемент: button[type="button"]:nth-child(1)

Код для розробника

<button type="button"><svg viewBox="0 0 24 24" fill="none" stroke="#2b2622" stroke-width="2"><circle cx="11" cy="11" r="7"></circle><path d="m20 20-3.5-3.5"></path></svg></button>

Елемент: .icons > button:nth-child(1)

Код для розробника

<button type="button"><svg viewBox="0 0 24 24" fill="none" stroke="#2b2622" stroke-width="2"><circle cx="11" cy="11" r="7"></circle><path d="m20 20-3.5-3.5"></path></svg></button>

Елемент: .cart

Код для розробника

<button type="button" class="cart"><svg viewBox="0 0 24 24" fill="none" stroke="#2b2622" stroke-width="2"><path d="M5 7h14l-1.5 12h-11z"></path><path d="M9 7a3 3 0 0 1 6 0"></path></svg></button>

Інших елементів із цією проблемою: 1.

Критично 1 елемент

Поля форм не мають підписів

WCAG 2.2 4.1.2 (A) Name, Role, Value · EN 301 549 9.4.1.2

Що це означає для ваших відвідувачів

Користувачі програм зчитування з екрана чують лише «поле редагування» і не знають, що вводити: імʼя, телефон чи поштовий індекс. Під час оформлення замовлення це прямо призводить до покинутих замовлень. Поля лише з плейсхолдером також плутають літніх покупців, щойно ті починають вводити текст.

Кого це стосується

незрячі покупці
користувачі програм зчитування з екрана
літні покупці
люди з когнітивними порушеннями
користувачі голосового керування

Як виправити

Повʼяжіть видимий <label for> з кожним полем або загорніть поле в label. Використовуйте aria-label лише тоді, коли видимий підпис справді неможливий. Плейсхолдер не є підписом. Перевірте поля пошуку, розсилки, кількості та оформлення замовлення.

Частину пояснення перекладено машинно, носій мови її ще не вичитав.

Приклади на вашому сайті

Елемент: input
Код для розробника
```
<input type="number" value="1" min="1">
```

Критично 1 елемент

Випадний список не має підпису

WCAG 2.2 4.1.2 (A) Name, Role, Value · EN 301 549 9.4.1.2

Що це означає для ваших відвідувачів

Користувачі програм зчитування з екрана чують лише «комбіноване поле» і не знають, що в ньому вибирати: розмір, колір, кількість чи країну. Це може завадити вибрати варіант товару або завершити замовлення.

Кого це стосується

незрячі покупці
користувачі програм зчитування з екрана
користувачі голосового керування
люди з когнітивними порушеннями

Як виправити

Повʼяжіть видимий <label for> з кожним <select> або використайте aria-labelledby з посиланням на видимий текст. aria-label використовуйте лише тоді, коли видимий підпис неможливий. Перевірте вибір варіантів, сортування та вибір країни.

Частину пояснення перекладено машинно, носій мови її ще не вичитав.

Приклади на вашому сайті

Знімок елемента на вашій сторінці, обведеного червоним: Випадний список не має підпису

Елемент: select

Код для розробника

<select>
                <option>135 × 200 cm</option>
                <option>155 × 220 cm</option>
                <option>200 × 220 cm</option>
            </select>

Серйозно 19 елементів

Текст важко прочитати через низький контраст

WCAG 2.2 1.4.3 (AA) Contrast (Minimum) · EN 301 549 9.1.4.3

Що це означає для ваших відвідувачів

Покупці зі слабшим зором, літні люди та всі, хто дивиться в телефон надворі, можуть не помітити ціни, умови доставки чи написи на кнопках. Через текст, який важко прочитати, покупці вагаються і кидають кошик.

Кого це стосується

люди зі слабким зором
літні покупці
люди з порушеннями кольорового зору
покупці зі смартфонів на яскравому світлі

Як виправити

Забезпечте коефіцієнт контрасту щонайменше 4.5:1 для звичайного тексту і 3:1 для великого (24px або 18.66px жирним). Перевірте плейсхолдери, елементи, що виглядають неактивними, текст на зображеннях і значки знижок. Виправляйте кольори в дизайн-токенах або CSS, а не для кожного елемента окремо.

Частину пояснення перекладено машинно, носій мови її ще не вичитав.

Сторінки, де трапляється

/×13
/product.html×4
/contact.html×2

Приклади на вашому сайті

Контраст 3,93 : 1, потрібно щонайменше 4,5 : 1 текст #8c8178 на #2b2622, 9.8pt (13px)

Елемент: .bar > span
Код для розробника
```
<span>· Returns within 30 days</span>
```
Контраст 3,93 : 1, потрібно щонайменше 4,5 : 1 текст #8c8178 на #2b2622, 9.8pt (13px)

Елемент: .bar > span
Код для розробника
```
<span>· Returns within 30 days</span>
```
Контраст 2,88 : 1, потрібно щонайменше 4,5 : 1 текст #ffffff на #c98a5b, 11.3pt (15px)

Елемент: button
Код для розробника
```
<button type="submit" class="btn">Send</button>
```

Інших елементів із цією проблемою: 16.

Серйозно 5 елементів

Зображення не мають текстового опису

WCAG 2.2 1.1.1 (A) Non-text Content · EN 301 549 9.1.1.1

Що це означає для ваших відвідувачів

Користувачі програм зчитування з екрана не чують нічого або чують назву файлу на кшталт «IMG_2041.jpg» замість товару, кольору чи пропозиції. Вони можуть пропустити важливі деталі й піти до магазину, який описує свої товари.

Кого це стосується

незрячі покупці
користувачі програм зчитування з екрана
люди з вимкненими зображеннями або повільним інтернетом

Як виправити

Додайте атрибут alt до кожного <img>. Коротко опишіть те, що важливо для покупки (товар, колір, ключову деталь). Для суто декоративних зображень ставте alt="", щоб їх пропускали. Не починайте з «зображення…» і не напихайте ключові слова.

Частину пояснення перекладено машинно, носій мови її ще не вичитав.

Приклади на вашому сайті

Елемент: img[src$="hero.svg"]
Код для розробника
```
<img src="/hero.svg" width="800" height="600">
```
Елемент: img[src$="duvet.svg"]
Код для розробника
```
<img src="/duvet.svg">
```
Елемент: img[src$="towel.svg"]
Код для розробника
```
<img src="/towel.svg">
```

Інших елементів із цією проблемою: 2.

Серйозно 3 елементи

Деякі посилання не повідомляють, куди ведуть

WCAG 2.2 2.4.4 (A) Link Purpose (In Context) · WCAG 2.2 4.1.2 (A) Name, Role, Value · EN 301 549 9.2.4.4, 9.4.1.2

Що це означає для ваших відвідувачів

Користувачі програм зчитування з екрана чують лише «посилання» і не розуміють, що воно відкриває: кошик, обліковий запис чи Instagram. Вони втрачають час або так і не знаходять кошик чи сторінку контактів.

Кого це стосується

незрячі покупці
користувачі програм зчитування з екрана
користувачі голосового керування

Як виправити

Дайте кожному посиланню текстову назву: видимий текст, alt-текст зображення всередині посилання або aria-label для посилань лише з іконкою. Назва має описувати, куди веде посилання, наприклад «Кошик, 2 товари». Декоративні іконки приховуйте за допомогою aria-hidden="true".

Частину пояснення перекладено машинно, носій мови її ще не вичитав.

Приклади на вашому сайті

Знімок елемента на вашій сторінці, обведеного червоним: Деякі посилання не повідомляють, куди ведуть

Елемент: .icons > a[href$="contact.html"]

Код для розробника

<a href="/contact.html"><svg viewBox="0 0 24 24" fill="none" stroke="#2b2622" stroke-width="2"><circle cx="12" cy="8" r="4"></circle><path d="M4 21c1.5-4 4.5-6 8-6s6.5 2 8 6"></path></svg></a>

Елемент: a[href$="contact.html"]:nth-child(1)

Код для розробника

<a href="/contact.html"><svg width="14" height="14" viewBox="0 0 24 24"><circle cx="12" cy="12" r="9" fill="#7a4e2d"></circle></svg></a>

Елемент: .social > a[href$="contact.html"]:nth-child(2)

Код для розробника

<a href="/contact.html"><svg width="14" height="14" viewBox="0 0 24 24"><rect x="4" y="4" width="16" height="16" rx="4" fill="#7a4e2d"></rect></svg></a>

Помірно 1 елемент

Посилання в тексті виглядають як звичайний текст

WCAG 2.2 1.4.1 (A) Use of Color · EN 301 549 9.1.4.1

Що це означає для ваших відвідувачів

Люди з порушеннями кольорового зору чи слабким зором можуть не помітити посилань на умови доставки, таблиці розмірів чи повернення й пропустити потрібну інформацію.

Кого це стосується

люди з порушеннями кольорового зору
люди зі слабким зором
літні покупці

Як виправити

Підкресліть посилання в основному тексті або додайте інше позначення, не повʼязане з кольором. Якщо ви покладаєтеся лише на колір, посилання має мати контраст щонайменше 3:1 з навколишнім текстом і помітно змінюватися при наведенні та фокусі.

Частину пояснення перекладено машинно, носій мови її ще не вичитав.

Приклади на вашому сайті

Елемент: .desc > a[href$="contact.html"]
Код для розробника
```
<a href="/contact.html">care guide</a>
```

Помірно 1 елемент

Деякі заголовки є лише жирним або великим текстом

WCAG 2.2 1.3.1 (A) Info and Relationships · EN 301 549 9.1.3.1

Що це означає для ваших відвідувачів

Незрячі покупці часто переходять від заголовка до заголовка, щоб знайти розділи «Опис», «Доставка» чи «Відгуки». Несправжні заголовки для такої навігації не існують, тож людині доводиться прослуховувати всю сторінку, і вона може пропустити важливу інформацію.

Кого це стосується

незрячі покупці
користувачі програм зчитування з екрана
люди, які переміщуються сторінкою клавіатурними скороченнями

Як виправити

Перетворіть текст, що слугує назвою розділу, на справжній заголовок (<h2>, <h3> тощо) у логічному порядку, а вигляд задавайте через CSS. У редакторах обирайте «Заголовок 2» чи «Заголовок 3» у меню форматування замість жирного або збільшеного тексту. Якщо текст не є заголовком, залиште його абзацом: axe позначає цю перевірку як експериментальну й іноді реагує на жирні вступні речення.

Частину пояснення перекладено машинно, носій мови її ще не вичитав.

Приклади на вашому сайті

Елемент: .price
Код для розробника
```
<p class="price">€129</p>
```

Помірно 1 елемент

Поля оформлення замовлення не заповнюються автоматично

WCAG 2.2 1.3.5 (AA) Identify Input Purpose · EN 301 549 9.1.3.5

Що це означає для ваших відвідувачів

Покупцям доводиться вводити адресу, телефон і email вручну. Найважче це людям із порушеннями моторики чи памʼяті, а через повільне оформлення магазин втрачає замовлення від усіх покупців.

Кого це стосується

люди з порушеннями моторики
люди з когнітивними порушеннями
покупці зі смартфонів
усі покупці під час оформлення замовлення

Як виправити

Використовуйте дійсні токени autocomplete зі специфікації HTML, які відповідають полю, наприклад "email", "given-name", "postal-code", "tel". Виправте опечатки та вигадані значення; "off" ставте лише там, де автозаповнення було б помилковим.

Частину пояснення перекладено машинно, носій мови її ще не вичитав.

Приклади на вашому сайті

Знімок елемента на вашій сторінці, обведеного червоним: Поля оформлення замовлення не заповнюються автоматично

Елемент: input[type="email"]

Код для розробника

<input type="email" placeholder="E-mail" autocomplete="e-mail-address">

Порівняно з попередньою перевіркою

Перевірка 5 жовтня 2026: проблем — 40

Новий: 19
Виправлено: 22
Залишилося: 17

Виправлено з попередньої перевірки

✓ Текст важко прочитати через низький контраст×7
✓ Зображення не мають текстового опису×4
✓ Сторінка не вказує, якою мовою вона написана×3
✓ Деякі кнопки не мають назви×2
✓ Деякі посилання не повідомляють, куди ведуть×2
✓ Поля форм не мають підписів×1
✓ Посилання в тексті виглядають як звичайний текст×1
✓ Деякі заголовки є лише жирним або великим текстом×1
✓ Випадний список не має підпису×1

Проблеми за перевірками

Проблеми за перевірками
Дата	Знайдено проблем
12 жовтня 2026	36
5 жовтня 2026	40

Перевірено сторінок

Сторінка	Проблеми
Linden & Loom – Linen and cotton for your homehttps://lindenloom.example/	23
Washed linen duvet cover – Linden & Loomhttps://lindenloom.example/product.html	10
Contact – Linden & Loomhttps://lindenloom.example/contact.html	3

Той самий звіт у PDF — для архіву або розробника.

Відкрити зразок PDF

Автоматична перевірка, не повний аудит. Не є юридичною консультацією. Автоматичні інструменти знаходять лише частину проблем доступності; перевірка з клавіатурою та екранним читачем однаково потрібна.