Како да направите ваша веб-страница достапна: почетен водич за WCAG 2.2

За да направите веб-страница достапна, изградете ја така што луѓето ќе може да ја користат со тастатура, читач на екран, зумирање или уред со прекинувач, а не само со глушец: користете вистински HTML елементи за копчиња, линкови, наслови и етикети на формулари, дајте на сликите значаен alt текст, одржувајте висок контраст на текстот и направете го фокусот видлив. Стандардот кон кој треба да се стремите е WCAG 2.2 ниво AA. Автоматските проверки фаќаат дел од проблемот; десетминутен тест со тастатура и читач на екран открива голем дел од остатокот.

Што значи „достапно“ во пракса

Достапноста е за луѓето: некој што е слеп и користи читач на екран, некој со тремор што се движи со тастатура, некој со слаб вид што зумира на 200%, некој што чита на силна сончева светлина, некој со привремено скршена рака. Добрата достапност обично ја прави страницата подобра за сите — појасна структура, читлив текст, формулари што ги објаснуваат грешките.

Референтниот стандард се Web Content Accessibility Guidelines (WCAG) на W3C. Од септември 2026, тековната верзија е WCAG 2.2 (објавена октомври 2023, ажурирана декември 2024); WCAG 3 е рана нацрт-верзија. WCAG е организиран околу четири начела — содржината мора да биде перцептивна, оперативна, разбирлива и робусна — и има три нивоа на усогласеност:

Закони на неколку места се повикуваат на WCAG — на пример, Европскиот акт за достапност, кој се применува на многу дигитални услуги за потрошувачи во ЕУ од јуни 2025. Кои правила се применуваат за вас зависи од тоа каде работите и што продавате; проверете со советник ако не сте сигурни. Овој водич ја опфаќа практичната работа.

Опции: како да стигнете таму

За повеќето мали страници првите две се доволни: кажете му на AI да гради достапно од самиот почеток, па ревидирајте пред лансирање.

Поправките што се најважни

Користете ги вистинските HTML елементи

Веќето од достапноста доаѓа бесплатно со точен HTML. <button> е фокусибилен, функционира со Enter и Space и се најавува како копче. <div> со click обработувач не е ниедно од тоа. Кодот генериран од 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 додаде дека фокусираниот елемент не смее целосно да биде скриен зад залепени заглавија или банери за колачиња (2.4.11, ниво AA).

Чести неуспеси: менија што се отвораат само при задржување на глушецот, модали што не го задржуваат фокусот или не можат да се затворат со Escape, и outline: none во CSS без ништо што да го замени.

Текстуални алтернативи

Секоја значајна слика треба alt текст што вели што прикажува во контекст („Готвач ја сервира менито за дегустација“, а не „image1.jpg“). Декоративните слики добиваат празен alt="", па читачите на екран ги прескокнуваат. Копчињата само со икона треба accessible име („Затвори“, „Пребарај“). Видеата треба титлови; аудиото треба транскрипт.

Боја и контраст

WCAG 2.2 AA бара однос на контраст од најмалку 4,5:1 за обичен текст и 3:1 за голем текст (1.4.3), и 3:1 за делови од интерфејсот како рабови на полиња за внесување и значајни икони (1.4.11). Сивиот placeholder текст во светла боја и бледите копчиња се вообичаените неуспеси. Исто така, никогаш не користете само боја за да пренесете значење — црвен раб на невалидно поле треба и порака за грешка.

Промена на големина и прелом

Текстот мора да остане употреблив при зумирање на 200% (1.4.4), а содржината мора да функционира при ширина од 320 CSS пиксели без хоризонтално лизгање (1.4.10). Правилно responsive распоред го решава поголемиот дел од ова.

Цели, формулари и грешки

• Големина на цел: WCAG 2.2 AA бара цели за показалец од најмалку 24 на 24 CSS пиксели, или доволно простор околу помалите (2.5.8). Поголемото е поудобно на телефони.
• Формулари: видливи етикети (не само placeholder), јасни упатства и пораки за грешки што кажуваат што е погрешно и како да се поправи, покрај полето.
• Најава: не ги терајте луѓето да решаваат загатка или да препишуваат код без алтернатива; дозволете менаџери на лозинки и лепење (3.3.8 Accessible Authentication).

Прашања што функционираат

Изгради ја оваа страница да ги исполнува WCAG 2.2 ниво AA: семантички HTML ориентири, по еден h1 на страница со наслови по редослед, вистински елементи button и link, етикети на секое поле на формулар, видливи стилови за фокус, контраст на текстот од најмалку 4,5:1, alt текст на значајните слики и alt="" на декоративните, и html lang поставен.

Ревидирај ги страниците /signup и /checkout за достапност. Провери употреба само со тастатура, редослед на фокус, видлив фокус, етикети, пораки за грешки, контраст и имиња за читачи на екран кај копчињата со икони. Наведи секој проблем со WCAG критериумот, па поправи ги без да го менуваш визуелниот дизајн повеќе отколку што е потребно.

Мобилното мени не може да се користи со тастатура. Направи го копче со aria-expanded, премести го фокусот во менито кога се отвора, затвори го со Escape и врати го фокусот на копчето.

Чекор по чекор

1. Пуштете автоматска проверка. Делот Accessibility во Lighthouse во Chrome DevTools или проширувањето axe за прелистувач, на секоја главна страница. Поправете сè што ќе пријави.
2. Исклучете го глушецот. Прелистајте ја секоја страница со Tab и завршете ги сите клучни задачи — регистрација, пребарување, плаќање. Забележете што не можете да достигнете, каде не го гледате фокусот или од каде не можете да излезете.
3. Зумирајте на 200% и стеснете го прозорецот на ширина на телефон. Ништо не смее да биде отсечено или да бара хоризонтално лизгање.
4. Пробајте читач на екран десет минути: VoiceOver на Mac и iPhone, TalkBack на Android или NVDA на Windows (бесплатен). Слушајте ги насловите, линковите и полињата на формуларот. „Копче“ без име или „линк, кликнете тука“ значи работа што треба да се направи.
5. Проверете контраст на текстот, копчињата и полињата со алатка за контраст.
6. Поправете, па повторно тестирајте ги истите задачи.
7. Објавете изјава за достапност во која ќе кажете кој стандард го сакате и како да се пријават проблеми — и одговорете на тие пријави.

Чести грешки

• Потпирање на overlay widget наместо поправање на кодот.
• Отстранување на линиите за фокус затоа што изгледаат неуредно, без замена.
• 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 за да проверите мали екрани (Preview and Code), но тестовите со тастатура, зумирање и читач на екран најдобро функционираат на објавената URL адреса или на преглед отворен во свој таб. Побарајте од агентот да ревидира страница, да поправи што ќе најде, па тестирајте ги поправките сами — автоматскиот преглед е почеток, а не конечно одобрување.

Прашања