Пустой alt и скрытое декоративное изображение

Для декоративных изображений правильное решение — пустой alt: напишите alt, знак равенства и две кавычки без содержимого между ними.

Пустой alt помечает изображение как декоративное, поэтому программы чтения с экрана полностью его пропускают и никогда не объявляют.

Пустой alt и отсутствующий alt — совершенно разные вещи. Пустой означает намеренно пропустить изображение, а отсутствующий — что автор забыл его добавить.

Если alt полностью отсутствует, многие программы чтения с экрана произносят имя файла, например «IMG подчёркивание 4823 точка jpg».

Правило простое: каждому img нужен атрибут alt. Вопрос только в том, будет ли он пустым или заполненным.

Визуальные отступы, линии и разделители не несут смысла, поэтому это классические случаи для пустого alt.

Не ставьте пробел между кавычками. Настоящий пустой alt не содержит ничего, даже одного пробельного символа.

Если изображение действительно декоративное, часто самым чистым решением будет фоновое изображение background в CSS, которое дерево доступности полностью игнорирует.

Декоративную графику также можно скрыть, установив aria-hidden в true. Это часто применяют для встроенных значков SVG рядом с видимым текстом.

Будьте осторожны: никогда не добавляйте пустой alt или aria-hidden к информативному изображению, иначе вы незаметно удалите его для некоторых пользователей.

Если декоративное изображение находится внутри ссылки, где-то всё равно должен быть доступный текст ссылки, иначе она останется без названия.

Отлично! Пустой alt намеренно скрывает декоративные элементы, отсутствующий alt — это ошибка, а aria-hidden и фоновые изображения CSS также не дают украшениям мешать.