Веб-қолжетімділік дегеніміз не? WCAG және инклюзивті дизайн түсіндірмесі

Веб-қолжетімділік — веб-сайттар мен қолданбаларды мүгедектігі бар адамдар пайдалана алатындай етіп құру: соқыр адам экран оқу құралын пайдаланса, тышқанды қолдана алмаса, нашар көрсе немесе түстерді ажырата алмаса, есітпесе, немесе когнитивтік немесе оқу мүгедектігі болса да. Практикада бұл суреттерге арналған мәтіндік балама, жеткілікті түс контрасты, дұрыс жапсырмалары бар формалар және бәрінің тек пернетақтамен жұмыс істеуі сияқты нәрселерге келеді. Оның халықаралық стандарты — WCAG, W3C ұйымының Web Content Accessibility Guidelines нұсқаулары.

Қолжетімділікті жиі a11y деп қысқартады — «a», содан кейін 11 әріп, содан кейін «y».

AI көмегімен құрастырғанда қолжетімділік неге маңызды

AI құрастырушылар дұрыс көрінетін қолданбалар жасауда жақсы. Қолжетімділік көбіне скриншотта көрінбейтін нәрселерге қатысты: түйме шын мәнінде түйме ме, енгізу өрісінің экран оқу құралы айта алатын жапсырмасы бар ма, мәзірге Tab пернесімен жетуге бола ма.

Сондықтан мынаны сұрау маңызды:

• Оны оңай жіберіп алуға болады. Теңшелген ашылмалы тізім керемет көрінуі мүмкін, бірақ тышқансыз мүлде пайдалануға болмайды. Тексермейінше байқамайсыз.
• Оны ерте дұрыс жасау арзанырақ. Бірінші сұраныстан бастап қолжетімді компоненттерді сұрау деректі шығындайды. Дайын қолданбаны кейін түзету барлық экранға қол тигізуді қажет етеді.
• Ол бәріне көмектеседі. Субтитрлер шулы жерде отырғандарға, жақсы контраст күнге қарсы телефонда отырғандарға, анық жапсырмалар барлығына формаларды тез толтыруға көмектеседі.
• Ол SEO-мен қабаттасады. Дұрыс тақырыптар, сипаттамалы сілтемелер және alt мәтіндері іздеу жүйелеріне беттеріңізді түсінуге көмектеседі — қараңыз: AI арқылы салынған сайттарға арналған SEO.
• Ол талап етілуі мүмкін. Қайда жұмыс істейтініңізге және кімге қызмет көрсететініңізге байланысты қолжетімділік заңды міндеттеме болуы мүмкін.

Күнделікті ұқсастық

Ғимараттың кіреберісін елестетіңіз.

Баспалдақтар көптеген адамға жақсы жұмыс істейді. Пандус арбаға отырған адамдарға жарайды — сонымен қатар коляскамен жүретін ата-аналарға, арбамен жүк тасушыларға және чемоданмен саяхатшыларға да. Автоматты есіктер, анық белгілер, лифт түймелеріндегі брайль және жақсы жарық әр адам үшін кедергіні жояды.

Веб-қолжетімділік — цифрлық кеңістік үшін дәл осы идея: қолданбаңыздың пандустары, белгілері және тұтқалары. Ғимарат сияқты, пандусты жоспарға қосу, бетон қатып қалғаннан кейін қосқаннан әлдеқайда оңай.

WCAG қысқаша

WCAG W3C-тің Web Accessibility Initiative бөлімі жариялайды. Қазіргі нұсқасы — WCAG 2.2, ол алғаш рет 2023 жылдың қазан айында жарияланған. Ол кері үйлесімді: WCAG 2.2-ге сай мазмұн 2.1 және 2.0 талаптарына да сай келеді, ал W3C соңғы нұсқаны пайдалануға шақырады. WCAG 2.2 халықаралық стандарт ретінде де бекітілген, ISO/IEC 40500:2025. Мүлде басқа WCAG 3 ерте нобай ретінде әзірленуде, бітті стандарт емес.

WCAG төрт принцип бойынша ұйымдастырылған, оны жиі POUR деп есте сақтайды:

Әр нұсқаулықта үш деңгейде тексерілетін сәттілік критерийлері бар:

• A деңгейі — минимум. Оларды сақтамау кейбір адамдарды толық тоқтатады.
• AA деңгейі — стандартты мақсат, көптеген заңдар мен саясаттар сілтеме жасайтын деңгей.
• AAA деңгейі — ең жоғары деңгей. Кейбір жерлерде көздеу пайдалы, бірақ W3C оны бүкіл сайттар үшін міндеттеуге кеңес бермейді, себебі кейбір мазмұн оған сай келмейді.

