UX elýeterliligi we hemmeler üçin interfeýsler

1) Näme üçin bu möhüm?

Hukuk we ahlak taýdan: interfeýs görüş, eşidiş, motor, aň-bilim taýdan kemçilikli adamlary aradan aýyrmaly däldir.
Iş täsiri: has köp ulanyjy, has ýokary öwrülişik we saklamak, has gowy SEO we kod hili.
Operasiýa: elýeterlilik "tötänleýin fiks" däl-de, prosesdir.

2) Esaslar we ýörelgeler (POUR)

Perceivable: kontrast, alternatiw tekstler, subtitrler.
Operable: Hemme zat klawiatura, görünýän fokus, arakesme/animasiýa duralgasyndan elýeterlidir.
"Understandable": öňünden aýdyp boljak nawigasiýa, aç-açan ýalňyşlyklar, ýönekeý sözlemler.
Robust (Ygtybarlylyk): HTML/ARIA-nyň dogry semantikasy, kömekçi tehnologiýalar bilen gabat gelmek.

3) Semantika, sözbaşylar we ARIA

Semantik bellik öň ARIA: '<button>', '<nav>', '<form>', '<table>' - nyşana görä.
Başlyklaryň iýerarhiýasy: bir '<h1>' sahypasyna, soňra logiki gurluşy '<h2>' - '<h3>'.
Landmarks: '<header>', '<main>', '<aside>', '<footer>', '<nav>' - ekranlara kömek edýär.
ARIA diňe zerur bolan ýagdaýynda: 'role', 'aria-label', 'aria-describedby', 'aria-expanded', 'aria-live'.
Ýagdaýlary/ýalňyşlyklary 'aria-invalid', 'aria-errormessage' arkaly.

4) Klawiatura we fokus-dolandyryş

Klawiatura bilen doly dolandyrmak: 'Tab/Shift + Tab' - tertip, 'Enter/Space' - işjeňleşdirmek, 'Esc' - çykyş.
Hemişe görünýän hile; outline öçürilmez.
Fokus duzaklary: modalkalarda - siklik fokus, fokusyň ýapylandan soň çeşmä gaýdyp gelmegi.
Gizlin elementler tab-tertibe düşmeli däldir (' display: none', 'aria-hidden =" true"').
Skip baglanyşyklary: "Esasy mazmuna geç" - sahypanyň başynda.

5) Reňk, kontrast we çaphana

Tekstiň garşylygy: azyndan 4. Adaty tekst üçin 5:1 we uly tekst üçin 3:1.
Diňe reňke bil baglamaň: nyşan/patter/gol bilen köpeldiň.
Basylýan nyşanlaryň ululygy: azyndan 40-48 px, töwereginde ýeterlik meýdanlar.
Şriftler: okalýan garnituralar, hatara 1. 4–1. 6, setiriň uzynlygy 45-90 belgi.

6) Hereket, animasiýa we epileptogen şöhle

Prefers-reduced-motion ulgam baýdagyna hormat goýuň - ýönekeýleşdirilen animasiýalary goşuň/paralakslary öçüriň.
Titremelerden gaça duruň> 3 gezek/sek.
Ähli awto-hereketlerde Pause/Stop/Hide bolmaly.

7) Görnüşler, ýalňyşlyklar we tassyklama

Bellikleri we meýdanlary aç-açan baglanyşdyryň: '<label for = "id">'.
Pleysholder bellik däl.
Meýdanyň gapdalynda we ýokarsynda ýalňyşlyklar barada habarlar; 'aria-describedby' arkaly baglanyşdyryň.
Giriş görnüşini, mysaly, maskany düşündiriň; birlikleri we walýutany görkeziň.
Eger ýalňyşlyk ýüze çyksa, doldurylan ýerleri taşlamaň; üns beriň.

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) Komponentler we interaktiw: patternler

Baglanyşyk düwmeleri: hereket = '<button>', geçiş = '<a>'.
Tablar/akkordeonlar: nawigasiýa oklary, 'aria-controls', 'aria-selected'.
Modallar/gepleşikler: 'role = "dialog', 'aria-modal =" true', fokus duzagy, 'Esc' ýapýar.
Tooltip/Popover: klawiaturanyň elýeterliligi, wagtlar okamaga päsgel bermeýär.
Drag & Drop: alternatiwalar - "ýokaryk/aşak" düwmeleri, klawiatura oklary; wakalar diňe syçan bilen däl.

9) Media: wideo/ses/grafika

Wideo: subtitrler, transkript (transcript), ses düşündirişleriniň alternatiw ýoly (AD).
Ses: tekst açylmagy.
Grafikler/diagrammalar: tekst rezýumesi ("möhüm zat"), maglumatlar tablisasy, oklaryň düşündiriş gollary.
Diri ýerler: 'aria-live = "polite "/" assertive"' - ýygy-ýygydan gygyrmazlyk üçin seresap boluň.

10) Tablisalar we sanawlar

Doňdurylan sütünler/setirler - tab-tertibi bozmaň.
Uly tablisalar - sahypa; elmydama eksport beriň (CSV/JSON).

11) i18n, lokallar we RTL

html kökünde 'lang' atributy; sanlaryň/seneleriň/walýutalaryň ýerli formatlary.
RTL goldawy (arap/iwrit): nyşanlary aýna, nawigasiýa tertibi, kursorlar.
Nyşana tikilen sözlerden gaça duruň (tekst terjime edilmelidir).
Simpleönekeý sözlemler, jargondan gaça durmak; terminleriň sözlügi.

