👨‍🦳 Почему <div role="button"> — это не кнопка

Частая картина в коде:

<div class="btn" role="button">Нажми меня</div>

Кажется, что role="button" превращает <div> в кнопку. Но это не так.

🔤 Ключевой инсайт:

role="button" только сообщает скринридерам «это кнопка», но НЕ добавляет поведение кнопки.

У такого "div-button" по-прежнему нет:

- Фокуса с клавиатуры (Tab)
- Активации по Space/Enter
- Состояния disabled
- Доступного имени

Всё это нужно программировать вручную через JS.

⏺ Есть способ проще:

button {
  all: unset;
}

Одна строка CSS сбрасывает стили браузера — и можно стилизовать <button> как угодно, сохраняя всю встроенную доступность.

Семантический HTML — это не только про «правильность». Это способ избежать лишней работы.

📎 Читать подробнее

🐸 Библиотека фронтендера

#read_watch

⭐️ Шпаргалка по Nuxt

Всё, что нужно Vue-разработчику в одной шпаргалке:

— Pages & Layouts
— useFetch / useAsyncData
— SSR / SSG / Hybrid
— useState / useRoute / useHead
— Оптимизация и best practices

🔤 Актуально для Nuxt 3.x и Nuxt 4.

🐸 Библиотека фронтендера

#readme

🐸 Библиотека фронтендера

#pixel_pause