Мавҷудияти UX ва интерфейс барои ҳама

1) Чаро ин муҳим аст

Аз ҷиҳати ҳуқуқӣ ва ахлоқӣ: интерфейс набояд одамони дорои нуқсонҳои визуалӣ, шунавоӣ, моторӣ, маърифатиро истисно кунад.
Таъсири тиҷорат: шумораи бештари корбарон, табдили баландтар ва нигоҳдорӣ, SEO ва сифати беҳтар.
Амалиётӣ: Дастрасӣ равандест, на "ислоҳи тасодуфӣ".

2) Асосҳо ва принсипҳо (POUR)

Дарк: контраст, матнҳои алтернативӣ, субтитрҳо.
Кор: ҳама чиз аз клавиатура, фокуси намоён, аниматсияҳои таваққуф/таваққуф дастрас аст.
Фаҳмиш: паймоиши пешгӯишаванда, хатогиҳои возеҳ, формулаҳои оддӣ.
Устувор: семантикаи дурусти HTML/ARIA, мутобиқат бо технологияҳои ёрирасон.

3) Семантика, унвонҳо ва ARIAs

Нишондиҳандаи семантикӣ пеш аз ARIA: '<тугма>', '<nav>', '<form>', '<table>' - аз рӯи мақсад.
Иерархияи сарлавҳа: як '<h1>' дар як саҳифа, пас сохтори мантиқӣ '<h2>' - '<h3>'.
Нишонаҳо: '<сарлавҳа>', '<main>', '<side>', '<footer>', '<nav>' - ба хонандагони экран кӯмак кунед.
ARIA танҳо дар ҳолати зарурӣ: 'нақш', 'aria-label', 'aria-тавсиф', 'aria-васеъшуда', 'aria-live'.
Давлатҳо/хатогиҳо тавассути 'aria-беэътибор', 'aria-хато'.

4) Идоракунии клавиатура ва фокус

Назорати пурраи клавиатура: 'Tab/Shift + Tab' - фармоиш, 'Enter/Space' - фаъол кардан, 'Esc' - баромад.
Фокуси намоён ҳамеша; контурро хомӯш накунед.
Домҳои фокус: дар модалҳо - фокуси даврӣ, пас аз пӯшидани фокус ба манбаъ бармегардад.
Унсурҳои пинҳон набояд ба тартиби ҷадвал дохил шаванд (' намоиш: ҳеҷ', 'aria-пинҳон =" ҳақиқӣ"').
Гузарондани истинодҳо: "Гузаштан ба мундариҷаи асосӣ" - дар аввали саҳифа.

5) Ранг, контраст ва типография

Муқоисаи матн: ҳадди аққал 4. 5:1 барои матни оддӣ ва 3:1 барои матни калон.
Танҳо ба ранг такя накунед: такрорӣ бо нишона/намуна/имзо.
Андозаи ҳадафҳои клик: ҳадди аққал 40-48 px, майдонҳои кофӣ дар атрофи.
Ҳуруфҳо: ҳуруфҳои хондан, сатр ба хати 1. 4–1. 6, дарозии сатр 45-90 аломат.

6) Ҳаракат, аниматсияҳо ва дурахши эпилептогенӣ

Эҳтиром ба система парчами коҳишёфтаро афзалтар медонад - аниматсияҳои соддакардашуда/параллакси ғайрифаъолро илова кунед.
Аз фликтерҳо> 3 маротиба/сония дурӣ ҷӯед.
Ҳама ҳаракатҳои худкор бояд таваққуф/таваққуф/пинҳон дошта бошанд.

7) Шаклҳо, хатогиҳо ва тасдиқкунӣ

Тамғакоғазҳо ва майдонҳоро ба таври возеҳ пайванд кунед: '<label for = "id">'.
Ҷойгиркунӣ нишона нест.
Иттилоотҳои хатогӣ дар паҳлӯи майдон ва дар ҷамъбасти хатогӣ дар боло; тавассути 'aria-тавсифшуда' бандед.
Формати вурудро шарҳ диҳед, масалан, ниқоб; Воҳидҳо ва асъорро муайян кунед.
Ҳангоми рух додани хатогӣ майдонҳои анҷомдодашударо аз нав барқарор накунед; диққати худро ба майдони мушкилот равона кунед.

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

Тугмаҳо ва пайвандҳо: амал = '<тугма>', jump = '<a>'.
Ҷадвалҳо/аккордеонҳо: тирҳои навигатсионӣ, 'aria-control', 'aria-интихобшуда'.
Модалҳо/муколамаҳо: 'нақш = "муколама"', 'aria-modal = "ҳақиқӣ"', доми фокус, 'Esc' пӯшида мешавад.
Tooltip/Popover: дастрасии клавиатура, танаффус ба хондан халал намерасонад.
Кашидан ва партофтан: алтернативаҳо - тугмаҳои боло/поён, тирҳои клавиатура; ҳодисаҳо на танҳо бо муш.

9) ВАО: Видео/Аудио/Графика

Видео: субтитрҳо, транскрипт, тасвири алтернативии аудио (AD).
Аудио: матни матн.
Графҳо/диаграммаҳо: хулосаи матн ("чӣ муҳим аст"), ҷадвали маълумот, нишонаҳои тавсифии меҳварҳо.
Минтақаҳои зиндагӣ: 'aria-live = "хушмуомила "/" эътимодбахш "'- эҳтиёт шавед, ки зуд-зуд" фарёд накунед ".

