Озмоиши дастрасии интерфейс

1) Чаро ва он чизе ки мо фикр мекунем "омода" аст

• Меъёрҳои WCAG 2 ҷавобгӯ буданд. 1/2. 2 Сатҳи АА барои платформаҳои мақсаднок;
• интерфейс пурра аз клавиатура мегузарад;
• кори дуруст бо хонандагони экран;
• муқоисаҳо ба меъёрҳо мувофиқат мекунанд;
• ҳама ҳолатҳо/хатогиҳо/статусҳо аз чашм ва бе муш дастрасанд;
• маҳаллисозӣ, RTL, кам кардани ҳаракат ва хусусиятҳои мобилӣ ба назар гирифта мешаванд.

2) Стратегияи санҷиш (пирамида A11y)

1. Автотестҳо/линтерҳо (фарогирии босуръати то 40-60% дарсҳои мушкилот).
2. Санҷиши намунаи дастӣ (клавиатура, фокус, мундариҷа, мантиқ).
3. Ҷаласаҳои ёрирасони Tech (AT): хонандагони экран, миқёс, филтрҳои рангӣ.
4. Санҷишҳои саҳроӣ бо корбарон (агар имкон бошад).

Ҳадаф: ба даст овардани камбудиҳои системавӣ дар сатҳи компонент/намуна, то ки онҳо дар хусусиятҳо зиёд нашаванд.

3) Рӯйхати санҷиши чекҳои асосӣ (зуд иҷро)

• Клавиатура: ҳама чиз бо ҷадвал/тирҳо дастрас аст; тартиби фокус мантиқӣ аст; дар модалҳо доми ҳиллаест; ESC/Enter/Space кор мекунад.
• Нишондиҳандаи фокус дар ҳама гуна мавзӯъ/замина намоён аст.
• Муқоиса: матни ≥ 4. 5:1 (муқаррарӣ), ≥ 3:1 (калон), нишонаҳо/идоракунӣ қобили хондан мебошанд.
• Семантика: барчаспҳои дуруст ('тугма', 'a', 'label', 'ul/li', 'th/td'), нақшҳо ва 'aria-' танҳо дар ҳолати зарурӣ.
• Хонандаи экран: унвонҳо аз рӯи зинанизом, номҳои пурмазмуни тугмаҳо/истинодҳо, алтернативаҳо барои нишонаҳо/тасвирҳо.
• Шаклҳо: 'тамғакоғазҳо', ишораҳо/хатогиҳо алоқаманданд ('aria-describy'), матнҳои хато мушаххасанд.
• Динамика: Хӯришҳо/баннерҳо/хатогиҳо тавассути 'aria-live' ('хушмуомила '/' тасдиқкунанда') эълон карда мешаванд.
• Аниматсияҳо 'ҳаракатро коҳиш медиҳанд'; бе интерфейси "ларзон".
• Маҳаллисозӣ/RTL: экранҳои калидӣ ҳамоҳанг карда шудаанд, рақамҳо/санаҳо/асъорҳо аз ҷониби хадамоти коммуналӣ формат карда мешаванд.
• Мобилӣ: ҳадафҳои ламсӣ ≥ 44 × 44 px, масштаб манъ аст, гардиши экран мундариҷаро вайрон намекунад.

4) Нақшҳо, масъулиятҳо ва артефактҳо

Системаи тарроҳӣ: A11y талабот дар тавсифи ҳар як ҷузъ.
Таҳиягарон: санҷиши худкор, санҷишҳои воҳид/ҳамкорӣ бо A11y-asserts.
QA: скриптҳои дастӣ + ҷаласаҳои AT; гузориш бо шиддат/басомад.
UX/Мундариҷа: микрокопияи хатогиҳо/статусҳо, хондан бо овози баланд.
Артефактҳо: рӯйхатҳо, скриптҳо, экранҳои AT, рӯйхати камбудиҳо бо истинодҳои WCAG, тавсияҳо.

5) Санҷишҳои худкор

Линтерҳо/таҳлилгарон: табар, eslint-plugin-jsx-a11y, pa11y, Маяк.
Дар лӯла: мо PR-ро барои вайронкуниҳои интиқодӣ (нақш/нишона/контраст/домҳои ҷадвал) маҳкам мекунем.
Суратҳои контраст: санҷишҳои визуалии мавзӯъҳо/ҳолатҳо.

6) Санҷиши дастӣ: сенарияҳо

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

Аз саҳифа танҳо бо клавиатура гузаред (Tab/Shift + Tab/Enter/Space/arrows).
Санҷед: аёнияти фокус, афзалият, мавҷудияти ҳама амалҳо, набудани унсурҳои "дом" ва "мурда".
Дар модал: фокус дар дохили, ҳангоми пӯшида, ба ташаббускор бармегардад.

