Интерфейстин жеткиликтүүлүгүн тестирлөө

1) Эмне үчүн жана эмне үчүн "даяр" деп эсептейбиз

• WCAG 2 критерийлери аткарылган. 1/2. максаттуу платформалар үчүн 2 AA деңгээли;
• интерфейс толугу менен клавиатурадан өтөт;
• скринридерлер менен туура иштөө;
• карама-каршылыктар нормаларга ылайык келет;
• Бардык шарттар/каталар/статустар чычкандан тышкары жана жок жеткиликтүү;
• эске локалдаштыруу, RTL, reduce motion жана мобилдик өзгөчөлүктөрү.

2) сыноо стратегиясы (пирамида A11y)

1. Автотесттер/линтерлер (көйгөйлөрдүн класстарынын 40-60% чейин тез жабуу).
2. Кол үлгүлөрүн текшерүү (клавиатура, фокус, мазмун, логика).
3. Assistive Tech (AT) сессиялар: скринридерлер, масштабдоо, түс чыпкалар.
4. Колдонуучулар менен талаа сыноолору (мүмкүн болушунча).

Максаты: компоненттердин/үлгүлөрдүн деңгээлинде системалык кемчиликтерди кармоо.

3) Негизги текшерүүлөрдүн чек-тизмеси (тез өтүү)

• Klaviatura: бардык Tub/жебелер менен жетишүүгө болот; фокустун тартиби логикалуу; модал фокус тузак бар; ESC/Enter/Space иштеп жатат.
• Focus индикатор ар кандай тема/ар кандай алкагында көрөбүз.
• Контраст: текст ≥ 4. 5:1 (кадимки), ≥ 3:1 (чоң), сөлөкөттөр/контролдоо окулат.
• Семантика: туура теги ('button', 'a', 'label', 'ul/li', 'th/td'), ролдору жана 'aria-' керек болсо гана.
• Screenrider: иерархия аталыштары, баскычтар/шилтемелер семантикалык аттары, иконалар/сүрөттөр үчүн альтернатива.
• Формалар: ачык 'label', кеңештер/каталар байланышкан ('aria-describedby'), каталардын тексттери конкреттүү.
• Динамика: тосттор/баннерлер/каталар 'aria-live' ('polite '/' assertive') аркылуу жарыяланат.
• Animation 'prefers-reduced-motion' сыйлайт; эч кандай "титиреп" interface.
• Локализация/RTL: Негизги экрандар тегизделген, сандар/даталар/валюталар утилиттер менен форматталган.
• Мобилдүүлүк: 44 ≥ 44 px × тийүү максаттары, zoom тыюу салынган эмес, экран буруу мазмунду сындырбайт.

4) Ролдор, жоопкерчилик жана экспонаттар

Дизайн системасы: A11y-ар бир компоненттин сүрөттөмөсүндө талаптар.
Иштеп: autoprecks, unit/A11y-asserts менен interaction-тесттер.
QA: кол скрипттер + AT сессиялар; олуттуу/жыштыгы менен отчет.
UX/Content: microcopy каталар/статустар, үн менен окуу жөндөмдүүлүгү.
Артефакттар: чек баракчалары, сценарийлер, АТ скринкасттары, WCAG референттери менен кемчиликтердин тизмеси, сунуштар.

5) Автоматташтырылган текшерүү

Linters/анализаторлор: axe, eslint-plugin-jsx-a11y, pa11y, Lighthouse.
Пайплайндагы: PR критикалык бузулууларга бөгөт коюу (role/label/контраст/таб-тузактар).
Контрасттын Snapshots: темалардын/шарттардын визуалдык тесттери.

6) Кол менен сыноо: жагдайлар

6. 1 Клавиатура

Баракты бир гана клавиатура менен басыңыз (Tab/Shift + Tab/Enter/Space/жебелер).
Текшерүү: фокустун көрүнүшү, кезектүүлүгү, бардык аракеттердин жеткиликтүүлүгү, "тузактардын" жана "өлүк" элементтердин жоктугу.
Модалкада: ичиндеги фокус, жабылганда демилгечиге кайтып келет.

6. 2 Screenriders (минималдуу топтому)

