Образец

Образец отчёта: что получает ваш клиент

Это полный автоматический отчёт о 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

Что это значит для ваших посетителей

Пользователи скринридеров слышат только «комбинированный список» и не знают, выбирается ли размер, цвет, количество или страна. Это может помешать выбрать вариант товара или оформить заказ.

Кого это касается

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

Как исправить

Свяжите с каждым <select> видимый <label for> или используйте 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

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