Перейти до змісту

Проведіть аудит своїх веб-сайтів на відповідність WCAG вже сьогодні за допомогою Eye-Able Audit

На цьому веб-сайті наведено типові помилки та способи їх виявлення за допомогою Eye-Able Audit

Перевірте всі помилки на панелі інструментів Eye-Able Audit у правій частині екрана!

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

Автоматичне тестування веб-сайтів на відповідність стандартам доступності

Цифрова доступність сприяє розвитку вашого бізнесу

З метою дотримання законодавчих вимог.

Проскануйте весь свій домен за допомогою Eye-Able Report

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

На цій сторінці наведено лише частину помилок, які може виявити Eye-Able Audit. Ознайомтеся з усіма правилами в нашому огляді!

Відсутній альтернативний текст

31,3 % банерів на головній сторінці не мають альтернативного тексту. Зображенням необхідний альтернативний текст, щоб користувачі екранних зчитувачів могли зрозуміти їхній зміст та призначення.

Текст із слабким контрастом

Низький контраст — це найпоширеніша помилка з доступності на багатьох веб-сайтах. Переконайтеся, що всі текстові елементи мають достатній колірний контраст між текстом на передньому плані та фоновим кольором за ним. Мінімальний контраст залежить від розміру тексту і становить 3:1 або 4,5:1 для тексту великого розміру.

У мене дуже поганий контраст

Ієрархія заголовків


Користувачі з інвалідністю, особливо з порушеннями зору, часто використовують допоміжні технології, такі як програми для читання з екрану, для навігації веб-сайтами. Щоб полегшити цей процес, для забезпечення зручної навігації надзвичайно важливо дотримуватися чіткої та логічної ієрархії заголовків (H1–H6) на вашому сайті.

Порожні заголовки також можуть вводити в оману, тому їх слід уникати.

Найпоширеніші проблеми

Текст відсутнього посилання

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

Неправильний синтаксис таблиці

Мій чудовий стіл
Рядок 1У мене немає заголовка…

Таблиці повинні мати правильну структуру, наприклад, заголовки для всіх стовпців, щоб їх можна було зрозуміти за допомогою програм для читання з екрану. Eye-Able перевіряє наявність типових помилок, які ускладнюють доступність ваших заголовків.

Атрібути Aria

Хоча атрибути aria дуже корисні для підвищення доступності веб-інтерфейсу, необхідно дотримуватися правильного синтаксису та ролей.

Кнопки

Елементу A потрібно присвоїти зрозумілу назву, щоб програми для читання з екрану могли відобразити його призначення.

Виберіть поля

Елементи «Вибрати» часто використовуються у формах і також потребують альтернативного тексту.

Недійсні поля форми

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

Посилання без доступної назви

Кожен елемент посилання повинен мати доступне ім’я або текст, що описує його призначення. Це посилання — недійсне та порожнє.

Об’єкти без доступних імен

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

Елемент списку поза списком

Елемент списку не може знаходитися поза списком. Він завжди є частиною впорядкованого списку <ol> або невпорядкованого списку <ul>.

  • Пункт 1
  • Пункт 2
  • Атрибути AccessKey з подвійним призначенням

    Атрибут `accesskey` позначає елемент, до якого можна отримати доступ за допомогою вказаного комбінації клавіш. Вказана комбінація клавіш має бути унікальною і не повинна використовуватися для жодного іншого елемента на поточній сторінці.

    Розмір шрифту замалий

    Розмір шрифту не повинен бути меншим за 9 пікселів.

    Розмір шрифту цього тексту становить 7 пікселів, його слід збільшити

    Посилання, яке не відрізняється від звичайного тексту

    Вбудовані посилання мають відрізнятися від навколишнього тексту не лише за кольором. Посилання можна виділити, наприклад, підкресливши текст або додавши облямівку. Це посилання є поганим прикладом.

    Весь цей фрагмент тексту виділено курсивом

    Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet.

    Міжрядковий інтервал у абзацах становить не менше 1,5

    Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet.

    Весь розділ тексту відображається з вирівнюванням по обох краях

    Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet. Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum.

    Видиме ім'я не входить до складу доступного імені

    У наведеному нижче посиланні видимий текст відрізняється від доступної назви. Посилання можна знайти тут. Це особливо важливо для користувачів, які використовують голосовий ввід для керування веб-сайтом. Інакше голосовий ввід не можна буде правильно розпізнати.