Desktop: NVDA/JAWS (Windows), VoiceOver (macOS).
Mobile: VoiceOver (iOS), TalkBack (Android).
Биз текшеребиз: туура аталыштар (H-иерархия), баскычтардын/шилтемелердин аталыштары, таблицаларды окуу ('th '/' scope'), статустарды жарыялоо, формалардын түшүнүктүү каталары.

6. 3 Мазмун жана microcopy

Биз сын тексттерди үн менен окуйбуз - түшүнүксүз, "ката 400" жок.
Ката = "эмне туура эмес + кантип + чектөө/формат".

6. 4 динамикасы жана тирүү региондор

Ийгилик тост - 'aria-live = "polite"', ката - 'assertive'.
Прогресс/жүктөө текст менен түшүндүрүлөт; skeleton spinner артык.

7) Формалар жана каталар (терең)

Ар бир талаада байланышкан label (placeholder эмес) бар.
Каталар:' aria-invalid =" true"',' aria-describedby =" [id]"' талаасына байланыштуу.
Форматтардын формулалары (датасы, телефону) алдын ала көрсөтүлөт; маскалар кириш/салууну бузбайт.
submit + auto-scroll жана биринчи ката багытталган каталардын жалпы баннер.
текст каталар: конкреттүү, техникалык жаргон жок.

8) Таблицалар, тизмелер, графиктер

Таблицалар: 'th' so 'scope = "col/row"', кол тамгалар, резюме.
Тизмелер - чыныгы 'ul/ol/li', diva эмес.
Графиктер - альтернативдик таблицалар/сүрөттөөлөр; легендалар бар; түстөр ≠ жалгыз белги.

9) Мултимедиа жана анимация

Video: субтитрлер/чечмелөө; клавиатура менен башкаруу; автоплейсиз (же тынч).
GIF/микроанимациялар: 'prefers-reduced-motion' менен өчүрүү; жарк этүүдөн сактанабыз.
Термелүү/үндөр - милдеттүү эмес жана визуалдык/текст менен кайталанат.

10) Мобилдик жеткиликтүүлүк

Interactives ≥ 44 × 44 px, жетиштүү аралыктар.
Масштабдоо тыюу салынбайт (meta viewport 'user-scalable = no').
Форма/клавиатура: туура түрлөрү ('tel', 'email', 'number'), биз системанын мүмкүнчүлүктөрүн жашырбайбыз.
Караңгы темада жана "көбүрөөк" системалык шрифттер менен текшерүү.

11) Локализация, сандар жана RTL

контекст менен i18n-ачкычтар аркылуу саптар; узун тилдер (DE/TR) макетин сындырбайт.
Даталар/валюталардын форматтары - саптар менен эмес, утилиттер менен.
RTL-режими: күзгү сөлөкөтү багыттоо, focus жана араба тартибин текшерүү, эки тараптуу киргизүү.

12) Критикалык Flow өзгөчөлүктөрү (iGaming)

Төлөмдөр/корутундулар

Так көрсөтмөлөр, лимиттер/мөөнөттөр/комиссиялар - текст менен.
Провайдердин каталары так, кодсуз жарыяланат; иш-аракет кылууга альтернатива бар.
Операцияны ырастоо: логикалык CTAга көңүл буруу, жокко чыгаруу мүмкүнчүлүгү.

КУС/текшерүү

Сүрөт/документтерге кадам-кадам жөнөтүүлөр; прогресс жана ETA.
Каталар "бүдөмүк/жаркыраган/кесилген" - түзөтүү мисалдары менен.
бейтарап үн, эч кандай юмор.

13) Кемчиликтердин оордугун баалоо

Blocker: негизги тапшырманы аягына чыгаруу мүмкүн эмес (клавиатура/скринридер).
Critical: критикалык функционалдык иштейт, бирок олуттуу тоскоолдуктар менен.
Major: тоскоолдук, айланма жол бар.
Minor: косметика/тапшырмага таасир этпестен гиддердин дал келбестиги.

Ар бир кемчилик - WCAG критерийлерине жана ойнотулуучу сценарийге шилтеме.

14) Кабыл алуу критерийлери (Definition of Done, A11y)

Клавиатура сценарийин чычкансыз өтүү 100%.
axe/Lighthouse: эч кандай оор/жогорку бузуулар.
Бардык темаларда/шарттарда AA контрасты.
Негизги жолдордун скринридер-прогону (navbar, формалар, модалдар, тосттор).
Документация жаңы компоненттери/fich үчүн A11y (ролдук модель, ария, фокус, мисалдар).
Регрессия A11y-тесттер CI жашыл.

