Карточки статей
Что делаем: добавляем блок «Похожие статьи». Каждая карточка — article с заголовком h3, датой в time и ссылкой, а все карточки собраны в список ul.
Типичная ошибка: карточка из div
Так часто пишут карточки:
<div class="card" onclick="location.href='/cold'"><div class="card-title">Холодное заваривание</div><div>20 октября</div><div>Как получить мягкий кофе…</div></div>
В плохом варианте нет ссылки (её не откроешь в новой вкладке и не найдёшь клавиатурой), нет заголовка в оглавлении и нет списка, в котором диктор скажет «пункт 1 из 2».
Как сделать кликабельной всю карточку
Оборачивать карточку целиком в a нельзя: диктор прочитает в названии ссылки весь текст карточки. Правильно: ссылка стоит только на заголовке, а область нажатия расширяется в CSS (мы сделаем это в последнем уроке части).
Уровни заголовков
Страница уже содержит h1 статьи и h2 разделов. Карточки внутри раздела «Похожие статьи» получают h3: уровень на единицу ниже родительского раздела, без пропусков.
По спецификации
- Элемент article: карточка новости или статьи — самостоятельная композиция.
- Заголовки h1–h6: уровень задаёт иерархию, пропускать уровни не стоит.
- Элемент a: ссылка с href; её текст должен описывать цель.
- WCAG 2.2: назначение ссылки: критерий 2.4.4: из текста ссылки и контекста должно быть понятно, куда она ведёт.