10) Ҷадвалҳо ва рӯйхатҳо

11) i18n, маҳалҳо ва RTL

Хусусияти 'lang' дар решаи html; рақами маҳаллӣ/сана/форматҳои асъорӣ.
Дастгирии RTL (арабӣ/ибрӣ): нишонаҳои оинаӣ, тартиби паймоиш, курсорҳо.
Аз калимаҳое, ки ба нишонаҳо дӯхта шудаанд, дурӣ ҷӯед (матн бояд тарҷумашаванда бошад).
Формулаҳои оддӣ, аз жаргон дурӣ ҷӯед; луғати истилоҳот.

12) Вақт, ҷаласаҳо, captchas ва алтернативаҳо

Вақти истироҳат - бо огоҳӣ ва қобилияти дароз кардан.
CAPTCHA: алтернативаҳоро афзалтар медонад (саволҳо, таҳлилгарони ноаён, тасдиқи почта/телефон); агар шумо истифода баред - матни алтернативӣ ва на танҳо визуалӣ.
Аутентификатсия: дастгирии менеҷерони парол, "нишон додани гузарвожа", Web-Authn.

13) Дастрасӣ ба нуқсонҳои ҳиссиётӣ ва моторӣ

Имову ишора бояд муодили клик/клавиатура дошта бошад.
Бе алтернатива нигоҳ доштани дароз/лӯлаҳои дукарата талаб карда намешавад.
"Бекор кардани нишондиҳанда": амал бояд на дар "матбуот", балки барои озод кардани он бояд иҷро карда шавад.

14) Давлатҳо, огоҳиҳо ва огоҳиҳо

Истифодаи 'role = "status "/" ҳушдор "'барои паёмҳои динамикӣ.
Диққати худро бо баннерҳои часпанда пӯшонед.
Огоҳиҳои тост - бо таваққуф дар фокус/hover ва дастрасӣ аз клавиатура.

15) Нақшаи санҷиш (дастӣ ва худкор)

• Гузаронидани ҳамаи скриптҳои калидӣ танҳо бо клавиатура.
• Намоиши фокусро дар ҳар як ҷузъ санҷед.
• Масштаб то 200% - интерфейс бе ҳаракати уфуқӣ функсионалӣ боқӣ мемонад.
• Ҳолати системаи "кам кардани ҳаракат" -ро фурӯзон кунед - аниматсияҳо халал намерасонанд.
• Скриптро бо хонандаи экран (NVDA/VoICE) гузаронед, боварӣ ҳосил намоед, ки нақшҳо/барчаспҳо/фармоиш дурустанд.

• Линкҳои дастрасии сатҳи компонентӣ.
• Контраст, матнҳои алтернативӣ, фармоиши сарлавҳа, эътибори ARIA -ро санҷед.
• Суратҳои семантикӣ (дарахти нақш) барои экранҳои интиқодӣ.

16) Нишондиҳандаҳои сифати дастрасӣ

A11y фарогирӣ: таносуби ҷузъҳо бо рӯйхати пурраи назоратӣ.
Меъёри танҳо гузариши клавиатура: фоизи скриптҳои тавассути клавиатура гузаранда.
Унсурҳои Violations/1k муқоиса кунед.
Вақти ҷараёни SR: Вақти иҷрои скрипт бо хонандаи экран.
Фикру мулоҳизаҳои корбар: шикоятҳо дар бораи мавҷудият, вақти посух ва ислоҳ.

17) Рӯйхати назоратии компонентҳо

• Семантика/нақшро бе ARIA зиёдатӣ ислоҳ кунед
• Нишонаҳои имзошуда, 'aria-' дуруст
• Назорати пурраи клавиатура, фокуси намоён
• Матн/нишона/контрасти сарҳад муқаррарӣ аст
• Хатогиҳо ва шартҳо аз ҷониби хонандаи экран садо медиҳанд
• Эҳтиром ҳаракатро коҳиш медиҳад
• Андозаи минтақаи clickable ≥ 40-48 px
• Маҳаллисозӣ ва RTL тарҳро вайрон намекунанд

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

"Div-тугмаҳо" бидуни нақш/клавиатура.
"Контур: ҳеҷ чиз" -ро бидуни алтернатива пинҳон мекунад.
Ҷойгузин ба ҷои нишона.
Хатоҳо танҳо дар ранг.
Модалҳо бе доми фокус ва бе 'Esc'.
Кашидан танҳо бе клавиатура.
Параллакси дарозмӯҳлати худкор/параллакс бе интихоби ғайрифаъол.

19) Нақшҳо ва раванд

A11y-owner дар фармон (Product/Design/Dev).
Таърифи маълумот (Do-D) мавҷудиятро дар бар мегирад.
Шарҳи тарроҳӣ: санҷиши контраст, фокус, тамғакоғазҳо.
Шарҳи код: семантика/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 § нақшаи санҷиш ва ченакҳо. Қисми дастрасиро ба фарҳанги гурӯҳӣ ва дастаҷамъӣ созед - ва маҳсулоти шумо барои ҳама воқеан бисёрҷониба, боэътимод ва қулай хоҳад буд.