6. 2 Хонандагони экран (маҷмӯи ҳадди аққал)

Мизи корӣ: NVDA/JAWS (Windows), Voice

Мобилӣ: Voice

Мо тафтиш мекунем: сарлавҳаҳои дуруст (H-иерархия), номҳои тугмаҳо/истинодҳо, ҷадвалҳои хониш ('th '/' миқёс'), эълони статус, хатогиҳои фаҳмо.

6. 3 Мундариҷа ва микрокопия

Мо матнҳои танқидиро бо овози баланд мехонем - бидуни номуайянӣ, бе "хатогии 400".
Хато = "чӣ нодуруст аст + чӣ гуна бояд + маҳдудият/форматро ислоҳ кард".

6. 4 Динамика ва минтақаҳои зиндагӣ

Тости муваффақият 'aria-live = "хушмуомила" аст, хатогӣ' эътимодбахш 'аст.
Пешрафт/зеркашӣ бо матн шарҳ дода мешавад; скелет ба спиннер бартарӣ дода мешавад.

7) Шаклҳо ва хатогиҳо (амиқ)

Ҳар як майдон дорои тамғаи алоқаманд аст (на ҷойгоҳ).
Хатогиҳо бо майдон алоқаманданд:' aria-беэътибор =" ҳақиқӣ"',' aria-describby =" [хато id]"'.
Формулаҳои формат (сана, рақами телефон) пешакӣ нишон дода мешаванд; ниқобҳо вуруд/воридкуниро вайрон намекунанд.
Баннерҳои мухтасари хатогиҳо ҳангоми пешниҳоди + худкори ҳаракат ва тамаркуз ба хатои аввал.
Матнҳои хато: мушаххас, бе jargon техникӣ.

8) Ҷадвалҳо, рӯйхатҳо, графикҳо

Ҷадвалҳо: сарлавҳаҳои 'th' with 'доираи = "col/row"', имзоҳо, дубора.
Рӯйхатҳо воқеӣ 'ul/ol/li' мебошанд, на divas.
Графҳо - ҷадвалҳо/тавсифҳои алтернативӣ; ривоятҳо дастрасанд; рангҳо ≠ сигнали ягона.

9) Мултимедия ва аниматсияҳо

Видео: субтитрҳо/транскрипт; назорати клавиатура; бидуни худкор (ё бо оромӣ).
GIF/микроаниматсияҳо: ҳангоми хомӯш кардани "ҳаракатро коҳиш диҳед" хомӯш кунед; пешгирӣ аз сар задани беморӣ.
Ларзишҳо/садоҳо - ихтиёрӣ ва нусхабардории визуалӣ/матн.

10) Дастрасии мобилӣ

Интерактивии ≥ 44 × 44 px, фосилаҳои кофӣ.
Миқёсро манъ накунед (тамошои мета бе 'корбар-миқёспазир = не').
Шакл/клавиатура: намудҳои дуруст ('tel', 'email', 'number'), қобилияти системаро пинҳон намекунанд.
Дар мавзӯи торик ва бо ҳуруфҳои система "бештар" -ро санҷед.

11) Маҳаллисозӣ, рақамҳо ва RTL

Сатрҳо тавассути калидҳои i18n бо матн; забонҳои дароз (DE/TR) тарҳро вайрон намекунанд.
Форматҳои сана/асъор - коммуналӣ, на сатрҳо.
Ҳолати RTL: нишонаҳои навигатсияро инъикос кунед, тартиби фокус ва интиқол, вуруди дуҷонибаро санҷед.

12) Мушаххасоти ҷараёни интиқодӣ (IGaming)

Пардохтҳо/хулосаҳо

Дастурҳои тоза, маҳдудиятҳо/мӯҳлатҳо/комиссияҳо - дар матн.
Хатогиҳои провайдер бидуни кодҳо ба таври возеҳ эълон карда мешаванд; алтернатива ба амал вуҷуд дорад.
Тасдиқи амалиёт: тамаркуз ба CTA мантиқӣ, бекоркунӣ.

CCM/санҷиш

Маслиҳатҳои зина ба зина барои аксҳо/ҳуҷҷатҳо; пешрафт ва ETA.
Хатогиҳои норавшан/дурахшон/буридашуда - бо намунаҳои ислоҳ.
Оҳанги бетараф, ҳазлу шӯхӣ нест.

13) Арзёбии дараҷаи норасоӣ

