Стандарти · WCAG 2.2

SC 1.1.1 Ниво A WCAG 2.0

Нетекстово съдържание

Всяко изображение, икона, графика, аудиофайл и друг нетекстов компонент трябва да имат текстова алтернатива, която изпълнява същата цел — така потребителите на екранни четци, брайлови дисплеи и превключватели получават същата информация, каквато получават зрящите потребители.

Какво изисква критерият

Нетекстовото съдържание — изображения, икони, графики, анимации, CAPTCHA, вградено аудио, сетивни преживявания — трябва да носи текстова алтернатива, която предава същата информация или функция. Текстовата алтернатива е това, което помощната технология ще представи на потребителя, когато оригиналът не може да бъде възприет.

Четирите категории, които WCAG разграничава:

  • Информативни изображения се нуждаят от alt, описващ информацията, която предават.
  • Функционални изображения (връзки, бутони) се нуждаят от alt, описващ действието, а не визуалното представяне.
  • Декоративни изображения получават празен alt (alt="") — екранните четци ги прескачат.
  • Сложни изображения (графики, диаграми) се нуждаят от кратък alt и по-подробно описание наблизо в текста, в блок <details> или чрез aria-describedby.

Как да се постигне съответствие

  • Добавете атрибут alt към всеки <img>. Празен, ако изображението е декоративно; описателен, ако е информативно.
  • Осигурете достъпно наименование за всеки бутон само с икона чрез aria-label, видим текст или SVG <title>.
  • За графики и инфографики напишете кратък alt от едно изречение и представете данните в достъпна таблица непосредствено преди или след фигурата.
  • За CAPTCHA предоставете поне една невизуална алтернатива (аудио CAPTCHA, потвърждение по имейл, ограничаване на скоростта на сървъра).
  • За аудио, съдържащо информация (преглед на подкаст, звук на интерфейс), предоставете текстов еквивалент.

Чести грешки

  • alt="image" или alt="picture of a person" — описват носителя, а не съдържанието.
  • Бутони само с икона без достъпно наименование (<button><svg /></button>). Екранните четци обявяват „бутон” без нищо друго.
  • Декоративни изображения без alt="" — екранните четци прибягват до четене на името на файла.
  • <img> тагове за графики с заглавието на графиката като alt, а основните данни са недостъпни на страницата.
  • CSS фонови изображения, носещи смисъл, без текстов етикет в маркупа.

Защо е важно

Това е основата на достъпността за екранните четци. Сайт, който не отговаря на 1.1.1, е неизползваем за незрящи потребители — всяко изображение се превръща в задънена улица. Освен това това е най-честата грешка, откривана от axe и Lighthouse, тъй като автоматизираните инструменти могат да маркират липсващи alt атрибути, но не могат да преценят дали наличният alt е смислен.