Веб-сайтты қолжетімді ету: WCAG 2.2 бастауыш нұсқаулығы

Веб-сайтты қолжетімді ету үшін оны тек тінтуірмен емес, пернетақтамен, экран оқу құралымен, масштабтаумен немесе ауыстырғыш құрылғымен де пайдалануға болатындай жасаңыз: түймелер, сілтемелер, тақырыптар және форма белгілері үшін нақты HTML элементтерін қолданыңыз, суреттерге мағыналы alt мәтінін беріңіз, мәтін контрастын жоғары ұстаңыз және фокусты көрінетін етіңіз. Бағыттайтын стандарт – WCAG 2.2 Level AA. Автоматты тексерушілер мәселенің бір бөлігін табады; он минуттық пернетақта және экран оқушысы сынағы қалғанының көбін табады.

Практикада «қолжетімді» дегеніміз не

Қолжетімділік адамдар туралы: көзі көрмейтін және экран оқушысын пайдаланатын адам, тремор бар және пернетақтамен жүретін адам, нашар көретін және 200%-ға дейін үлкейтетін адам, күн сәулесінде оқитын адам, уақытша қолы сынған адам. Жақсы қолжетімділік сайтты барлығы үшін жақсартады – айқын құрылым, оқуға ыңғайлы мәтін, қателерін түсіндіретін формалар.

Силтеме стандарт – W3C-тың Web Content Accessibility Guidelines (WCAG). 2026 жылдың қыркүйегіндегі жағдай бойынша ағымдағы нұсқа – WCAG 2.2 (2023 жылдың қазанында жарияланған, 2024 жылдың желтоқсанында жаңартылған); WCAG 3 ерте жоба. WCAG төрт қағидаға негізделген – мазмұн қабылданатын, басқарылатын, түсінікті және берік болуы керек – және үш деңгейі бар:

Бірнеше елдің заңдары WCAG-қа сілтеме жасайды – мысалы, Еуропалық қолжетімділік туралы заң (European Accessibility Act), ол 2025 жылдың маусымынан бастап ЕО-дағы тұтынушыға арналған цифрлық қызметтердің көпшілігіне қолданылады. Қай ережелер сізге қатысты екені операция жасайтын жеріңізге және сатқаныңызға байланысты; күмәнда кеңесшіге хабарлаңыз. Бұл нұсқаулық практикалық жұмысқа арналған.

Жетудің жолдары

Көп шағын сайт үшін алғашқы екеуі жеткілікті: AI-ға бастан қолжетімді жасауды айтыңыз, содан кейін іске қосар алдында аудит жасаңыз.

Ең маңызды түзетулер

Дұрыс HTML элементтерін қолданыңыз

Көп қолжетімділік дұрыс HTML-мен тегін келеді. <button> фокусталады, Enter және Space-пен жұмыс істейді және түйме ретінде айтылады. Басқару үшін click handler қосылған <div> мұндай ештеңе емес. AI жазған код кейде бәріне безендірілген div қолданады; семантикалық элементтерді сұраңыз:

• Әрекеттер үшін <button>, навигация үшін <a href>
• Бетте бір <h1>, одан кейін реті бойынша <h2>, <h3> – экран оқушысының пайдаланушылары тақырыптар арасында секіреді
• Ориентирлер: <header>, <nav>, <main>, <footer>
• Әр форма өрісімен байланыстырылған <label>
• <html lang="en"> ішінде беттің тілі

ARIA атрибуттарын тек жергілікті элемент сәйкес келмегенде қолданыңыз – теңшелген қойынды жиынтығы немесе combobox үшін. Дұрыс емес ARIA жоқтан да нашар.

Пернетақта қолжетімділігі және көрінетін фокус

Тінтуірмен жасалатын барлық нәрсе тек пернетақтамен де жасалуы керек (WCAG 2.1.1). Бет бойынша Tab басыңыз: әр сілтеме, түйме және өріс логикалық ретпен жетуі керек, және фокус қай жерде екенін әрдайым көру керек (2.4.7 Focus Visible). WCAG 2.2 қосқан: фокусталған элемент жабысқақ тақырыптың немесе cookie баннердің артында толық жасырылмауы керек (2.4.11, Level AA).

