Ошибка 1. Картинка без размеров → сдвиг макета
Как ломается: пока файл грузится, под ним пусто; когда докачался — текст резко прыгает вниз (пользователь промахивается по кнопке).
❌ как ломается
картинка ещё грузится
↓ текст подскочит вверх
✅ как правильно
место под картинку занято
текст стоит на месте
<!-- ❌ как ломается -->
<img src="hero.jpg" alt="Закат">
<!-- ✅ как правильно -->
<img src="hero.jpg" alt="Закат" width="1200" height="800">Ошибка 2. Пустой или бессмысленный alt
Как ломается: скринридер у значимой картинки без alt читает имя файла
(«img_2025_final.jpg»). Текст вроде «картинка» тоже бесполезен.
<!-- ❌ как ломается -->
<img src="chart.png"> <!-- читается имя файла -->
<img src="chart.png" alt="картинка"> <!-- бессмысленно -->
<!-- ✅ как правильно -->
<img src="chart.png" alt="Рост продаж на 30% за квартал">
<!-- ✅ декоративная картинка — пустой alt, но атрибут есть -->
<img src="divider.svg" alt="">Ошибка 3. Видео без controls и fallback
Как ломается: <video> без controls — нет кнопок play/пауза;
без текста после source — старый браузер покажет пустоту.
<!-- ❌ как ломается -->
<video src="intro.mp4"></video>
<!-- ✅ как правильно -->
<video controls width="640">
<source src="intro.webm" type="video/webm">
<source src="intro.mp4" type="video/mp4">
Ваш браузер не поддерживает встроенное видео.
</video>Правило: любое медиа должно оставаться понятным,
даже если файл не загрузился. Слова (alt, figcaption, fallback) — это страховка картинки.