Унаследованная боковая колонка
Что делаем: подключаем боковую колонку, которую оставил прошлый разработчик. Выглядит она нормально, но почти каждая строчка размечена неверно. Исправлять будем в следующем уроке, а сейчас учимся находить ошибки.
Вторая часть курса про сложные случаи. Здесь мало узнать, какой тег что значит: нужно уметь прочитать чужую разметку и понять, где она врёт.
Найдите восемь ошибок
Колонка подсвечена в редакторе. Прочитайте её и сравните с таблицей:
| Что в коде | В чём проблема |
|---|---|
div class="side" | Блок сбоку от основного текста, но ориентиром не назван |
h4 у «Популярного» | Перескочили сразу с уровня 1 на 4 ради размера шрифта |
div class="side-item" | Это список ссылок, а разметки списка нет |
| Пустой абзац как отступ: отступы делает CSS | |
| Это заголовок раздела, а не просто жирный текст | |
<br /> между строк | Абзацы разделены переводами строки |
<a ... onclick> | Ссылка, которая выполняет действие, а никуда не ведёт |
div class="btn" onclick | Кнопка из div: не фокусируется, не нажимается пробелом |
Почему это не просто придирки
Каждая из этих ошибок ломает что-то конкретное. div с onclick не получает фокус с клавиатуры. Перескок уровней заголовков сбивает оглавление страницы. Пустые абзацы диктор читает как «пробел». А i без текста, добавленный ради иконки, пока безвреден, но подскажет, что с иконками тоже надо разобраться.
Первое правило ARIA гласит: если есть встроенный элемент с нужным смыслом, берите его, а не оживляйте div атрибутами. Из этого правила мы и исходим.
По спецификации
- Элемент div: используйте его, только когда ни один другой элемент не подходит.
- Элемент b: оформление без дополнительной важности; заголовок им не заменить.
- Элемент br: разрыв строки, который сам является содержимым (стихи, адрес), а не разделитель абзацев.
- Элемент p: абзац; отступы между абзацами задаёт CSS.
- Элемент button: нативная кнопка: фокус, Enter и пробел работают без кода.
- Первое правило ARIA: предпочитайте нативный элемент с нужной семантикой.