UX əlçatanlığı və hər kəs üçün interfeyslər

1) Niyə vacibdir

Hüquqi və etik: interfeys görmə, eşitmə, motor, bilişsel xüsusiyyətləri olan insanları istisna etməməlidir.
Biznes effekti: daha çox istifadəçi, daha yüksək dönüşüm və saxlama, daha yaxşı SEO və kod keyfiyyəti.
Əməliyyat: əlçatanlıq «təsadüfi fiks» deyil, prosesdir.

2) Əsaslar və prinsiplər (POUR)

Perceivable (qavrama): kontrast, mətnlər alternativlər, altyazılar.
Operable (Management): hər şey klaviatura, görünən fokus, fasilə/dayandırılması animasiya ilə mövcuddur.
Understandable: proqnozlaşdırıla bilən naviqasiya, aydın səhvlər, sadə ifadələr.
Robust (Etibarlılıq): düzgün HTML/ARIA semantikası, köməkçi texnologiyalarla uyğunluq.

3) Semantika, başlıqlar və ARIA

ARIA-dan əvvəl semantik işarələmə: '<button>', '<nav>', '<form>', '<table>' - təyinatına görə.
Başlıq hiyerarxiyası: bir '<h1>' səhifəyə, sonra məntiqi quruluş '<h2>' - '<h3>'.
Landmarks: '<header>', '<main>', '<aside>', '<footer>', '<nav>' - ekran printerlərinə kömək edir.
ARIA yalnız lazım olduqda: 'role', 'aria-label', 'aria-describedby', 'aria-expanded', 'aria-live'.
'aria-invalid', 'aria-errormessage' vasitəsilə hallar/səhvlər.

4) Klaviatura və fokus menecmenti

Klaviaturanın tam idarə olunması: 'Tab/Shift + Tab' - sifariş, 'Enter/Space' - aktivləşdirmək, 'Esc' - çıxış.
Həmişə görünən fokus; outline söndürmək deyil.
Fokus tələləri: modalkalarda - tsiklik fokus, fokusun bağlandıqdan sonra mənbəyə qaytarılması.
Gizli elementlər tab sırasına düşməməlidir (' display: none', 'aria-hidden =» true»').
Skip linklər: «Əsas məzmuna keçid» - səhifənin əvvəlində.

5) Rəng, kontrast və mətbəə

Mətn kontrastı: ən azı 4. 5:1 adi mətn üçün və 3:1 böyük üçün.
Yalnız rəngə güvənməyin: ikona/nümunə/imza ilə təkrarlayın.
Tıklanabilir hədəflərin ölçüsü: minimum 40-48 px, ətrafda kifayət qədər sahələr.
Şriftlər: oxunan qulaqlıqlar, sətirlərarası 1. 4–1. 6, sətir uzunluğu 45-90 işarədir.

6) Hərəkət, animasiya və epileptogen flash

Prefers-reduced-motion sistem bayrağına hörmət edin - sadələşdirilmiş animasiyalar əlavə edin/paralaksı söndürün.
Titrəmədən çəkinin> 3 dəfə/san.
Bütün avtomobil hərəkətləri Pause/Stop/Hide olmalıdır.

7) Formalar, səhvlər və validasiya

Etiketləri və sahələri açıq şəkildə bağlayın: '<label for = «id»>'.
Playsholder etiket deyil.
Sahənin yanında və yuxarıdakı səhv hesabatında səhv mesajları; 'aria-describedby' vasitəsilə bağlayın.
Giriş formatını, nümunəni, maskanı izah edin; vahidləri və valyutanı göstərin.
Səhv olduqda doldurulmuş sahələri atmayın; problem sahəsində diqqət saxlayı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) Komponentlər və interaktiv: nümunələr

Keçid vs düymələri: hərəkət = '<button>', keçid = '<a>'.
Tablar/akkordeonlar: naviqasiya oxları, 'aria-controls', 'aria-selected'.
Modallar/dialoqlar: 'role = «dialog', 'aria-modal =» true', fokus tələsi, 'Esc' bağlayır.
Tooltip/Popover: klaviatura əlçatanlığı, vaxtlar oxumağa mane olmur.
Drag & Drop: alternativlər - «yuxarı/aşağı hərəkət» düymələri, klaviatura oxları; hadisələr yalnız siçan deyil.

9) Media: video/audio/qrafika

Video: altyazılar, transkript (transcript), alternativ səs təsviri (AD).
Audio: mətn deşifrə.
Qrafiklər/diaqramlar: mətn CV («nə vacibdir»), məlumat cədvəli, oxların təsviri imzaları.
Canlı sahələr: 'aria-live = "polite "/" assertive"' - çox tez-tez "qışqırmamaq üçün diqqətlə.

10) Cədvəllər və siyahılar

Dondurulmuş sütunlar/sətirlər - tab qaydasını pozmayın.
Böyük cədvəllər - səhifə; həmişə ixrac təmin edin (CSV/JSON).

11) i18n, lokallar və RTL

html kökündə 'lang' atributu; yerli ədəd/tarix/valyuta formatları.
RTL dəstəyi (Ərəb/İbrani): nişanlar güzgü, naviqasiya qaydası, kursor.
İkonalara tikilmiş sözlərdən çəkinin (mətn tərcümə olunmalıdır).
Sadə ifadələr, jarqon qarşısını almaq; terminlər lüğəti.

