UX-жеткиликтүүлүгү жана бардык интерфейстери

1) Эмне үчүн маанилүү

Юридикалык жана этикалык жактан: интерфейс көрүү, угуу, моторика, когнитивдик өзгөчөлүктөрү бар адамдарды жокко чыгарбашы керек.
Бизнес таасири: көбүрөөк колдонуучулар, жогорку конверсия жана сактоо, жакшы SEO жана коддун сапаты.
Операциялык: жеткиликтүүлүк - бул "кокустук фикс" эмес, процесс.

2) Негиздери жана негиздери (POUR)

Perceivable (кабыл алуу): карама-каршы тексттер, альтернатива, субтитрлер.
Operable (Controlling): Бардык клавиатура менен жеткиликтүү, көрүнгөн фокус, тыныгуу/токтоо анимация.
Understandable (Түшүнүктүүлүк): алдын ала багыттоо, так каталар, жөнөкөй сөздөр.
Robust (Ишенимдүүлүк): туура HTML/ARIA семантикасы, жардамчы технологиялар менен шайкештиги.

3) Семантика, аталыштар жана АРИА

ARIA алдында семантикалык белгилөө: '<button>', '<nav>', '<form>', '<table>' - максаттуу.
Аталыш иерархиясы: бир '<h1>' баракка, андан ары логикалык түзүлүш '<h2>' - '<h3>'.
Landmarks: '<header>', '<main>', '<aside>', '<footer>', '<nav>' - скринридерлерге жардам берет.
ARIA керек болсо гана: 'role', 'aria-label', 'aria-describedby', 'aria-expanded', 'aria-live'.
Шарттар/каталар аркылуу 'aria-invalid', 'aria-errormessage'.

4) Клавиатура жана Focus Management

Толук клавиатура башкаруу: 'Tab/Shift + Tab' - тартиби, 'Enter/Space' - иштетүү, 'Esc' - чыгаруу.
Көрүнгөн фокус дайыма; outline өчүрүү эмес.
Фокус тузактары: Модалкаларда циклдик фокус, жабылгандан кийин булакка көңүл буруу.
Жашыруун элементтер таб-тартибине кирбеши керек (' display: none', 'aria-hidden =" true"').
Skip шилтемелер: "негизги мазмунуна өтүү" - бет башында.

5) түсү, карама-каршы жана типографиялык

Тексттин карама-каршылыгы: кеминде 4. 5:1 жөнөкөй текст жана 3:1 ири үчүн.
гана түс таянуу жок: сөлөкөт/үлгү/кол менен кайталап.
Clickable максаттардын көлөмү: 40-48 px, айланасында жетиштүү талаалар жок дегенде.
Шрифттер: окулуучу гарнитуралар, саптар аралык 1. 4–1. 6, сап узундугу 45-90 белги.

6) Кыймыл, анимация жана эпилептогендик жарк этүү

prefers-reduced-motion тутумунун желегин урматтаңыз - жөнөкөйлөштүрүлгөн анимацияларды кошуңуз/параллаксты өчүрүңүз.
3 жолу/сек.
Бардык авто кыймылдар Пауза/Stop/Hide болушу керек.

7) Формалар, каталар жана валидация

Так белгилерди жана талааларды байланыштырыңыз: '<label for = "id">'.
Playsholder - белги эмес.
Талаанын жанындагы жана жогорудагы каталардын кыскача маалыматтары; аркылуу байлап 'aria-describedby'.
Киргизүү форматын, мисалы, масканы түшүндүрүңүз; бирдиктерди жана валютаны көрсөтүңүз.
Ката болгондо толтурулган талааларды ыргытпаңыз; көйгөйлүү талаага көңүл буруңуз.

html
<label for="email">Эл. mail </label>
<input id="email" name="email" type="email" aria-describedby="email-hint email-err">
<div id = "email-hint" class = "hint"> We don't send spam </div>
<div id = "email-err" class = "error" role = "alert"> Specify an address in the format name @ example. com</div>

8) компоненттери жана interactive: үлгүлөрү

Шилтеме vs баскычтары: аракет = '<button>', өтүү = '<a>'.
Табалар/аккордеондор: навигация жебелери, 'aria-controls', 'aria-selected'.
Модалдар/диалогдор: 'role = "dialog', 'aria-modal =" true', фокус тузагы, 'Esc' жабылат.
Tooltip/Popover: клавиатура боюнча жеткиликтүүлүк, таймауттар окууга тоскоол болбойт.
Drag & Drop: альтернатива - баскычтар "жогору/төмөн жылдыруу", клавиатура жебелер; окуялар чычкан менен гана эмес.

9) Медиа: видео/аудио/графика

Video: субтитрлер, чечмелөө (transcript), аудио сүрөттөмөлөрдүн (AD) башка жол.
Аудио: текст чечмелөө.
Графиктер/диаграммалар: тексттик резюме ("маанилүү"), маалыматтар таблицасы, октордун сүрөттөөчү кол тамгалары.
Тирүү аймактар: 'aria-live = "polite "/" assertive "'- өтө көп" кыйкырып" эмес, сак болуу.

10) Таблицалар жана тизмелер

'<th scope = "col' row"> ', кол тамгаларды, жыйынтыктарды колдонуңуз.
Тоңдурулган тилкелер/саптар - таби тартибин бузбоо.
Чоң таблицалар - барак; ар дайым экспорт менен камсыз кылуу (CSV/JSON).

11) i18n, жергиликтүү жана RTL

html тамырында 'lang' атрибуту; жергиликтүү сандар/даталар/валюталардын форматтары.
RTL колдоо (араб/иврит): сөлөкөттөрдү күзгү, багыттоо тартиби, курсорлор.
Сөлөкөткө тигилген сөздөрдөн алыс болуңуз (текст которулушу керек).
Жөнөкөй сөздөр, жаргон качуу; терминдердин глоссарийи.