15) Процесстер жана автоматташтыруу

Иштеп чейин: A11y-милдеттердин критерийлери, фокус/ката шарттары менен макеттер.
Иштеп чыгууда: локалдык монтаждоодо линтерлер/ахе; контрасттардын/фокустун визуалдык снапшоттору.
CI жылы: pa11y/axe сынчыл беттери боюнча сканер; Blocker/Critical учурунда кулаган.
Чыгарылгандан кийин: чейректик аудиттер, A11y-теги боюнча колдонуучунун даттанууларына мониторинг жүргүзүү.

16) Анти-үлгүлөрү

Pleysholder ордуна label.
'div' ордуна 'button '/' a'.
Өчүрүү focus шакек "сулуулук үчүн".
Түс статустун жалгыз алып жүрүүчүсү катары.
Focus Trap/ESC жок модалдар.
Mobile боюнча масштабдоо тыюу салуу.
"Ката 400/500" адамдын түшүндүрмөсү жок.

17) Тестирлөө сценарийинин үлгүлөрү

Script 1 - Клавиатура багыттоо (форма менен бет)

1. Tab биринчи талаага чейин, маалыматтарды киргизүү.
2. Shift + Tab артка - туура тартипте текшерип.
3. валидацияны чакырыңыз (submit) - фокус биринчи катага которулат.
4. ESC баскычы модалканы жабуу, фокус демилгечиге кайтып келди.

Script 2 - Скринридер (төлөм бети)

1. Барактын аталышына (h1) өтүңүз, бөлүмдөрдү угуңуз.
2. Ыкманы тандоо - ролдорду/шарттарды жарыялоо угулат.
3. Атайылап сумманы ката кетирүү - билдирүү окулду жана талаага байланыштуу.
4. Төлөм жөнүндө ийгиликтүү тост 'polite' деп жарыяланды.

Script 3 - динамикасы

1. күтүү операциясын баштоо> 3 с - процесс/ETA жөнүндө текст бар.
2. Тармак ката болсо - баннер 'assertive', клавиатурадан жеткиликтүү, "кайталоо/жардам" жолу бар.

18) Пайдалуу микро-шаблондор

Ролдор/aria тост үчүн

html
<div role = "status" aria-live = "polite"> Payment accepted. Balance updated. </div>
<div role = "alert" aria-live = "assertive"> The payment was denied. Try another method. </div>

талаа менен ката байланыш

html
<label for = "amount "> Amount </label>
<input id="amount" aria-invalid="true" aria-describedby="amount-error">
<div id = "amount-error "> Minimum 100 UAH. Please enter a larger amount. </div>

Модалка (семантикалык атрибуттар)

html
<div role="dialog" aria-modal="true" aria-labelledby="m-title">
<h2 id =" m-title "> Confirm Payment </h2>
<! -- content -->
<button> Confirm </button>
<button> Cancel </button>
</div>

19) A11y практикасын ишке ашыруунун тез планы

1. Учурдагы компоненттердин/үлгүлөрдүн аудити (контраст/фокус/ролдук семантика).
2. Дизайн системасын оңдоо: ар бир компонентке A11y бөлүмүн кошуу.
3. Tools: жергиликтүү жана CI менен/axe/pa11y/Lighthouse linters орнотуу.
4. Окутуу: дизайнерлер/иштеп чыгуучулар/копирайтерлер үчүн кыска жолдор.
5. Учкуч: 3-5 эң көп кездешүүчү кемчиликтерди (модалдар, формалар, тосттор) оңдоо.
6. Регламент: A11y-критерийлери менен DoD; чейректик аудит.

Жыйынтыктоочу шпаргалка

Клавиатураны, фокусту, контрасттарды, скринридерди, динамиканы текшерүү.
Статустарды aria-live аркылуу жарыялаңыз; каталар - талаалар менен байланышкан.
reduce motion урмат, масштабдуу тыюу жок.
Семантика менен ойлогула (тегдер/ролдор), "кандай көрүнөт" эмес.
Текшерүүлөрдү автоматташтырыңыз, бирок дайыма кол менен толуктаңыз.
WCAG шилтеме менен кемчиликтерди чечүү, олуттуу жана ойнотуу скрипт.