Блокатор: Вазифаи калидӣ (хонандаи клавиатура/экран) иҷро карда намешавад.
Муҳим: функсияҳои интиқодӣ кор мекунанд, аммо бо монеаҳои ҷиддӣ.
Асосӣ: дар роҳ меистад, роҳи мушкиле ҳаст.
Ноболиғ: косметика/риоя накардани дастурҳо бидуни таъсир ба вазифа.

Ҳар як камбудӣ ишора ба меъёри WCAG ва нусхабардории скрипт мебошад.

14) Таърифи иҷро (A11y)

Гузаронидани скрипти клавиатура бе муш 100% аст.
табар/Маяк: ҳеҷ гуна қонуншиканиҳои шадид/баланд.
Фарқияти АА дар ҳама мавзӯъҳо/давлатҳо.
Экрани хонандаи роҳҳои калидӣ (навбар, штампҳо, модалҳо, вудкои).
A11y ҳуҷҷатгузорӣ барои ҷузъҳои/хусусиятҳои нав (модели нақш, ария, фокус, мисолҳо).
Регрессияи A11y санҷишҳои сабз дар CI.

15) Равандҳо ва автоматизатсия

Пеш аз таҳия: A11y-criteria дар вазифаҳо, тарҳҳо бо ҳолати фокус/хатогӣ.
Дар таҳия: linters/ahe ҳангоми маҷлиси маҳаллӣ; аксҳои визуалии контраст/фокус.
Дар CI: pa11y/ax-scan аз ҷониби саҳифаҳои интиқодӣ; сохтани тарки зери Blocker/Critical.
Баъд аз озодшавӣ: санҷишҳои семоҳа, мониторинги шикоятҳои истифодабарандагон аз ҷониби A11y-tag.

16) Анти-намунаҳо

Ҷойгузин ба ҷои нишона.
'div' instead аз 'тугма '/' a'.
Ҳалқаҳои фокусии маъюбон "ба хотири зебоӣ".
Ранг ҳамчун интиқолдиҳандаи ягона.
Модалҳо бе доми фокус/ESC.
Ягон миқёс дар мобилӣ нест.
"Хатогии 400/500" бидуни шарҳи инсон.

17) Қолибҳои скрипти санҷишӣ

Сенарияи 1 - Навигатсионии клавиатура (Саҳифаи форма)

1. Ҷадвал ба майдони якум, маълумотро ворид кунед.
2. Shift + Tab бозгашт - Тартиби дурустро санҷед.
3. Санҷиши занг (пешниҳод) - фокус ба хатои якум мегузарад.
4. Модуляторро бо калиди ESC пӯшед, фокус ба ташаббускор баргашт.

Сенарияи 2 - Хонандаи экран (Саҳифаи пардохт)

1. Ба сарлавҳаи саҳифа (h1) равед, бахшҳоро гӯш кунед.
2. Интихоби усулро кушоед - эълони нақшҳо/давлатҳо шунида мешавад.
3. Дидаву дониста хатои ҷамъро ворид кунед - паём хонда мешавад ва бо майдон алоқаманд аст.
4. Тости пардохти бомуваффақият "хушмуомила" эълон кард.

Сенарияи 3 - Динамика

1. Амалиётро бо интизории> 3 сония оғоз кунед - матн дар бораи раванд/ETA мавҷуд аст.
2. Дар сурати хатогии шабака - парчами 'тасдиқкунанда', ки аз клавиатура дастрас аст, роҳи "такрорӣ/кӯмак" мавҷуд аст.

18) Микро-қолабҳои муфид

Нақшҳо/ария барои вудкои

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. Воситаҳо: Линтерҳои up/axe/pa11y/Lighthouse дар маҳал ва CI насб кунед.
4. Омӯзиш: дастурҳои кӯтоҳ барои тарроҳон/таҳиягарон/копирайтерҳо.
5. Озмоиш: 3-5 камбудиҳои маъмулро ислоҳ кунед (модалҳо, шаклҳо, вудкои).
6. Низомнома: Иҷро бо меъёрҳои A11y; аудити семоҳа.

Варақаи ниҳоии фиреб

Клавиатура, фокус, муқобил, хонандаи экран, динамикаро санҷед.
Статусҳоро тавассути aria-live эълон кунед; хатогиҳо - марбут ба майдонҳо.
Эҳтиром ҳаракатро коҳиш диҳед, миқёсро манъ накунед.
Семантикаро фикр кунед (барчаспҳо/нақшҳо), на "он чӣ ба назар мерасад".
Автоматикунонии чекҳо, вале ҳамеша бо чекҳои дастӣ илова кунед.
Камбудиҳоро бо истинод ба WCAG, вазнинӣ ва скрипти бозӣ ислоҳ кунед.