Што е веб-пристапност? WCAG и инклузивен дизајн објаснети
Веб-пристапноста значи градење веб сајтови и апликации така што луѓето со попреченост можат да ги користат — дали се слепи и користат читач на екран, не можат да користат глушец, имаат слаб вид или слепило за бои, се глуви или имаат когнитивна или учебна попреченост. Во пракса се сведува на работи како текстуални алтернативи за слики, доволен контраст на боите, формулари со правилни ознаки и сè да работи само со тастатура. Меѓународниот стандард за неа е WCAG, Web Content Accessibility Guidelines од W3C.
Пристапноста често се скратува како a11y — „a“, потоа 11 букви, потоа „y“.
Зошто пристапноста е важна кога градите со вештачка интелигенција
AI градителите се добри во производство на апликации што изгледаат точно. Пристапноста најмногу е за она што не можете да го видите на снимката од екранот: дали копчето е навистина копче, дали полето има ознака што читачот на екран може да ја најави, дали менито може да се достигне со Tab копчето.
Затоа вреди да се прашате:
- Лесно се пропушта. Прилагоден падечки мени може да изгледа совршено, а да е невозможно да се користи без глушец. Нема да забележите освен ако не тестирате за тоа.
- Поевтино е да се добие правилно однапред. Барањето пристапни компоненти од првиот prompt чини речиси ништо. Дообликувањето на готова апликација значи допирање до секој екран.
- Им помага на сите. Титловите помагаат на луѓето во бучни места, добриот контраст помага на луѓето на телефони на сонце, а јасните ознаки му помагаат на секој побрзо да пополни формулар.
- Се преклопува со SEO. Правилните наслови, описните линкови и alt текст им помагаат и на пребарувачите да ги разберат вашите страници — видете SEO за веб-сајтови направени со AI.
- Може да е задолжително. Зависно каде работите и кому служите, пристапноста може да е законска обврска.
Секојдневна аналогија
Замислете влез во зграда.
Степениците добро функционираат за многу луѓе. Рампата работи за корисниците на инвалидска количка — и за родителите со количка, работниците со колички за достава и патниците со куфери. Автоматските врати, јасните знаци, брајевото писмо на копчињата на лифтот и добро осветлување секој отстрануваат пречка за некого.
Веб-пристапноста е истата идеја за дигиталните простори: рампите, знаците и рачките на вашата апликација. И како зградата, многу полесно е рампата да се вгради во плановите отколку да се додаде откако ќе се излее бетонот.
WCAG накратко
WCAG го објавува Web Accessibility Initiative на W3C. Тековната верзија е WCAG 2.2, прво објавена во октомври 2023. Таа е назад компатибилна: содржината што ги исполнува WCAG 2.2 ги исполнува и 2.1 и 2.0, а W3C препорачува да се користи најновата верзија. WCAG 2.2 е исто така одобрен меѓународен стандард, ISO/IEC 40500:2025. Многу поинаква WCAG 3 е во развој како рана нацрт верзија, а не како завршен стандард.
WCAG е организиран под четири принципи, кои често се памтат како POUR:
| Принцип | Значење | Примери |
|---|---|---|
| Perceivable (Перцептивност) | Луѓето можат да ја сфатат содржината со чувствата што ги користат | Alt текст за слики, титлови за видео, доволен контраст |
| Operable (Оперативност) | Луѓето можат да ги користат контролите и да навигираат | Пристап со тастатура, без временски ограничувања што не можат да се продолжат, видлив фокус |
| Understandable (Разбирливост) | Содржината и однесувањето се логични | Јасни ознаки, корисни пораки за грешки, конзистентна навигација |
| Robust (Издржливост) | Работи со повеќе прелистувачи и помошни технологии | Правилни HTML елементи, точни имиња и улоги за контролите |
Секој упатство има проверливи критериуми за успешност на три нивоа:
- Ниво A — минимумот. Неуспехот тука целосно блокира некои луѓе.
- Ниво AA — стандардната цел, и нивото на кое се повикуваат повеќето закони и политики.
- Ниво AAA — највисокото ниво. Корисно е да се стреми кон него на места, но W3C не препорачува да се бара за цели сајтови, бидејќи некоја содржина не може да го исполни.
WCAG 2.2 додаде девет критериуми за успешност на 2.1, вклучително Target Size (Minimum) на ниво AA — елементите за клик генерално треба да бидат најмалку 24 на 24 CSS пиксели, со исклучоци — и Accessible Authentication (Minimum), што ги ограничува чекорите за најава што се потпираат на меморија или загатки, како на пример мора да ја внесете лозинката повторно без да смеете да ја залепите. Исто така го отстрани стариот критериум „Parsing“ како застарен.
Практичен пример: формулар за регистрација
Еве формулар за регистрација што AI може да го произведе и што најде пристапноста проверка:
| Проблем | Кого погодува | Поправка |
|---|---|---|
| Полињата користат placeholder текст („Email“) наместо ознаки | Корисници на читачи на екран; секој што заборава што било полето штом ќе почне да пишува | Видлива <label> поврзана со секое поле |
| Светло сив текст на бело, далеку под контраст 4,5:1 | Луѓе со слаб вид, секој на отворено | Потемен текст што го исполнува односот на контраст 4,5:1 |
| Грешките се прикажани само како црвена рамка | Луѓе со слепило за бои, корисници на читачи на екран | Текстуална порака до полето, најавена на читачите на екран |
„Sign up“ е стилизиран <div>, а не <button> | Корисниците со тастатура и читач на екран не можат да го активираат | Користете вистински <button> елемент |
| Нема видлив контур при Tab низ полињата | Корисниците со тастатура ја губат позицијата | Јасен стил за фокус |
| Сликата на логото нема alt текст | Корисниците на читачи на екран слушаат име на датотека | Alt текст како „Acme Bookings“ |
Ниедна од овие поправки не го менува многу изгледот на формуларот. Сите го менуваат тоа дали некои луѓе воопшто можат да го користат.
Клучни термини
| Термин | Значење |
|---|---|
| Читач на екран | Софтвер што го чита екранот наглас или на брајов дисплеј, како VoiceOver, NVDA или JAWS. |
| Alt текст | Текстуален опис на слика, што го читаат читачите на екран. Декоративните слики добиваат празен alt за да се прескокнат. |
| Однос на контраст | Колку се разликуваат боите на текстот и позадината, од 1:1 до 21:1. |
| Навигација со тастатура | Користење на сајтот со Tab, Enter, Space и стрелки наместо глушец. |
| Индикатор за фокус | Видливиот контур што покажува на кој елемент е тастатурата. |
| Семантички HTML | Користење на вистинскиот елемент за работата — <button>, <nav>, <h2> — за прелистувачите и помошната технологија да ја разберат страницата. |
| ARIA | Дополнителни атрибути што ги опишуваат прилагодените контроли за помошната технологија. Најдобро е штедливо; природните HTML елементи се прво. |
| Помошна технологија | Алатки што луѓето ги користат за пристап до компјутери, од читачи на екран до switch уреди и гласовна контрола. |
Вообичаени заблуди
- „Пристапноста е важна само за слепите корисници.“ Таа ги опфаќа визуелните, моторните, слушните, говорните и когнитивните попречености, како и привремени состојби како скршена рака.
- „Пристапните сајтови изгледаат обично.“ Пристапноста ограничува неколку работи — контраст, стилови на фокус, големина на текст — но добро изгледачките пристапни сајтови се нормата, а не исклучок.
- „Автоматската проверка вели 100, значи готово сме.“ Автоматските алатки фаќаат само некои проблеми. Дали alt текстот е навистина смислен или дали текот е логичен со читач на екран бара човек да провери.
- „Widget overlay ќе не направи сообразни.“ Алатките налепени врз страницата не можат да ги поправат недостасувачките ознаки или расипаниот пристап со тастатура во вашиот код. Поправете го изворот.
- „Немаме корисници со попреченост.“ Можеби едноставно не знаете. Многу попречености не се видливи, а луѓето што ќе налетаат на бариера обично едноставно заминуваат.
Што да побарате од вашиот AI градител
- „Изгради го ова да го исполнува WCAG 2.2 ниво AA.“
- „Користи семантички HTML: вистински копчиња, линкови, наслови по редослед и ознаки за секое поле во формуларот.“
- „Осигурај се дека секој интерактивен елемент работи само со тастатура и има видлив стил за фокус.“
- „Провери го контрастот на сите бои на текст и икони — 4,5:1 за обичен текст, 3:1 за голем текст и икони.“
- „Додај смислен alt текст на информативните слики и празен alt на декоративните.“
- „Прикажувај ги грешките во формуларите како текст, поврзан со полето, не само со боја.“
- „Почитувај ја поставката за намалено движење на корисникот за анимациите.“
- „Пушти автоматска проверка за пристапност и листај што не може да се тества, за да го проверам рачно.“
Потоа тестирајте сами: оставете го глушецот настрана и обидете се да го завршите главниот тек само со Tab, Shift+Tab, Enter и Space. Пробајте го вграденото читање на екран на телефонот на главната страница. Зумирајте го прелистувачот на 200% и видете дали нешто се расипува.
Пристапноста во Mythex
Mythex не вклучува посебен алат за проверка на пристапност, па третирајте ја пристапноста како дел од вашите prompt-ови и тестирање. Побарајте WCAG 2.2 AA од првиот prompt, проверете го резултатот во Preview со тастатура и користете /test за агентот да ги кликне главните текови пред да објавите — видете App Testing. SEO рецептот исто така бара семантички наслови и смислен alt текст, што ги служи и двете цели.
За практична листа, видете како да го направите вашиот веб сајт пристапен. За дизајн, прочитајте како да дизајнирате добро изгледачка апликација со AI, а пред објавување, како да ја тестирате апликацијата пред лансирање. Официјалниот преглед на WCAG на W3C е авторитативниот извор.
Прашања
Што е веб-пристапност едноставно кажано?
Веб-пристапноста значи дизајнирање и градење веб сајтови и апликации така што луѓето со попреченост можат да ги перцепираат, разберат, навигираат и користат. Тоа ги опфаќа луѓето кои се слепи и користат читачи на екран, луѓето кои не можат да користат глушец, луѓето со слаб вид или слепило за бои, глувите корисници и луѓето со когнитивни попречености.
Што е WCAG?
WCAG (Web Content Accessibility Guidelines) е меѓународниот стандард за веб-пристапност, објавен од W3C. Тековната верзија е WCAG 2.2, прво објавена во октомври 2023. Нејзините критериуми за успешност се ценети на нивоата A, AA и AAA, а нивото AA е целта на која се повикуваат повеќето организации и закони.
Каков контраст на бои бара WCAG?
На нивото AA, обичниот текст треба да има однос на контраст од најмалку 4,5:1 во однос на позадината, а големиот текст (приближно 18 pt, или 14 pt здебелен) најмалку 3:1. Иконите и видливите делови на контролите треба да имаат најмалку 3:1 во однос на она што е до нив.
Дали веб-пристапноста е законска обврска?
На многу места, за многу организации, да. Законите се разликуваат по држава и сектор — на пример, Европскиот акт за пристапност опфаќа многу потрошувачки дигитални производи и услуги во ЕУ. Проверете кои правила важат за вас или прашајте правен советник.
Дали overlay или widget за пристапност може да го направи мојот сајт сообразен?
Не сам по себе. Overlay-ите додаваат лента со алатки врз вашиот сајт, но не можат сигурно да ги поправат основните проблеми, како недостасувачки ознаки, неупотреблива навигација со тастатура или нејасна структура. Поуздан пристап е да се поправи кодот и содржината на сајтот.