Жиі кездесетін қателер: тек hover-де ашылатын мәзірлер, Escape-пен жабылмайтын немесе фокусты ұстамайтын модалдар, және CSS-те outline: none орнына ешнәрсесі жоқ.

Мәтіндік баламалар

Әр мағыналы сурет контексте не көрсетіп тұрғанын айтатын alt мәтінін қажет етеді («Шеф дегустациялық мәзірді безендіріп жатыр», «image1.jpg» емес). Декоративті суреттерге экран оқушысы өткізіп жіберуі үшін бос alt="" беріледі. Тек белгішеден тұратын түймелердің қолжетімді аты болуы керек («Жабу», «Іздеу»). Бейнелерге субтитр, аудиоға транскрипт керек.

Түс және контраст

WCAG 2.2 AA қалыпты мәтін үшін кемінде 4,5:1 (1.4.3), ірі мәтін үшін 3:1, ал енгізу шекаралары мен мағыналы белгішелер сияқты интерфейс бөліктері үшін 3:1 контраст қатынасын талап етеді (1.4.11). Жиі сәтсіз болатыны – ашық сұр placeholder мәтіні және бозғылт түймелер. Сондай-ақ мағынаны тек түспен жеткізбеңіз – жарамсыз өрістегі қызыл шекараға қате хабары да керек.

Өлшемді өзгерту және реттеу

Мәтін 200%-ға дейін үлкейгенде жұмыс істеуі керек (1.4.4), ал мазмұн 320 CSS пикселдік ені бойынша көлденең айналдырмай жұмыс істеуі керек (1.4.10). Дұрыс бейімделгіш макет көп мәселені шешеді.

Нысаналар, формалар және қателер

• Нысана өлшемі: WCAG 2.2 AA көрсеткіш нысаналары кемінде 24 х 24 CSS пиксель, немесе кішірек болса, айналасында жеткілікті бос орын талап етеді (2.5.8). Телефонда үлкен болу ыңғайлырақ.
• Формалар: көрінетін белгілер (тек placeholder емес), айқын нұсқаулар, және қате хабарлары – не дұрыс емес екенін және оны қалай түзету керектігін өріс жанында айтатын.
• Кіру: адамдарды жұмбақ шешуге немесе кодты баламасыз көшіруге мәжбүрлемеңіз; құпия сөз менеджерлері мен қоюға рұқсат беріңіз (3.3.8 Accessible Authentication).

Жұмыс істейтін промпттар

Бұл сайтты WCAG 2.2 Level AA деңгейіне сай жасаңыз: семантикалық HTML ориентирлері, бетте бір h1 және реті бойынша тақырыптар, нақты button және link элементтері, әр форма өрісінде белгілер, көрінетін фокус стильдері, мәтін контрастына кемінде 4,5:1, мағыналы суреттерде alt мәтіні, декоративтілерде alt="", және html lang орнатылған.

/signup және /checkout беттерін қолжетімділікке аудит жасаңыз. Тек пернетақта қолдануды, фокус ретін, көрінетін фокусты, белгілерді, қате хабарларын, контрастты және белгішелі түймелердің экран оқушысы атауларын тексеріңіз. Әр мәселені WCAG критерийімен тізіңіз, содан кейін визуалды дизайнды қажетінше аз өзгертіп түзетіңіз.

Мобильді мәзірді пернетақтамен пайдалану мүмкін емес. Оны aria-expanded бар түймеге айналдырыңыз, ашылғанда фокусты мәзірге жылжытыңыз, Escape-пен жабыңыз және фокусты түймеге қайтарыңыз.

Қадамдап

