Herkes için UX kullanılabilirliği ve arayüzleri

1) Neden önemli

Yasal ve etik olarak: arayüz görsel, işitme, motor, bilişsel bozuklukları olan kişileri dışlamamalıdır.
İş etkisi: daha fazla kullanıcı, daha yüksek dönüşüm ve saklama, daha iyi SEO ve kod kalitesi.
Operasyonel olarak: Erişilebilirlik bir süreçtir, "rastgele bir düzeltme'değil.

2) Temel Bilgiler ve İlkeler (POUR)

Algılanabilir: kontrast, alternatif metinler, altyazılar.
Çalışabilir: klavyeden her şeye erişilebilir, görünür odak, animasyonları duraklat/durdur.
Anlama: öngörülebilir navigasyon, açık hatalar, basit formülasyonlar.
Sağlam: doğru HTML/ARIA semantiği, yardımcı teknolojilerle uyumluluk.

3) Semantik, başlıklar ve ARIA'lar

ARIA öncesi anlamsal işaretleme: '<button>', '<nav>', '<form>', '<tablo>' - amaca göre.
Üstbilgi hiyerarşisi: sayfa başına bir '<h1>', sonra mantıksal yapı '<h2>' - '<h3>'.
Yer işaretleri: '<header>', '<main>', '<aside>', '<footer>', '<nav>' - ekran okuyucularına yardımcı olur.
ARIA sadece gerektiğinde: 'rol', 'aria-label', 'aria-described', 'aria-expanded', 'aria-live'.
'Aria-invalid', 'aria-errormessage' aracılığıyla durumlar/hatalar.

4) Klavye ve odak yönetimi

Tam klavye kontrolü: 'Tab/Shift + Tab' - sipariş, 'Enter/Space' - etkinleştirme, 'Esc' - çıkış.
Görünür odak her zaman; Anahattı devre dışı bırakmayın.
Odak tuzakları: modallerde - döngüsel odak, kapattıktan sonra odağı kaynağa döndürür.
Gizli öğeler sekme sırasına girmemelidir ('display: none', 'aria-hidden =' true ').
Bağlantıları atla: "Ana içeriğe git" - sayfanın başında.

5) Renk, kontrast ve tipografi

Metin kontrastı: en az 4. Düz metin için 5:1 ve büyük metin için 3:1.
Sadece renge güvenmeyin: bir simge/desen/imza ile çoğaltın.
Tıklanabilir hedeflerin boyutu: en az 40-48 piksel, çevresinde yeterli alanlar.
Yazı tipleri: okunabilir yazı tipleri, satır satır 1. 4–1. 6, satır uzunluğu 45-90 karakter.

6) Hareket, animasyonlar ve epileptojenik flaş

Azaltılmış hareket bayrağını tercih eden sisteme saygı gösterin - basitleştirilmiş animasyonlar ekleyin/paralaks devre dışı bırakın.
Titremelerden kaçının> 3 kez/sn.
Tüm otomatik hareketlerde Duraklat/Durdur/Gizle olmalıdır.

7) Formlar, hatalar ve doğrulama

Etiketleri ve alanları açıkça bağlayın: '<label for ='id ">'.
Placeholder bir etiket değildir.
Alanın yanındaki hata mesajları ve en üstteki hata özetinde; 'aria-describedby' aracılığıyla bağlayın.
Giriş biçimini açıklayın, örnek, maske; Birimleri ve para birimini belirtin.
Bir hata oluştuğunda tamamlanmış alanları sıfırlamayın; Sorun alanına odaklanın.

html
<label for="email">Эл. почта</label>
<input id="email" name="email" type="email" aria-describedby="email-hint email-err">
<div id="email-hint" class="hint">Мы не рассылаем спам</div>
<div id="email-err" class="error" role="alert">Укажите адрес в формате name@example.com</div>

8) Bileşenler ve etkileşimli: desenler

Düğmeler vs bağlantılar: action = '<button>', jump = '<a>'.
Sekmeler/akordeonlar: navigasyon okları, 'aria-controls', 'aria-selected'.
Modals/dialogs: 'Role = "dialog"', 'aria-modal = "true"', focus trap, 'Esc' kapatır.
Tooltip/Popover: Klavye erişilebilirliği, zaman aşımları okumayı engellemez.
Sürükle ve Bırak: alternatifler - yukarı/aşağı düğmeleri, klavye okları taşımak; Olaylar sadece fare ile değil.

9) Medya: Video/Ses/Grafik

Video: altyazılar, transkript, alternatif ses açıklaması (AD) parça.
Ses: metin transkript.
Grafikler/diyagramlar: metin özeti ("önemli olan"), veri tablosu, eksenlerin açıklayıcı etiketleri.
Yaşam alanları: 'aria-live = "kibar "/" iddialı "'- çok sık" çığlık atmamaya "dikkat edin.

10) Tablolar ve listeler

11) i18n, yerel ayarlar ve RTL

Html kökündeki 'lang' niteliği; Yerel sayı/tarih/para birimi biçimleri.
RTL desteği (Arapça/İbranice): yansıtma simgeleri, gezinme sırası, imleçler.
Simgelere dikilmiş kelimelerden kaçının (metin çevrilebilir olmalıdır).
Basit formülasyonlar, jargon önlemek; Terimler sözlüğü.

12) Zaman, oturumlar, captchas ve alternatifler

