Интерфейстердің қолжетімділігін тестілеу

1) Неге және не үшін «дайын» деп есептейміз

• WCAG 2 критерийлері орындалды. 1/2. мақсатты платформалар үшін АА 2 деңгейі;
• интерфейс пернетақтадан толығымен өтеді;
• скринридерлермен дұрыс жұмыс істеу;
• қарама-қайшылықтар нормаларға сәйкес келеді;
• барлық жағдайлар/қателер/мәртебелер тінтуірсіз және көзсіз қол жетімді;
• оқшаулау, RTL, reduce motion және мобильді ерекшеліктер ескерілді.

2) Тестілеу стратегиясы (A11y пирамидасы)

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

Мақсаты: фичте көбеюін болдырмау үшін компоненттер/паттерндер деңгейінде жүйелік ақауларды ұстау.

3) Базалық тексерулердің чек-парағы (жылдам жүру)

• Пернетақта: барлығы табло/көрсеткілер арқылы қол жетімді; фокус тәртібі қисынды; модальдерде фокус тұзағы бар; ESC/Enter/Space жұмыс істейді.
• Фокус-индикаторды кез келген тақырыптан/кез келген фоннан көреміз.
• Қарама-қарсылық: мәтін ≥ 4. 5:1 (кәдімгі), ≥ 3:1 (ірі), иконалар/бақылаулар оқылады.
• Семантика: дұрыс тегтер ('button', 'a', 'label', 'ul/li', 'th/td'), және 'aria-' тек қажет болған жағдайда.
• Скринридер: иерархиялық тақырыптар, түймешіктердің/сілтемелердің мағыналық атаулары, иконалар/суреттер үшін баламалар.
• Пішіндер: анық 'label', кеңестер/қателер байланысты ('aria-describedby'), қате мәтіндері нақты.
• Динамика: тосттар/баннерлер/қателер 'aria-live' ('polite '/' assertive') арқылы хабарланады.
• Анимациялар 'prefers-reduced-motion'; интерфейсті «сілкілемей».
• Локализация/RTL: негізгі экрандар теңестірілген, сандар/күндер/валюталар утилиттермен пішімделеді.
• Ұтқырлық: 44 ≥ 44 px ×, зум тыйым салынбаған, экранды бұру мазмұнды бұзбайды.

4) Рөлдер, жауапкершілік және артефактілер

Дизайн жүйесі: Әрбір компоненттің сипаттамасында A11y-талаптар.
Әзірлеушілер: автопроверкалар, A11y-ассерттері бар unit/interaction-тестілер.
QA: қол сценарийлері + АТ-сессиялар; елеулі/жиілікпен есеп беру.
UX/Content: қателер/мәртебелер microcopy, дауыстап оқу қабілеті.
Артефактілер: чек-парақтар, сценарийлер, АТ скринкастары, WCAG-референттері бар ақаулар тізімі, ұсынымдар.

5) Автоматтандырылған тексерулер

Линтерлер/анализаторлар: axe, eslint-plugin-jsx-a11y, pa11y, Lighthouse.
Пайплайнда: критикалық бұзылулар кезінде PR блоктаймыз (role/label/контраст/таб-тұзақтар).
Контраст снапшоттары: тақырыптардың/жағдайлардың визуалды тесттері.

6) Қолмен тестілеу: сценарийлер

6. 1 Пернетақта

Бетті тек пернетақтамен (Tab/Shift + Tab/Enter/Space/Көрсеткілер) басыңыз.
Тексеріңіз: фокустың көрінуі, кезектілік, барлық әрекеттердің қолжетімділігі, «тұзақтар» мен «өлі» элементтердің болмауы.
Модальде: ішкі фокус, жабылғанда бастамашыға қайтарылады.

6. 2 Скринридерлер (ең аз жиынтық)

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 спиннерден артық.

7) Нысандар мен қателер (терең)

Әрбір өрісте байланған label (placeholder емес) бар.
Қателер мына өріспен байланысты:' aria-invalid =» true»',' aria-describedby =» [id]»'.
Форматтардың формулалары (күні, телефоны) алдын ала көрсетіледі; қалқалар енгізу/кірістіруді бұзбайды.
submit + авто-скролл кезіндегі қателердің жиынтық баннері және бірінші қатеге назар аударыңыз.
Қате мәтіндері: нақты, техникалық жаргонсыз.

8) Кестелер, тізімдер, графиктер

Кестелер: 'th' so 'scope =' col/row ', қолтаңбалар, түйіндеме.
Тізімдер - нақты 'ul/ol/li', дивалар емес.
Графиктер - баламалы кестелер/сипаттамалар; аңыздар қол жетімді; түсі ≠ жалғыз белгі.

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

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

10) Мобильді қолжетімділік

