MicroTools

Alt-Text Linter

Знаходьте відсутній, надлишковий або неякісний alt-текст у вашому HTML миттєво.

Про інструмент Alt-Text Linter

Вставте HTML та перевірте всі атрибути alt зображень. Виявляє відсутній alt-текст, alt що починається з «зображення» або «фото», надто довгі описи, декоративні зображення без порожнього alt та alt що дублює суміжні підписи.

Як використовувати

  1. 1Вставте HTML з тегами <img> у поле введення.
  2. 2Інструмент перераховує кожне зображення з src, alt-текстом та виявленими проблемами.
  3. 3Проблеми кодуються кольором: червоний (критичний), жовтий (попередження), зелений (ок).
  4. 4Натисніть на будь-який рядок проблеми щоб побачити що виправити та приклад.
  5. 5Використовуйте підсумковий лічильник для відстеження прогресу.

Часті запитання

Що таке WCAG 1.1.1 (Нетекстовий контент)?
Кожен нетекстовий елемент (зображення, іконка, графік) повинен мати текстову альтернативу що описує його призначення. Декоративні зображення повинні мати порожній alt="" щоб скрін-рідери їх пропускали.
Чому «зображення кота» — поганий alt-текст?
Скрін-рідери вже оголошують «зображення» перед читанням alt-тексту, тому «зображення кота» стає «зображення, зображення кота». Просто скажіть що показано: «кіт сидить на підвіконні».
Яким повинен бути alt-текст за довжиною?
Лаконічні описи зазвичай менше 100 символів. Для складних зображень (графіки, діаграми) використовуйте короткий alt плюс довший опис у суміжному абзаці або підписі.
Що робити з SVG-іконками?
Декоративні SVG повинні мати aria-hidden="true". Інтерактивні SVG потребують aria-label або прихованого елемента title.

Інформація

Категорія
compliance
Використання
Необмежено

Схожі інструменти

Link Text Quality Checker

Знаходьте «натисніть тут», дублікати посилань та порожні анкери, що порушують WCAG 2.4.4.

Form Accessibility Validator

Валідуйте мітки, aria-атрибути, обов'язкові поля та повідомлення про помилки в HTML-формах.

Heading Structure Auditor

Знаходьте пропущені рівні, дублікати H1 та зламану ієрархію заголовків в HTML/Markdown.

Більше інструментів: compliance

WCAG Contrast Checker

Перевіряйте рівні AA/AAA контрастності для будь-яких двох кольорів. Отримайте виправлення миттєво.

Non-Text Contrast Checker

Перевіряйте контраст 3:1 для рамок, іконок, кілець фокусу та станів UI.

Heading Structure Auditor

Знаходьте пропущені рівні, дублікати H1 та зламану ієрархію заголовків в HTML/Markdown.

Link Text Quality Checker

Знаходьте «натисніть тут», дублікати посилань та порожні анкери, що порушують WCAG 2.4.4.