UX қолжетімділігі және барлық интерфейстер

1) Бұл не үшін маңызды

Заңды және этикалық тұрғыдан: интерфейс көру, есту, моторика, когнитивтік ерекшеліктері бұзылған адамдарды жоққа шығармауы тиіс.
Бизнес тиімділігі: көп пайдаланушылар, жоғары конверсия және ұстап тұру, жақсы SEO және код сапасы.
Операциялық: қолжетімділік - бұл «кездейсоқ фикс» емес, процесс.

2) Негіздер мен қағидаттар (POUR)

Perceivable (Қабылдануы): қарама-қарсылық, балама мәтіндер, субтитрлер.
Operable (Басқарылуы): барлығы пернетақтадан қол жетімді, көрінетін фокус, үзіліс/тоқтату анимациясы.
Understandable (Түсініктілік): болжамды навигация, анық қателер, қарапайым тұжырымдар.
Robust (Сенімділік): HTML/ARIA дұрыс семантикасы, ассистивті технологиялармен үйлесімділігі.

3) Семантика, тақырыптар және ARIA

Семантикалық таңбалау алдында 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) Пернетақта және фокус-менеджмент

Пернетақтаның толық басқарылуы: 'Tab/Shift + Tab' - тәртіп, 'Enter/Space' - белсендіру, 'Esc' - шығу.
Әрқашан көрінетін фокус; outline бағдарламасын өшірмеу.
Фокус тұзақтары: модальдерде - циклдық фокус, жабылғаннан кейін фокусты қайнар көзге қайтару.
Жасырын элементтер таб-тәртіпке түспеуі керек (' display: none', 'aria-hidden =» true»').
Скип сілтемелері: «Негізгі мазмұнға өту» - беттің басында.

5) Түсі, контрасты және типографиясы

Мәтіннің қарама-қайшылығы: кемінде 4. Кәдімгі мәтін үшін 5:1 және ірі мәтін үшін 3:1.
Тек түске сүйенбеңіз: белгішемен/паттермен/қолтаңбамен қайталаңыз.
Түймеленетін мақсаттардың мөлшері: ең аз дегенде 40-48 px, айналадағы жеткілікті өрістер.
Қаріптер: оқылатын гарнитуралар, жоларалық 1. 4–1. 6. Жолдың ұзындығы 45-90 белгі.

6) Қозғалыс, анимация және эпилептогендік жарқыл

prefers-reduced-motion жүйелік жалаушасын құрметтеңіз - оңайлатылған анимацияларды қосыңыз/параллаксты өшіріңіз.
Жылтылдаудан аулақ болыңыз> 3 рет/сек.
Барлық авто қозғалыстарда Pause/Stop/Hide болуы тиіс.

7) Нысандар, қателер және валидация

Белгілер мен өрістерді анық байланыстырыңыз: '<label for = «id»>'.
Плейсхолдер - белгі емес.
Өрістің жанындағы және жоғарыдағы қателер жиынтығындағы қателер туралы хабарлар; 'aria-describedby' арқылы байланыстырыңыз.
Енгізу пішімін, мысал, масканы түсіндіріңіз; бірліктер мен валютаны көрсетіңіз.
Қате кезінде толтырылған өрістерді тастамаңыз; проблемалық өріске назар аударыңыз.

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) Компоненттер мен интерактив: паттерндер

Сілтеме vs батырмалары: әрекет = '<button>', өту = '<a>'.
Табалар/аккордеондар: навигация көрсеткілері, 'aria-controls', 'aria-selected'.
Модольдер/диалогтар: 'role = «dialog', 'aria-modal =» true', фокус тұзағы, 'Esc' жабылады.
Tooltip/Popover: пернетақта бойынша қол жетімділік, таймауттар оқуға кедергі келтірмейді.
Drag & Drop: балама - «жоғары/төмен жылжыту» түймешігі, пернетақталық көрсеткілер; оқиғалар тек тышқанмен ғана емес.

9) Медиа: бейне/аудио/графика

Бейне: субтитрлер, толық жазу (transcript), аудио-сипаттаманың баламалы жолы (AD).
Аудио: мәтінді ашып көрсету.
Графиктер/диаграммалар: мәтіндік түйіндеме («маңызды»), деректер кестесі, осьтердің сипаттамалық қолтаңбалары.
Тірі аумақтар: 'aria-live = "polite "/" assertive"' - өте жиі "айқайламау үшін абайлаңыз.

10) Кестелер мен тізімдер

11) i18n, локальдар және RTL