Интерактивтер ≥ 44 × 44 px, жеткілікті аралықтар.
Масштабтауға тыйым салынбайды (meta viewport 'user-scalable = no').
Пішін/пернетақта: дұрыс түрлері ('tel', 'email', 'number'), жүйелік мүмкіндіктерді жасырмаймыз.
Қараңғы тақырыпта және «үлкен» жүйелік қаріптермен тексеру.

11) Оқшаулау, сандар және RTL

Мәтіні бар i18n-кілттер арқылы жолдар; ұзын тілдер (DE/TR) орналасуды бұзбайды.
Күндер/валюталардың форматтары - жолдармен емес, утилиттермен.
RTL-режимі: навигация иконаларының айнасы, фокус және күймешек тәртібін, екі бағытты енгізуді тексереміз.

12) Сыни флоның ерекшелігі (iGaming)

Төлемдер/қорытындылар

Нақты нұсқаулықтар, лимиттер/мерзімдер/комиссиялар - мәтінмен.
Провайдердің қателері анық, кодсыз жарияланады; әрекетке балама бар.
Әрекетті растау: логикалық CTA-ға назар аудару, болдырмау мүмкіндігі.

АКҚ/верификация

Фото/құжаттарға қадамдық кеңестер; прогресс және ETA.
«Бұлдыр/блик/кесілген» қателері - түзету мысалдарымен.
Бейтарап үн, әзіл жоқ.

13) Ақаулардың күрделілігін бағалау

Blocker: негізгі тапсырманы аяқтау мүмкін емес (пернетақта/скринридер).
Critical: сындарлы функционал жұмыс істейді, бірақ елеулі кедергілермен.
Major: кедергі келтіреді, айналма жолы бар.
Minor: косметика/тапсырмаға әсер етпейтін гайдаларға сәйкессіздік.

Әрбір ақау - WCAG критерийіне және қайталанатын сценарийге сілтеме.

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

Пернетақталық сценарийді тышқансыз 100% өту.
axe/Lighthouse: сыни/жоғары бұзушылықтар жоқ.
Барлық тақырыптар/күйде AA қарама-қарсылығы.
Негізгі жолдардың скринридер-прогоны (навбар, пішіндер, модальдар, тостар).
Құжаттама жаңа компоненттер/фич үшін A11y (рөлдік модель, aria, фокус, мысалдар).
A11y-тесттерінің регрессиясы CI жасыл.

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

Әзірленгенге дейін: тапсырмалардағы A11y-критерийлері, фокус/қате жағдайлары бар орналасулар.
Әзірлеуде: жергілікті құрастыру кезіндегі линтерлер/ахах; контрастардың/фокустың көзбен шолу снапшттары.
CI-де: pa11y/axe-скан сыни беттер бойынша; Blocker/Critical кезінде билдтің құлауы.
Шығарылғаннан кейін: тоқсандық аудиттер, A11y-тег бойынша пайдаланушы шағымдарының мониторингі.

16) Қарсы үлгілер

label орнына плейсхолдер.
'button '/' a' орнына 'div'.
«Сұлулық үшін» ажыратылған фокус-сақиналар.
Түс мәртебенің жалғыз тасымалдаушысы ретінде.
Фокус-трэпсіз модульдер/ESC.
Mobile масштабтауға тыйым салу.
«Қате 400/500» адамның түсініктемесінсіз.

17) Тестілеу сценарийлерінің үлгілері

Скрипт 1 - Пернетақта навигациясы (пішіні бар бет)

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

Сценарий 2 - Скринридер (төлем беті)

1. (h1) беттің тақырыбына өтіңіз, бөлімдерді тыңдаңыз.
2. Әдісті таңдаңыз - рөлдерді/күйді жариялау естіледі.
3. Саналы түрде қате жіберіңіз - хабар оқылды және өріспен байланысты.
4. Төлем туралы сәтті тост 'polite' деп жарияланды.

Сценарий 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. Құралдар :/axe/pa11y/Lighthouse линтерлерін жергілікті және CI ішінде теңшеу.
4. Оқыту: дизайнерлер/әзірлеушілер/копирайтерлер үшін қысқа гайдтар.
5. Ұшқыш: 3-5 ең жиі ақауларды (модальдар, қалыптар, тостар) жөндеу.
6. Регламент: A11y-критерийлері бар DoD; тоқсандық аудит.

Қорытынды шпаргалка

Пернетақтаны, фокусты, қарама-қайшылықтарды, скринридерді, динамиканы тексеріңіз.
Мәртебелерді aria-live арқылы жариялау; қателер - өрістермен байланысты.
reduce motion қадір, масштабтауға тыйым салмаңыз.
«Қалай көрінеді» емес, семантикамен ойлау (тегтер/рөлдер).
Тексерулерді автоматтандыру, бірақ әрқашан қолмен толықтыру.
WCAG сілтемесі бар ақауларды, елеулі және ойнату сценарийін белгілеңіз.