12) Убакыт, сессиялар, капчыктар жана альтернативалар

Таймауттар - эскертүү жана узартуу мүмкүнчүлүгү менен.
CAPTCHA: тандоо (суроолор, көзгө көрүнбөгөн бот анализаторлор, почта/телефон аркылуу тастыктоо); болсо - тексттик альтернатива жана визуалдык гана эмес.
Аутентификация: парол менеджерлерин колдоо, "сырсөздү көрсөтүү", WebAuthn.

13) сенсордук жана мотор бузулуулар үчүн жеткиликтүүлүк

Кыймыл басуу/баскычтоп барабар болушу керек.
Альтернатива жок узакка созулган кармоо/кош таптарды талап кылбаңыз.
"Pointer cancellation": иш-аракет жокко чыгаруу үчүн мүмкүнчүлүк берүү үчүн "басып" эмес, эс алуу боюнча жүзөгө ашырылышы керек.

14) Шарттар, билдирүүлөр жана алерталар

Динамикалык билдирүүлөр үчүн 'role = "status "/" alert"' колдонуңуз.
Фокусту "жабышчаак" баннерлер менен жабууга болбойт.
Toast эскертмелери - фокус/hover жана клавиатурадан кирүү менен тыныгуу.

15) Тест-план (кол жана унаа)

• Бардык негизги сценарийлер гана клавиатура аркылуу өтөт.
• Ар бир элементтеги фокустун көрүнүшүн текшерүү.
• 200% га чейин масштабын жогорулатуу - Interface горизонталдуу scroll жок функционалдуу бойдон калууда.
• "кыймылды азайтуу" системалык режимин күйгүзүү - анимация тоскоолдук кылбайт.
• Screenrider (NVDA/VoiceOver) менен скрипт өтүп, туура ролдорду/белгилерди/тартипти текшерип.

• компоненттеринин деъгээлинде Линт жеткиликтүүлүгү.
• Контрастты, альтернативдик тексттерди, аталыштардын тартибин, ARIA ырааттуулугун текшерүү.
• критикалык экрандар үчүн семантика Snapshots (role tree).

16) Жеткиликтүүлүк сапатынын метрикасы

A11y Coverage: чек барактар менен компоненттеринин үлүшү.
Keyboard-only Pass Rate: баскычтоп өткөн жагдайлар пайызы.
Contrast Violations/1k элементтери.
SR Flow Time: Screen Screen менен өтүү убактысы.
Колдонуучу-feedback: жеткиликтүүлүгү жөнүндө даттануулар, жооп убакыт жана оңдоо.

17) Чек тизмеси компоненти

• Туура семантика/ролу жок ашыкча ARIA
• Кол коюлган белгилер, 'aria-' туура
• Толук Klaviatura башкаруу, көрүнгөн Focus
• Текст/сөлөкөт/чек карама-каршы нормалдуу
• Каталар жана шарттар скринридер тарабынан айтылган
• Урматтоо prefers-reduced-motion
• Clickable аймагынын өлчөмү ≥ 40-48 px
• Локализация жана RTL макетин бузбайт

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

"Dive баскычтар" ролу/баскычтоп жок.
'outline: none' фокусун альтернативасыз жашыруу.
Pleysholder ордуна label.
Каталар түс менен гана.
Модалктар фокус тузагы жок жана 'Esc' жок.
Drag-only клавиатура жок.
Long Auto Rotting/parallax тандоо жок өчүрүү.

19) Ролдору жана жараяны

командасында A11y ээси (Product/Design/Dev).
Дефинишн-оф-дан (DoD) жеткиликтүүлүктү камтыйт.
Дизайн-ревю: контрастты, фокусту, лейблдерди текшерүү.
Code-review: семантика/ARIA, клавиатура сыноо.
Үзгүлтүксүз аудит жана жакшыртуу планы.

20) Итерация боюнча киргизүү

• Семантика/аталыштар, контраст, фокус жана клавиатура, негизги формалар жана каталар.

• Модалдар, табалар/аккордеондор, тексттик резюме менен таблицалар/графиктер, видео субтитрлер, кыскартылган анимация.

• автотесттер CI, RTL/i18n, метрика, үзгүлтүксүз аудиттер, команда окутуу.

21) Шаблондор жана сниппеттер

html
<div role="dialog" aria-modal="true" aria-labelledby="dlg-title" aria-describedby="dlg-desc">
<h2 id = "dlg-title "> Confirm action </h2>
<p id = "dlg-desc "> This operation is not reversible. </p>
<button> Cancel </button>
<button> Confirm </button>
</div>

html
<a class =" skip-link" href = "# main"> Go to main content </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

Көрүүсү начар адамдар үчүн өзүнчө версия керекпи?
Жок. Бир ылайыкташтырылган, бардык параметрлери менен жеткиликтүү версия.

Бир гана карама-каршылыкты текшерүү жетиштүүбү?
Жок. Контраст - бир гана бөлүгү. Бизге клавиатура, фокус, семантика, форма каталары, медиа ж.б. керек.

ARIA баарын чечет?
ARIA туура эмес семантика туура эмес. Адегенде туура теги, андан кийин ARIA тактоо.

Жыйынтык

Жеткиликтүүлүк - бул системалык дисциплина: семантика → клавиатура/фокус → контраст/түс → форма/ката → медиа/графика → i18n/RTL → тест-план жана метрика. DoD жана маданият командасынын бир бөлүгү катары жеткиликтүүлүгүн жасаңыз - жана сиздин продукт чындап эле универсалдуу, ишенимдүү жана бардыгы үчүн ыңгайлуу болот.