1. Автоматты тексеруді іске қосыңыз. Chrome DevTools-тағы Lighthouse-тың Accessibility бөлімі, немесе axe браузер кеңейтімі, әр негізгі бетте. Олар көрсеткеннің бәрін түзетіңіз.
2. Тінтуірді ажыратыңыз. Әр бетте Tab басып, барлық негізгі тапсырманы аяқтаңыз – тіркелу, іздеу, төлем. Жетпейтін, фокусы көрінбейтін немесе шыға алмайтын жерді жазып алыңыз.
3. 200%-ға дейін үлкейтіңіз және терезені телефон енінде тарлаңыз. Ештеңе кесілмеуі немесе көлденең айналдыруды қажет етпеуі керек.
4. Он минут экран оқушысын сынаңыз: Mac және iPhone-да VoiceOver, Android-та TalkBack, немесе Windows-та NVDA (тегін). Тақырыптарды, сілтемелерді және форма өрістерін тыңдаңыз. Аты жоқ «түйме» немесе «сілтеме, мұнда басыңыз» – жұмыс қалды дегенді білдіреді.
5. Контрастты тексеріңіз мәтін, түймелер және енгізу өрістері үшін контраст тексерушімен.
6. Түзетіңіз, содан кейін сол тапсырмаларды қайта сынаңыз.
7. Қолжетімділік мәлімдемесін жариялаңыз – қандай стандартқа ұмтылатыныңызды және мәселелерді қалай хабарлауға болатынын айтып, сол хабарларға жауап беріңіз.

Жиі кездесетін қателер

• Оверлей виджетіне сену коды түзету орнына.
• Фокус жиектерін алып тастау әдемі болмай көрінеді деп, орнына ештеңе қоймай.
• Placeholder мәтінін жалғыз белгі ретінде пайдалану. Адам теруді бастаған кезде ол жоғалады және жиі контрасты әлсіз болады.
• «Мұнда басыңыз» және «Толығырақ» сілтемелері. Контексіз экран оқушысының пайдаланушысы бірдей сілтемелер тізімін естиді.
• Alt мәтініне кілт сөз толтыру. Alt мәтіні адамдарға арналған; суретті сипаттаңыз.
• Бір рет тексеру. Әр жаңа функция пернетақта қолжетімділігін бұзуы мүмкін. Іске қосар алдындағы сынақ тізіміне пернетақта өтуін қосыңыз.

Қолжетімділік чек-листі

• Негізгі беттерде автоматты тексеру (Lighthouse немесе axe) таза
• Әр тапсырманы тек пернетақтамен аяқтауға болады
• Фокус әрдайым көрінеді және жабысқақ элементтердің артында жасырылмайды
• Семантикалық тақырыптар, ориентирлер, түймелер және сілтемелер; lang орнатылған
• Мағыналы alt мәтіні; декоративті суреттерде alt=""; бейнеде субтитр
• Мәтін контрасты ≥ 4,5:1 (ірі мәтін ≥ 3:1); UI бөліктері ≥ 3:1
• 200% масштаб және 320 px ені кезінде жұмыс істейді
• Әр форма өрісінде көрінетін белгі және айқын қате хабарлары бар
• Мәселелерді хабарлау жолы бар қолжетімділік мәлімдемесі

Осы ұғымдардың негізін веб қолжетімділігі дегеніміз не нұсқаулығынан оқыңыз. Қолжетімді дизайн мен жақсы дизайн көп ортақ; көрнекі жағы үшін AI арқылы әдемі қолданба жасау қараңыз.

Mythex-те қолжетімділік

Mythex сіз сұраған стандартпен құрастырады, сондықтан бірінші промптқа және кейінгі сұраулардың бәріне «WCAG 2.2 AA» деп жазыңыз. Алдын ала қаражаттағы телефон өлшемді жақтауды тексеру үшін пайдалана аласыз (Preview and Code), бірақ пернетақта, масштаб және экран оқушысы сынақтары жарияланған URL-де немесе алдын ала қараудың өз қойындысында жақсы жұмыс істейді. Агенттен бетті аудит жасауын, табылғанды түзетуін сұраңыз, содан кейін түзетулерді өзіңіз сынаңыз: автоматты өту – бастама, соңғы қорытынды емес.

Сұрақтар