12) Vaxt, sessiyalar, kapçalar və alternativlər

Vaxtlar - xəbərdarlıq və uzatma imkanı ilə.
CAPTCHA: alternativlərə üstünlük verin (suallar, görünməz bot analizatorları, poçt/telefon təsdiqi); əgər istifadə edirsinizsə - mətn alternativi və yalnız vizual deyil.
Autentifikasiya: parol menecerlərinə dəstək, «parolu göstər», WebAuthn.

13) Sensor və motor pozğunluqları üçün əlçatanlıq

Jestlər klik/klaviatura ekvivalentləri olmalıdır.
Alternativ olmadan uzun müddət saxlama/ikiqat tapa tələb etməyin.
«Pointer cancellation»: hərəkət ləğv etmək üçün şans vermək üçün «basın» deyil, tətil etmək lazımdır.

14) Hallar, bildirişlər və alertlər

Dinamik mesajlar üçün 'role =' status '/' alert 'istifadə edin.
Fokusu «yapışqan» bannerlərlə örtməyin.
Toast bildirişləri -/hover fokusu və klaviatura çıxışı ilə fasilə ilə.

15) Test planı (əl və avtomatik)

• Bütün əsas ssenariləri yalnız klaviatura ilə keçin.
• Hər bir elementdə fokusun görünürlüyünü yoxlayın.
• 200% -ə qədər artırın - interfeys üfüqi skroll olmadan funksional olaraq qalır.
• «Hərəkətin azaldılması» sistem rejimini işə salın - animasiyalar mane olmur.
• Screenrider (NVDA/VoiceOver) ilə ssenari keçin, düzgün rollar/nişanlar/sifariş əmin olun.

• Komponentlər səviyyəsində mövcudluq lintləri.
• Kontrastın, alternativ mətnlərin, başlıq sırasının, ARIA etibarlılığının yoxlanılması.
• Kritik ekranlar üçün semantika snapshot (role tree).

16) Əlçatanlıq keyfiyyətinin metrikası

A11y Coverage: keçilmiş yoxlama vərəqləri ilə komponentlərin payı.
Keyboard-only Pass Rate: klaviatura tərəfindən keçən ssenarilərin faizi.
Contrast Violations/1k elementləri.
SR Flow Time: screenrider ilə ssenarinin keçmə vaxtı.
User-feedback: əlçatanlıq, reaksiya vaxtı və düzəlişlər haqqında şikayətlər.

17) Komponentin çek siyahısı

• Lazımsız ARIA olmadan düzgün semantika/rol
• İmzalanan etiketlər, 'aria-' düzdür
• Tam klaviatura nəzarət, görünür fokus
• Mətn kontrastı/nişanlar/sərhədlər normal
• Səhvlər və vəziyyətlər bir screenrider tərəfindən səsləndirilir
• Hörmət prefers-reduced-motion
• Clickable sahəsi ölçüsü ≥ 40-48 px
• Lokalizasiya və RTL tərtibatı pozmur

18) Anti-nümunələr

«Diva düymələri» heç bir rol/klaviatura.
Alternativ olmadan 'outline: none' fokusunu gizlətmək.
Pleysholder əvəzinə label.
Yalnız rəng səhvlər.
Fokus tələsi və 'Esc' olmadan Modales.
Drag-only klaviatura olmadan.
Seçimi olmadan uzun avtomobil döngələri/paralaks.

19) Rollar və proses

Komandada A11y sahibi (Product/Design/Dev).
Definishn-of-dan (DoD) mövcudluğu daxildir.
Dizayn review: kontrast, fokus, etiket yoxlama.
Kod review: semantika/ARIA, klaviatura testi.
Müntəzəm auditlər və təkmilləşdirmə planı.

20) İterasiyalar üzrə tətbiq

• Semantika/başlıqlar, kontrast, fokus və klaviatura, əsas formalar və səhvlər.

• Modallar, tablar/akkordeonlar, mətn CV ilə cədvəllər/qrafiklər, video altyazılar, azaldılmış animasiya.

• CI, RTL/i18n, metrika, müntəzəm auditlər, komanda təlimi.

21) Şablonlar və snippetlər

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-FAQ

Əlillər üçün ayrıca «versiya» lazımdır?
Yox. Parametrləri olan hər kəs üçün bir adaptiv, mövcud versiya.

Yalnız kontrastı yoxlamaq kifayətdirmi?
Yox. Kontrast yalnız bir hissədir. Klaviatura, fokus, semantika, forma səhvləri, media və s.

ARIA hər şeyi həll edəcək?
ARIA yanlış semantikanı düzəltməyəcək. Əvvəlcə düzgün etiketlər, sonra ARIA dəqiqləşdirmələri.

Yekun

Əlçatanlıq sistem intizamıdır: semantika → klaviatura/fokus → kontrast/rəng → forma/səhv → media/qrafika → i18n/RTL → test planı və metrika. DoD və mədəniyyət komandasının bir hissəsi kimi mövcud olun - və məhsul həqiqətən universal, etibarlı və hər kəs üçün rahat olacaq.