WCAG 2.2 2.1-ге тоғыз сәттілік критерийін қосты, оның ішінде AA деңгейіндегі Target Size (Minimum) — басуға болатын элементтер әдетте кемінде 24 × 24 CSS пикселі болуы керек, ерекшеліктермен — және Accessible Authentication (Minimum), ол жадқа немесе жұмбаққа сүйенетін кіру қадамдарын шектейді, мысалы құпия сөзді қойып алуға рұқсат бермей, қайта теру. Сонымен қатар ескірген «Parsing» критерийін жойды.

Жұмыс мысалы: тіркелу формасы

AI шығаруы мүмкін тіркелу формасы мен қолжетімділік тексеруінің тапқан нәрсесі мынау:

Бұл түзетулердің ешқайсысы форманың көрінісін едәуір өзгертпейді. Олардың барлығы кейбір адамдардың оны мүлде пайдалана алатынын өзгертеді.

Негізгі терминдер

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

• «Қолжетімділік тек соқыр пайдаланушылар үшін маңызды». Ол көру, қозғалыс, есту, сөйлеу және когнитивтік мүгедектіктерді, сондай-ақ сынған қол сияқты уақытша жағдайларды қамтиды.
• «Қолжетімді сайттар жалаң көрінеді». Қолжетімділік бірнеше нәрсені шектейді — контраст, фокус стильдері, мәтін өлшемі — бірақ жақсы көрінетін қолжетімді сайттар — ерекшелік емес, қалыпты жағдай.
• «Автоматты тексеруші 100 деп көрсетті, демек бітті». Автоматты құралдар мәселелердің тек бір бөлігін табады. Alt мәтінінің шын мәнінде мәнді ме, әлде экран оқу құралымен ағын түсінікті ме — оны адам тексеруі керек.
• «Оверлей виджеті бізді сәйкестендіреді». Үстіне жабыстырылған панель кодыңыздағы жоқ жапсырмаларды немесе бұзылған пернетақта қолжетімділігін түзете алмайды. Бастапқы көзін түзетіңіз.
• «Бізде мүгедек пайдаланушылар жоқ». Сіз жай ғана білмейтін шығарсыз. Көп мүгедектік көрінбейді, ал кедергіге тап болған адамдар әдетте жай ғана кетіп қалады.

AI құрастырушыңыздан не сұрау керек

• «Мұны WCAG 2.2 AA деңгейіне сай етіп құрастырыңыз.»
• «Семантикалық HTML пайдаланыңыз: нақты түймелер, сілтемелер, ретімен орналасқан тақырыптар және әр форма өрісіне жапсырмалар.»
• «Әр интерактивті элемент тек пернетақтамен жұмыс істейтінін және көрінетін фокус стилі барын қамтамасыз етіңіз.»
• «Барлық мәтін мен белгіше түстерінің контрастын тексеріңіз — қалыпты мәтінге 4,5:1, үлкен мәтін мен белгішелерге 3:1.»
• «Ақпараттық суреттерге мәнді alt мәтінін, декоративтілеріне бос alt қосыңыз.»
• «Форма қателерін тек түспен емес, өріске байланған мәтін ретінде көрсетіңіз.»
• «Анимациялар үшін пайдаланушының қозғалысты азайту баптауын құрметтеңіз.»
• «Автоматты қолжетімділік тексерісін іске қосып, оның тексере алмайтындарының тізімін беріңіз, мен оларды қолмен тексеремін.»

Содан кейін өзіңіз тексеріңіз: тышқанды бір жаққа қойып, негізгі ағынды тек Tab, Shift+Tab, Enter және Space пернелерімен аяқтауға тырысыңыз. Телефоныңыздың кірістірілген экран оқу құралын негізгі бетте іске қосыңыз. Браузерді 200% масштабтап, бірдеңе бұзылатынын қараңыз.

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

Mythex арнайы қолжетімділік тексерушісін қамтымайды, сондықтан қолжетімділікті сұраныстарыңыздың және тестілеудің бөлігі ретінде қараңыз. Бірінші сұраныстан бастап WCAG 2.2 AA сұраңыз, нәтижені Preview-да пернетақтамен тексеріңіз және жариялар алдында негізгі ағындарыңызды агентке /test арқылы басып шығуға рұқсат етіңіз — қараңыз: App Testing. SEO рецепті да семантикалық тақырыптар мен мәнді alt мәтінін сұрайды, бұл екі мақсатқа да қызмет етеді.

Практикалық тексеру тізімі үшін сайтыңызды қолжетімді ету жолын қараңыз. Дизайн үшін AI көмегімен жақсы көрінетін қолданба қалай жасалады бетін оқыңыз, ал іске қосар алдында қолданбаңызды іске қосар алдында қалай тексеру керек бетін қараңыз. W3C-тің өз WCAG шолуы — беделді дереккөз.

Сұрақтар