12) Wagt, sessiýalar, kapçalar we alternatiwalar

Wagtlar - duýduryş we uzaltmak mümkinçiligi bilen.
CAPTCHA: alternatiwalary saýlaň (soraglar, göze görünmeýän bot analizatorlary, poçta/telefon arkaly tassyklamak); eger ulansaňyz - diňe wizual däl, tekst alternatiwasy.
Autentification: parol dolandyryjylaryny goldamak, "paroly görkezmek", WebAuthn.

13) Duýgur we motorly näsazlyklar üçin elýeterlilik

Yşaratlar basmagyň/klawiaturanyň ekwiwalentlerine eýe bolmalydyr.
Alternatiwasyz uzak wagtlap saklamagy/iki gezek saklamagy talap etmäň.
"Pointer cancellation": hereketi ýatyrmak üçin "basmak" däl-de, goýbermek üçin ýerine ýetirilmelidir.

14) Ýagdaýlar, habarnamalar we alertler

Dinamiki habarlar üçin 'role =' status '/' alert 'ulanyň.
Fokusyňyzy "ýelmeýän" bannerler bilen ýapmaň.
Toast-bildirişler - fokus/hover duralgasy we klawiatura girişi bilen.

15) Synag-meýilnama (el we awto)

• Ähli esasy ssenariýalary diňe klawiatura bilen geçiň.
• Her elementde fokusyň görünişini barla.
• 200% -e çenli giňeltmek - interfeýs gorizontal skroll bolmazdan funksional bolup galýar.
• "Hereketi azaltmak" ulgam tertibini açyň - animasiýa päsgel bermeýär.
• Scrinrider (NVDA/VoiceOver) bilen ssenarini geçiň, dogry rollara/belliklere/tertibe göz ýetiriň.

• Komponentler derejesinde elýeterlilik lintleri.
• Kontrasty, alternatiw tekstleri, sözbaşylaryň tertibini, ARIA-nyň dogrulygyny barlamak.
• Möhüm ekranlar üçin semantika (role tree) snapshotlary.

16) Elýeterliligiň hil ölçegleri

A11y Coverage: Barlag sahypalary bilen komponentleriň paýy.
Keyboard-only Pass Rate: klawiatura tarapyndan geçirilen ssenariýalaryň göterimi.
Contrast Violations/1k elementleri.
SR Flow Time: Screenrider bilen ssenariýanyň geçen wagty.
User-feedback: elýeterlilik, jogap wagty we düzedişler barada şikaýatlar.

17) Komponentiň çek-sanawy

• Artykmaç ARIA bolmazdan dogry semantika/rol
• Gollanan bellikler, 'aria-' dogry
• Klawiatura bilen doly dolandyrmak, görünýän fokus
• Tekstiň/nyşanlaryň/çäkleriň tapawudy kadaly
• Ýalňyşlyklar we ýagdaýlar skrinrider tarapyndan seslenýär
• Hormat prefers-reduced-motion
• Basylýan sebitiň ululygy ≥ 40-48 px
• Lokalizasiýa we RTL ýerleşişi bozmaýar

18) Anti-patternler

Rolsyz/klawiaturasyz "Div-düwmeler".
'outline: none' fokusyny alternatiwasyz gizläň.
Label ýerine pleýsholder.
Hatalar diňe reňkde.
Fokussyz we 'Esc' -siz modallar.
Klawiaturasyz sürmek.
Opsiýasyz uzyn awtoulag öwrümlerini/paralakslary öçüriň.

19) Rollar we proses

A11y - toparda eýesi (Product/Design/Dev).
Definishn-of-dan (DoD) elýeterliligi öz içine alýar.
Dizaýn-revyu: kontrasty, fokusy, bellikleri barlamak.
Kod-revyu: semantika/ARIA, klawiatura synagy.
Yzygiderli auditler we gowulaşdyrmalar meýilnamasy.

20) Iterasiýalar boýunça ornaşdyrmak

• Semantika/sözbaşylar, kontrast, fokus we klawiatura, esasy görnüşler we ýalňyşlyklar.

• Modalkalar, tablar/akkordeonlar, tekst rezýumesi bilen tablisalar/grafikler, wideo-subtitrler, pes animasiýa.

• CI-de awtotestler, RTL/i18n, metrikler, yzygiderli barlaglar, topara okuw.

21) Şablonlar we snippetler

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

Körler üçin aýratyn wersiýa gerekmi?
Ýok. Sazlamalar bilen hemmeler üçin bir uýgunlaşdyrylan, elýeterli wersiýa.

Diňe kontrasty barlamak ýeterlikmi?
Ýok. Kontrast diňe bir bölegi. Klawiatura, fokus, semantika, form ýalňyşlyklary, metbugat we ş.m.

ARIA hemme zady çözermi?
ARIA nädogry semantikany düzetmez. Ilki dogry bellikler, soňra ARIA-düşündirişler.

Jemi

Elýeterlilik ulgamlaýyn düzgün: semantika → klawiatura/fokus → kontrast/reňk → formalar/ýalňyşlyklar → media/grafika → i18n/RTL → synag meýilnamasy we metrika. Toparyň DoD we medeniýetiniň bir bölegi hökmünde elýeterliligi ediň - önümiňiz hakykatdanam ähliumumy, ygtybarly we hemmeler üçin amatly bolar.