Kirish
Accessibility (kirish imkoniyati) — veb-sahifani imkoniyati cheklangan foydalanuvchilar uchun ham to’liq foydalanish mumkin bo’lishini ta’minlash. Bu nafaqat ko’zi ojizlar, balki har qanday foydalanuvchi uchun qulaylik yaratadi.
1. Semantik HTML va ARIA
Semantik HTML elementlari yordamida ko’plab accessibility muammolarini avtomatik hal qilish mumkin. Lekin ba’zi hollarda ARIA atributlari yordamga keladi.
<!-- Yaxshi: Semantik HTML -->
<nav aria-label="Asosiy navigatsiya">
<ul>
<li><a href="/">Bosh sahifa</a></li>
<li><a href="/about">Men haqimda</a></li>
</ul>
</nav>
<!-- Yomon: faqat div va span -->
<div class="nav">
<span>Bosh sahifa</span>
<span>Men haqimda</span>
</div>2. Klaviatura orqali boshqarish
Har bir interaktiv element (button, link, input) klaviatura orqali boshqarilishi kerak. Maxsus elementlar uchun tabindex va ARIA atributlaridan foydalaning.
<!-- To'g'ri: button va tabindex -->
<button>Saqlash</button>
<div tabindex="0" role="button" aria-pressed="false">Maxsus tugma</div>3. Ekran o’quvchilar uchun matn
aria-label, aria-labelledby, aria-describedby atributlari yordamida ko’rinmaydigan, lekin ekran o’quvchilar uchun muhim bo’lgan matnlarni qo’shing.
<button aria-label="Menyuni ochish">
<svg><!-- icon --></svg>
</button>4. Rasm va media uchun alt va caption
<img src="/img/diagram.png" alt="Diagramma: HTML accessibility tuzilmasi" />
<figure>
<img src="/img/example.png" alt="Kod namunasi" />
<figcaption>Kod namunasi uchun rasm</figcaption>
</figure>5. Rang kontrasti va rangga bog’liq bo’lmaslik
Matn va fon o’rtasida yetarli kontrast bo’lishi kerak. Rangga bog’liq bo’lmagan indikatorlar ham qo’shing.
/* Yaxshi kontrast */
body {
color: #222;
background: #fff;
}6. Formalar va label’lar
Har bir input uchun <label> bo’lishi shart.
<label for="email">Email manzilingiz</label>
<input type="email" id="email" name="email" required />