Zaman aşımları - bir uyarı ve uzatma yeteneği ile.
CAPTCHA: alternatifleri tercih edin (sorular, görünmez bot analizörleri, posta/telefon ile onay); kullanırsanız - bir metin alternatifi ve sadece görsel değil.
Kimlik doğrulama: Parola yöneticileri için destek, "parolayı göster", WebAuthn.

13) Duyusal ve motor bozukluklar için erişilebilirlik

Hareketlerin tıklama/klavye eşdeğerleri olmalıdır.
Alternatif olmadan uzun tutma/çift musluk gerektirmez.
"İşaretçi iptali": Eylem, iptal etme şansı vermek için "basın" üzerinde değil, serbest bırakıldığında gerçekleştirilmelidir.

14) Devletler, bildirimler ve uyarılar

Dinamik iletiler için 'role = "status "/" alert "'kullanın.
Odağınızı yapışkan afişlerle kapatmayın.
Tost bildirimleri - odakta duraklama/gezinme ve klavyeden erişim ile.

15) Test planı (manuel ve otomatik)

• Tüm anahtar komut dosyalarını yalnızca klavye ile iletin.
• Her öğenin odak görünürlüğünü kontrol edin.
• %200'e kadar yakınlaştırın - arayüz yatay kaydırma olmadan işlevsel kalır.
• "Hareketi azaltmak" sistem modunu açın - animasyonlar müdahale etmez.
• Komut dosyasını bir ekran okuyucu (NVDA/VoiceOver) ile iletin, rollerin/etiketlerin/sıranın doğru olduğundan emin olun.

• Bileşen düzeyinde erişilebilirlik bağlantıları.
• Kontrastı, alternatif metinleri, başlık sırasını, ARIA geçerliliğini kontrol edin.
• Kritik ekranlar için semantik anlık görüntüler (rol ağacı).

16) Kullanılabilirlik Kalite Ölçümleri

A11y Kapsamı: Tamamlanmış kontrol listelerine sahip bileşenlerin oranı.
Yalnızca Klavye Geçiş Oranı: klavye tarafından geçilen komut dosyalarının yüzdesi.
Elementler Violations/1k kontrast.
SR Akış Süresi: Ekran okuyucu ile komut dosyası çalışma süresi.
Kullanıcı geri bildirimi: kullanılabilirlik, yanıt süresi ve düzeltmeler hakkında şikayetler.

17) Bileşen kontrol listesi

• Gereksiz ARIA olmadan doğru semantik/rol
• İmzalı etiketler, 'aria-' doğru
• Tam klavye kontrolü, görünür odak
• Metin/simge/kenarlık kontrastı normaldir
• Hatalar ve koşullar ekran okuyucu tarafından seslendirilir
• Respect prefers-reduced-motion
• Tıklanabilir alan boyutu ≥ 40-48 piksel
• Yerelleştirme ve RTL düzeni bozmaz

18) Anti-desenler

Rol/klavye olmadan "Div-düğmeleri".
Alternatif olmadan 'anahat: yok' odağını gizler.
Etiket yerine yer tutucu.
Sadece renk hataları.
Odaklama tuzağı ve 'Esc' olmadan modaller.
Sadece klavyesiz sürükle.
Devre dışı bırakma seçeneği olmadan uzun otomatik kaydırma/paralaks.

19) Roller ve Süreç

Komutta A11y-owner (Ürün/Tasarım/Dev).
Veri tanımı (DoD) kullanılabilirliği içerir.
Tasarım incelemesi: kontrastı, odağı, etiketleri kontrol etme.
Kod incelemesi: anlambilim/ARIA, klavye testi.
Düzenli denetimler ve iyileştirme planı.

20) Yineleme ile uygulama

• Semantik/başlıklar, kontrast, odak ve klavye, temel formlar ve hatalar.

• Modaller, sekmeler/akordeonlar, metin özeti içeren tablolar/grafikler, video altyazıları, azaltılmış animasyon.

• CI'daki ototestler, RTL/i18n, metrikler, düzenli denetimler, ekip eğitimi.

21) Şablonlar ve snippet'ler

html
<div role="dialog" aria-modal="true" aria-labelledby="dlg-title" aria-describedby="dlg-desc">
<h2 id="dlg-title">Подтвердите действие</h2>
<p id="dlg-desc">Эта операция необратима.</p>
<button>Отмена</button>
<button>Подтвердить</button>
</div>

html
<a class="skip-link" href="#main">Перейти к основному содержимому</a>
<main id="main">...</main>

css
@media (prefers-reduced-motion: reduce) {
{ animation-duration: 0.01ms!important; animation-iteration-count: 1!important; transition: none!important; }
}

22) Mini-SSS

Ayrı bir "görme engelli sürümüne" ihtiyacım var mı?
Hayır. Ayarları olan herkes için uyarlanabilir, erişilebilir bir sürüm.

Sadece kontrastı kontrol etmek yeterli mi?
Hayır. Kontrast sadece bölümdür. Klavye, odak, semantik, form hataları, medya vb. Gerekir.

ARIA her şeyi çözecek mi?
ARIA yanlış semantiği düzeltmeyecektir. Önce doğru etiketler, sonra ARIA iyileştirmeleri.

Sonuç

Kullanılabilirlik bir sistem disiplinidir: anlambilim - klavye/odak - kontrast/renk - formlar/hatalar - medya/programlar - i18n/RTL - test planı ve metrikler. Erişilebilirliği DoD ve ekip kültürünün bir parçası haline getirin - ürününüz gerçekten çok yönlü, güvenilir ve herkes için uygun olacaktır.