html түбіріндегі 'lang' төлсипаты; сандардың/күндердің/валюталардың жергілікті форматтары.
RTL қолдау (араб/иврит): иконкаларды айнала, навигация тәртібі, курсорлар.
Белгішеге тігілген сөздерден аулақ болыңыз (мәтін аударылатын болуы керек).
Қарапайым тұжырымдар, жаргонды болдырмау; терминдер глоссарийі.

12) Уақыт, сессия, капчи және балама

Таймауттар - ескерту және ұзарту мүмкіндігімен.
CAPTCHA: баламаларды таңдаңыз (сұрақтар, көзге көрінбейтін бот анализаторлары, пошта/телефон арқылы растау); егер пайдалансаңыз - тек көрнекі ғана емес, мәтіндік балама.
Аутентификация: парольдер менеджерлерін қолдау, «парольді көрсету», WebAuthn.

13) Сенсорлық және моторлық бұзылулар үшін қолжетімділік

Қимылда басу/пернетақта баламалары болуы тиіс.
Баламасыз ұзақ ұстауды/қосарланған таптарды талап етпеңіз.
«Pointer cancellation»: әрекетті болдырмау үшін «басу» емес, босатуға орындау керек.

14) Жай-күйлер, хабарламалар және алерталар

Динамикалық хабарлар үшін 'role = «status »/» alert» пайдаланыңыз.
Фокусты «жабысқақ» баннерлермен жаппаңыз.
Toast-хабарламалар - фокус/hover кезінде үзіліспен және пернетақтадан қатынаумен.

15) Тест-жоспар (қол және авто)

• Барлық негізгі сценарийлерді тек пернетақтамен өту.
• Әрбір элементтегі фокустың көрінуін тексеру.
• Ауқымын 200% -ға дейін ұлғайту - интерфейс көлденең скроллсыз функционалды болып қалады.
• Қозғалысты азайту жүйелік күйін қосу - анимацияларға кедергі келтірмейді.
• Скринридермен сценарийден өту (NVDA/VoiceOver), дұрыс рөлдерге/белгілерге/тәртіпке көз жеткізу.

• Компоненттер деңгейіндегі қол жетімділік линттері.
• Контрастты, баламалы мәтіндерді, тақырыптар тәртібін, ARIA дәлдігін тексеру.
• Критикалық экрандар үшін семантика снапшоттары (role tree).

16) Қол жетімділік сапасының өлшемдері

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

17) Компоненттің чек-парағы

• Артық ARIA жоқ дұрыс семантика/роль
• Қол қойылған белгілер, 'aria-' дұрыс
• Толық пернетақта басқарылуы, көрінетін фокус
• Мәтіннің/белгішенің/шектердің қарама-қайшылығы
• Қателер мен жағдайларды скринридер айтады
• Құрмет prefers-reduced-motion
• Басу аумағының өлшемі ≥ 40-48 px
• Локализация және RTL орналасуды бұзбайды

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

«Див-кнопкалар» рөлсіз/пернетақтасыз.
'outline: none' фокусын баламасыз жасыру.
label орнына плейсхолдер.
Тек түсті қателер.
Фокус ұстағышы жоқ және 'Esc' модулдері.
Drag-only пернетақтасыз.
Параметрсіз ұзын автобұралғыштар/параллакс өшірілсін.

19) Рөлдер және процесс

Командадағы A11y иесі (Product/Design/Dev).
Дефинишн-оф-дан (DoD) қол жетімділікті қамтиды.
Дизайн-ревью: контрастты, фокусты, лейблдерді тексеру.
Код-ревю: семантика/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">Подтвердите действие</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) Шағын FAQ

Нашар көретіндер үшін жеке нұсқа қажет пе?
Жоқ. Теңшелімдері бар барлық адамдар үшін бір бейімделген, қол жетімді нұсқа.

Тек қарама-қайшылықты тексеру жеткілікті ме?
Жоқ. Қарама-қарсылық - тек бір бөлігі. Пернетақта, фокус, семантика, форма-қателер, медиа және т.б. керек.

ARIA бәрін шеше ме?
ARIA дұрыс емес семантиканы түзете алмайды. Алдымен дұрыс тегтер, содан кейін ARIA-нақтылаулар.

Жиынтық

Қолжетімділік - бұл жүйелік пән: семантика → пернетақта/фокус → контраст/түс → пішін/қате → медиа/графика → i18n/RTL → тест-жоспар және метрика. DoD және команда мәдениетінің бір бөлігіне қол жеткізіңіз - өніміңіз шынымен әмбебап, сенімді және барлық адамдар үшін ыңғайлы болады.