Как да направите уебсайта си достъпен: начално ръководство за WCAG 2.2

За да направите уебсайт достъпен, изградете го така, че хората да могат да го ползват с клавиатура, с екранен четец, със зуум или с превключващо устройство, а не само с мишка: използвайте истински HTML елементи за бутони, линкове, заглавия и етикети на формуляри, давайте на изображенията смислен alt текст, поддържайте висок контраст на текста и направете фокуса видим. Стандартът, към който да се стремите, е WCAG 2.2 ниво AA. Автоматичните проверки хващат част от проблема; десетминутен тест с клавиатура и екранен четец хваща голяма част от останалото.

Какво означава „достъпен“ на практика

Достъпността е свързана с хората: някой, който е слепец и ползва екранен четец, някой с треперене, който се навигира с клавиатура, някой със слабо зрение, който увеличава до 200%, някой, който чете на ярка слънчева светлина, някой с временно счупена ръка. Добрата достъпност обикновено прави сайта по-добър за всички — по-ясна структура, четим текст, формуляри, които обясняват грешките си.

Референтният стандарт са Насоките за достъпност на уеб съдържание (WCAG) на W3C. Към септември 2026 актуалната версия е WCAG 2.2 (публикувана през октомври 2023, актуализирана през декември 2024); WCAG 3 е ранна чернова. WCAG е организиран около четири принципа — съдържанието трябва да е възприемаемо, управляемо, разбираемо и стабилно — и има три нива на съответствие:

Закони на няколко места се позовават на WCAG — например Европейският акт за достъпност, който се прилага за много потребителски цифрови услуги в ЕС от юни 2025. Кои правила важат за вас, зависи от това къде работите и какво продавате; при съмнение се консултирайте със съветник. Това ръководство покрива практическата работа.

Варианти: как да стигнете дотам

За повечето малки сайтове първите два са достатъчни: кажете на AI да строи достъпно от самото начало, след което направете одит преди старта.

Поправките, които са най-важни

Използвайте правилните HTML елементи

Болшата част от достъпността идва безплатно с правилния HTML. <button> може да се фокусира, работи с Enter и Space и се обявява като бутон. <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 добави, че фокусираният елемент не трябва да е напълно скрит зад залепнали заглавки или банери за бисквитки (2.4.11, ниво AA).

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

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

Всяко смислено изображение се нуждае от alt текст, който казва какво показва в контекста („Готвач сервира дегустационното меню“, а не „image1.jpg“). Декоративните изображения получават празен alt="", за да ги прескачат екранните четци. Бутоните само с икона се нуждаят от достъпно име („Затвори“, „Търси“). Видеата се нуждаят от надписи; аудиото — от транскрипт.

Цвят и контраст

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). Правилно адаптивно оформление покрива по-голямата част от това.

Размер на целите, формуляри и грешки

• Размер на целта: WCAG 2.2 ниво AA изисква целите за показалец да са поне 24 на 24 CSS пиксела или достатъчно разстояние около по-малките (2.5.8). По-големите са по-приятни на телефони.
• Формуляри: видими етикети (не само placeholder), ясни инструкции и съобщения за грешки, които казват какво не е наред и как да се поправи, до полето.
• Вход: не карайте хората да решават пъзел или да преписват код без алтернатива; позволете мениджъри на пароли и поставяне (3.3.8 Accessible Authentication).

Промптове, които работят

Изгради този сайт така, че да отговаря на WCAG 2.2 ниво AA: семантични HTML ориентири, по един h1 на страница със заглавия в ред, истински бутон и линк елементи, етикети за всяко поле на формуляр, видими стилове на фокуса, контраст на текста поне 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); части от интерфейса ≥ 3:1
• Работи при 200% увеличение и ширина 320 px
• Всяко поле на формуляр има видим етикет и ясни съобщения за грешки
• Декларация за достъпност с начин за докладване на проблеми

За концепциите зад това прочетете какво е уеб достъпност. Достъпният дизайн и добрият дизайн се припокриват много; как да направите добре изглеждащо приложение с AI покрива визуалната страна.

Достъпност в Mythex

Mythex строи според стандарта, който поискате, затова сложете „WCAG 2.2 AA“ в първия си промпт и в последващите. Можете да ползвате рамката за размер на телефон в Preview, за да проверите малките екрани (Preview and Code), но тестовете с клавиатура, зуум и екранен четец работят най-добре на публикувания URL или на визуализация, отворена в собствен таб. Помолете агента да направи одит на страница, да поправи каквото намери, след което тествайте поправките сами — автоматичното преминаване е начало, а не финално одобрение.

Въпроси