Nega Developerlar <div> ni Button Qilib Ishlatadi?

Har bir dasturchi bu holatni boshdan kechirgan. Component kutubxona qurayapsiz, dizaynda button kerak. Oddiy button emas — maxsus button. U_CUSTOM styling, hover effekt, press paytida siljigan gradient talab qilinadi. div oladi, CSS yozadi, tayyor.

Figma'da chiroyli ko'rinadi. Demo'da ishlaydi. Keyin real foydalanuvchi interfeys bo'ylab Tab bosib harakatlanadi, formani keyboard orqali yuboradi, yoki screen reader bilan saytda harakatlanadi — va hammasi ishdan chiqadi.

Muammo CSS'da emas. Muammo shunda: siz div'ga uning uchun mo'ljallanmagan vazifani topshirdingiz.

Div Button Bo'lishni Orzu Qildi

Odatiy holat shunday bo'ladi: ma'lum ko'rinishdagi button kerak. div yaratasiz, class="btn" qo'shasiz, dizaynga moslashtirasiz. Ko'rinishi zo'r. Keyin button harakat qilishi kerak.

Shunday qilib click handler qo'shasiz. So'ngra hover state. Keyin keyboard foydalanuvchilar uchun focus ring. Space va Enter ishlamayotganini tushunasiz — keydown listenerlar qo'shasiz. Button ba'zan o'chirilishi kerak — .disabled class qo'shasiz, barcha to'g'ri interactionlarni bloklashi umidida.

Qayerdadir role="button" va tabindex="0" qo'shasiz — accessibility toolar yashirmasligi uchun.

Tabriklayman. Siz taxminan 200 qator JavaScript talab qiladigan button shaklidagi obyekt yaratdingiz. Holbuki browser sizga bu ishlarni bepul berardi.

Mana shuni "noto'g'ri arxitektura tanlovining ijara to'lovi" deb ataymiz. Har bir workaround qator — aslida noto'g'ri element tanlaganingiz uchun to'lanadigan foiz.

Ko'rinmas Shartnoma

Native HTML elementlar haqida biladigan narsa bor: ular butun bir interaction shartnomasi bilan birga keladi. Ko'pchilik bu haqda o'ylab ko'rmaydi ham — toki u yo'qolganda.

Haqiqiy <button> ishlatsangiz, avtomatik ravishda olasiz:

• Keyboard handling — Enter va Space foydalanuvchilar kutganidek ishlaydi
• Focus management — Tab tartibiga tabiiy ravishda kiradi, programmatic ravishda focus qilish mumkin
• Disabled state — Barcha interactionlarni bloklaydi, focus bo'lmaydi, disabled deb e'lon qilinadi
• Form ishtiroki — Formani yuboradi, form validation'ga hurmat qiladi, form.reset()'da ishtirok etadi
• Accessibility semantics — Screen readerlar qo'shimcha ARIA kerak bo'lmasdan button deb e'lon qiladi
• Platform qoidalari — Foydalanuvchilar buttonlar qanday ishlashini bilishadi, chunki buttonlar hamma joyda bir xil ishlaydi

Button ko'rinishidagi div bilan esa... faqat CSS olasiz. Qolgan hamma narsa sizning zimangizda. Va yashirin sir: qanchalik puxta qilmasangiz ham, sizning implementatsiyangiz browser taqdim etganidan yomonroq bo'ladi. Browserlarda turli platformalar, edge caselar va assistive texnologiyalar uchun bu xatti-harakatlarni optimizatsiya qiladigan muhandislar jamoasi bor. Sizning custom button'ingiz esa faqat sizga tayanadi.

Asosiy Savol "Styling Qila olamanmi?" Emas

Mana shu yerda dizayn-va-engineering hamkorligi either shidiradi yoki technical debt yaratadi. Developerlar "semantic HTML" ni "browserning xunuk defaultlarini qabul qilish" sifatida tushunadi. Bu umuman biz gaplashayotgan narsa emas.

Savol "buni custom ko'rinishda yaratishim mumkinmi?" emas. Albatta mumkin. Savol: "qaysi native xatti-harakatlar styling'dan keyin ham saqlanishi kerak?"

appearance: none bilan barcha default stillarni olib tashlashingiz mumkin. Gradient, shadow, animatsiya, custom shrift — dizayn nimani talab qilsa shuni qo'shasiz. Browser'ning interaction shartnomasi buttonning ko'rinishiga qiziqmaydi.

Ammo div bilan browser avtomatik beradigan narsalarni osongina takrorlay olmaysiz. Shuning uchun jangni to'g'ri tanlang: engineering kuchingizni mahsulotingizni o'ziga xos qiladigan narsaga sarflang, buttonlarni qayta ixtiro qilishga emas.

Real Veb Uchun Qurish

Foydalanuvchilaringiz mahsulotni vakuumda ishlatmaydi. Ular keyboard'da qo'llari bilan maydonlar orasida Tab bosadi. Saytda harakatlanish uchun voice control ishlatadi. Ekrani 300% ga kattalashtiradi, chunki ularga shu qulay. Turli browser, turli operatsion sistema, turli assistive texnologiyalar bor.

Veb platformasi semantic HTML bilan katta bosqich oldindan beradi. Native elementlar default ravishda accessible, default ravishda keyboard-navigable, default ravishda cross-platform. Shu infratuzilmani qarshi olsangiz — o'zingizga ko'proq ish yaratmaysiz, balki real foydalanuvchilar uchun nozik tarzda ishdan chiqadigan componentlar yaratasiz.

Keyingi safar role="button" bilan div'ga yetib kelayotganingizda, o'zingizdan so'rang: menhaqiqatan ham custom implementatsiya kerak bo'lgan narsani qurayapmanmi, yoki <button> teginishdan qo'rqayapmanmi? Chunki zerikarli yechim odatda to'g'ri yechim bo'ladi. Va "browser to'g'ri ishletadi" — bu cheklov emas, balki xususiyat.

Semantic web — qoidalarga rioya qilish haqida emas. Bu — ish uchun yaratilgan asbobni ishlatish va kuchingizni haqiqatan farq qiladigan joyga sarflash haqida.