Публикувано: Обновено:
Представете си, че отваряте онлайн магазин, но бутонът „Купи“ няма текст за екранния четец. Контрастът е толкова нисък, че не четете цената. Клавиатурата не стига до полето за адрес. За много хора с увреждания това е обичайният интернет.
Кратък отговор: уеб достъпност означава сайт, който всеки може да използва, включително хора с нарушено зрение, слух или движения. Мерилото са насоките WCAG на W3C, ниво AA. От 28 юни 2025 г. Европейският акт за достъпност важи и в България чрез Закона за изискванията за достъпност на продукти и услуги. За онлайн магазините това вече е задължение. По-долу е какво изисква законът, кои са честите грешки и как да подобрите достъпността на сайт на WordPress стъпка по стъпка.
Какво е уеб достъпност (web accessibility) и защо е важна
Уеб достъпността е практиката да се правят уебсайтове и мобилни приложения, които хората с увреждания могат да възприемат, разбират и управляват. На английски се казва web accessibility, съкратено a11y. Между „a“ и „y“ има 11 букви. Срещат се и изписванията web достъпност и онлайн достъпност.
Достъпността засяга хора с различни увреждания:
- зрителни: слепота, нарушено зрение, далтонизъм;
- слухови: глухота и намален слух;
- двигателни: хора, които не ползват мишка;
- когнитивни: затруднено четене и внимание.
Тя помага и на всички останали. Висок контраст се чете по-лесно на слънце. Субтитрите помагат в шумен влак. Ясните етикети на полетата намаляват грешките във формата.
Затова уеб достъпността е част от потребителското изживяване и подобрява използваемостта. Колкото по-достъпно е съдържанието, толкова по-лесно се използва сайтът. Целта е сайт, достъпен за всички потребители.
Стандартите WCAG на W3C и нивата A, AA и AAA
WCAG (Web Content Accessibility Guidelines) са насоките за достъпност на уеб съдържанието, които издава W3C (World Wide Web Consortium). Текущата версия е WCAG 2.2, а законът в ЕС реферира към WCAG 2.1 ниво AA.
Насоките се прилагат за уеб сайтове, уеб страници и дигиталните продукти около тях. Често ги наричат и accessibility стандарти. Те стъпват на четири принципа:
- Възприемаемо. Съдържанието се възприема и без зрение или слух: текст към снимките, субтитри към видеото.
- Управляемо. Всичко работи с клавиатура, а фокусът се вижда.
- Разбираемо. Текстът е ясен, формулярите обясняват грешките, навигацията е последователна.
- Устойчиво. Кодът има съвместимост с различни браузъри, компютри и помощни технологии като екранни четци.
Всеки критерий има ниво на достъпност:
| Ниво | Какво означава | Пример |
|---|---|---|
| A | минимумът; без него част от хората не могат да ползват сайта | текстова алтернатива на изображенията |
| AA | нивото, което изискват стандартите в ЕС | контраст поне 4,5:1 за нормален текст |
| AAA | най-високото ниво, рядко постижимо за целия сайт | контраст поне 7:1 |
Какво добавя WCAG 2.2 спрямо WCAG 2.1? Нови критерии за видим фокус, който не е скрит под други елементи, и минимален размер на целите за докосване от 24 на 24 пиксела. Критерият 4.1.1 за валиден код е премахнат като остарял. Ако правите нов сайт, ориентирайте се по 2.2. Така покривате и 2.1.
Законовите изисквания за уеб достъпност и онлайн магазини в България и ЕС
От 28 юни 2025 г. онлайн магазините и редица онлайн услуги в България трябва да отговарят на изисквания за достъпност. Това идва от Европейския акт за достъпност (Директива 2019/882), въведен у нас със Закона за изискванията за достъпност на продукти и услуги.
Законът е обнародван в Държавен вестник, брой 31 от 11 април 2025 г., и е в сила от 28 юни 2025 г. Той обхваща продукти и услуги, сред които:
- електронна търговия;
- банкови услуги за потребители;
- електронни съобщения;
- пътнически превоз и свързаните онлайн услуги;
- електронни книги.
Техническото мерило е стандартът EN 301 549. За уеб съдържанието той препраща към WCAG 2.1 ниво AA. С други думи, сайтовете трябва да отговарят на изискванията на WCAG, тоест да са в съответствие с насоките за достъпност. Регулацията засяга най-много онлайн магазини и банки.
Кой е освободен? Микропредприятията, които предлагат услуги, са освободени от изискванията (чл. 46, ал. 3). Микропредприятие е фирма с под 10 души персонал и оборот или баланс до 2 млн. €.
Кой проверява? Законът разпределя контрола по вид услуга (чл. 54). За електронната търговия това е Комисията за защита на потребителите. За банковите услуги са КФН и БНБ.
Какви са санкциите? При първо нарушение законът предвижда глоба от около 256 до 1 534 € или имуществена санкция от около 511 до 2 556 € (чл. 86). При повторно нарушение сумите се удвояват. Сумите тук са преизчислени по фиксирания курс 1,95583.
Доставчикът трябва и да обясни публично как услугата отговаря на изискванията (чл. 50). На практика това е декларация за достъпност на сайта.
Отделно сайтовете на публичния сектор имат изисквания по Директива 2016/2102 от години. Не сме юристи. За конкретен случай се консултирайте с юрист.
Най-честите проблеми с достъпността на уебсайт
Повечето проблеми с достъпността се повтарят от сайт на сайт и се поправят без нова разработка. Ежегодните автоматични анализи на големи извадки сайтове показват едни и същи грешки.
- Нисък контраст на текста. Сив текст на бял фон изглежда модерно, но не се чете.
- Снимки без alt текст. Екранният четец казва „изображение“ и нищо повече.
- Полета без етикет. Потребителят не знае какво да въведе.
- Празни линкове и бутони. Иконка на кошница без текст е безименен бутон.
- Липсващ език на страницата. Без
lang="bg"четецът чете българския текст с грешно произношение. - Объркани заглавия. H4 след H2 само заради размера на шрифта.
Добрата новина е, че тези шест проблема са добре описани. Всеки от тях има ясна поправка. Повечето са във front-end частта: тема, шаблони и стилове.
Как да проверим и подобрим достъпността на своя сайт
Започнете с кратък тест с клавиатурата и безплатен автоматичен скан, после поправете най-честите грешки. За WordPress сайт стъпките са следните.
- Тест с клавиатура. Минете през сайта само с Tab, Shift+Tab, Enter и Escape. Виждате ли къде е фокусът? Отваря ли се менюто? Изпраща ли се формата?
- Автоматичен скан. WAVE и Lighthouse в Chrome показват грешките на самата страница. Axe DevTools е насочен повече към разработчиците.
- Контраст. Нормален текст изисква поне 4,5:1, голям текст поне 3:1. Голям текст е поне 18 pt или 14 pt удебелен.
- Тема. Изберете тема с етикет Accessibility Ready в каталога на WordPress. Според насоките на WordPress етикетът показва минимума, заложен от екипа за проверка на теми. Той не гарантира съответствие с WCAG ниво AA, затова тествайте и сами.
- Заглавия. Едно H1 на страница, после H2 и H3 по ред. Панелът със структурата на документа в редактора показва прескочените нива.
- Език. Проверете, че кодът на страницата съдържа
lang="bg", особено при многоезичен сайт. - Декларация за достъпност. Опишете стандарта, известните ограничения и начин за обратна връзка.
Ако сайтът минава редизайн, включете тези изисквания в брифа от самото начало. По време на редизайна поправката е част от работата, а след пускането излиза по-скъпо. Същото важи при изграждане на достъпен сайт от нулата. Как се планира редизайнът, вижте в страницата за редизайн на сайт.
Достатъчни ли са автоматичните тестове в браузъри и плъгините
Не. Автоматичните тестове откриват само част от проблемите, а плъгините с плаващ бутон не поправят кода. Те са полезни като начало, но не заменят ръчната проверка.
Скенерът вижда липсващ alt текст. Не вижда дали alt текстът описва правилно снимката. Вижда етикет на полето. Не вижда дали съобщението за грешка е разбираемо. Затова към всеки скан добавете тест с клавиатура и с екранен четец: NVDA за Windows или VoiceOver за macOS и iOS.
Плъгините за WordPress се делят на два вида:
- Проверяващи. Например Accessibility Checker на Equalize Digital и Sa11y маркират грешките, докато редактирате. Те помагат на авторите да не публикуват нови проблеми.
- Наслагващи (overlay). Плаващ бутон за контраст и шрифт. Той не добавя alt текст, не поправя заглавията и не прави формата управляема с клавиатура. Понякога пречи на екранните четци.
Затова поправката се прави в темата и в съдържанието. Допълнителен слой върху тях не я замества.
Достъпно съдържание: изображения, видео, формуляри и обратна връзка
Повечето работа по достъпността е в съдържанието, което редакторите добавят всеки ден. Затова правилата трябва да ги знае всеки, който публикува.
Изображения. Alt текстът казва какво носи снимката за текста около нея. Декоративните снимки получават празен alt (alt=""), не липсващ. Подробно с примери има в статията за alt текст на изображенията.
Видео и аудио. Видеото има субтитри, аудиото има текстов запис. Автоматичните субтитри са начало, но изискват ръчна редакция. Нищо на страницата не мига повече от три пъти в секунда.
Формуляри. Всяко поле има видим етикет. Задължителните полета са отбелязани с текст, не само с цвят. Грешката казва какво да поправите: „Въведете телефон с 10 цифри“ вместо „Невалидно поле“.
Обратна връзка. Дайте видим начин за сигнал: имейл или форма, която сама е достъпна. Посочете го и в декларацията за достъпност.
Линкове и бутони. Текстът на линка казва къде води. „Вижте цените за поддръжка“ е добре, „Натиснете тук“ не е. Бутоните само с иконка получават aria-label.
Одит на достъпността: как се прави, колко време и средства отнема
Одитът е проверка на представителни страници по критериите на WCAG, с автоматичен скан и ръчни тестове. Резултатът е списък с проблеми, подреден по важност, и план за поправка.
Обикновено се проверяват шаблоните, а не всички уеб страници поотделно: началната, категория, продукт, количка, контакти, статия. Ако шаблонът е поправен, поправени са всички страници от него.
Времето и цената зависят от три неща:
- броя различни шаблони;
- сложността на формулярите и поръчката;
- обема съдържание, което трябва да се допълни, например alt текст на стотици продукти.
При нас анализът на уебсайт преди изработка или редизайн струва от 200 до 1 000 €. Ако държите на достъпността, включете я в обхвата му. Цените за самата изработка на уеб сайт са публикувани на страницата на услугата.
Как да поддържате достъпността на онлайн магазин или уеб сайт
Достъпността не се постига веднъж завинаги. Всяка нова статия, тема или плъгин може да върне стара грешка.
Добри практики за поддръжка:
- При всяка публикация проверявайте alt текста, заглавията и линковете.
- При обновяване на тема или плъгин пускайте автоматичен скан и кратък тест с клавиатура.
- Периодично правете ръчен преглед с екранен четец на основните шаблони.
Интеграцията на тези проверки в редовната работа е една от най-добрите практики. Така се пази и достъпността на онлайн магазина след всяка промяна. Ако сайтът е на поддръжка на WordPress, тези проверки могат да влязат в редовния график. Инструменти за преглед на сайта има в статията за анализ на сайт.
Как уеб достъпността влияе на бизнесите и SEO
Достъпни сайтове достигат до повече клиенти, а голяма част от поправките помагат и на SEO представянето. Причината е, че Google и екранните четци разчитат на едни и същи сигнали в кода.
- Ясни заглавия помагат и на четеца, и на търсачката да разберат структурата.
- Alt текстът е единственият начин търсачката да разбере какво има на снимката.
- Описателните линкове обясняват накъде води линкът.
- Бързият и стабилен сайт е по-лесен за всички. Вижте и статията за Core Web Vitals в WordPress.
За бизнеси с онлайн продажби ефектът е пряк. Достъпността подобрява потребителското изживяване точно в количката и поръчката. Ако клиентът не може да избере размер или да попълни адрес с клавиатура, поръчката не се случва. Връзката между структурата и класирането е описана в SEO уеб дизайн, а интерфейсът в статията за UI и UX дизайн.
Често задавани въпроси
Какво означава a11y?
Числово съкращение на accessibility: между „a“ и „y“ има 11 букви. Използва се за уеб достъпността в технологичната общност.
Задължителна ли е уеб достъпността за моя сайт?
Ако вашият сайт продава онлайн или предлага някоя от услугите в закона, най-вероятно да. Изключение са микропредприятията, които предлагат услуги. Не сме юристи, затова за конкретен случай питайте юрист.
По коя версия на WCAG да работя: 2.1 или 2.2?
Стандартът EN 301 549 препраща към WCAG 2.1 ниво AA. WCAG 2.2 запазва почти всички критерии на 2.1 и добавя нови. Ако правите нов сайт, ориентирайте се по 2.2.
Какво трябва да съдържа декларацията за достъпност?
Кой стандарт следва сайтът, кои части още не са достъпни и как потребителят да подаде сигнал или обратна връзка.
Достатъчен ли е плъгин за достъпност?
Не. Плъгин за проверка помага да откриете грешките, но поправката е в темата и съдържанието. Плаващият бутон за контраст и шрифт не поправя кода.
Влошава ли достъпността дизайна?
Не. Контрастът, ясният шрифт и логичната структура правят сайта по-добър за всички. Отпадат само цветовите двойки с нисък контраст.
Влияе ли уеб достъпността на SEO?
Google не мери WCAG пряко. Заглавията, alt текстът, описателните линкове и бързината обаче помагат едновременно и на хората, и на търсачката.
Заключение: достъпността е част от добрия сайт
Уеб достъпността е законово изискване за онлайн магазините от 28 юни 2025 г. и практичен начин сайтът да работи за повече хора. Мерилото е WCAG 2.1 ниво AA, а версия 2.2 е добрата посока за нови сайтове.
Нашето мнение е, че не е нужен голям проект, за да се започне. Тест с клавиатура, скан с WAVE и поправка на контраста, alt текста и етикетите решават най-честите проблеми. Останалото влиза в редовната поддръжка и в брифа при следващия редизайн.
Ако планирате нов сайт или редизайн, свържете се с екипа на CreateWeb и включете изискванията за достъпност в задачата от самото начало. Повече за платформата има в статията за персонализиране на WordPress с блокови теми, а за онлайн продажбите в ръководството за сайт за онлайн продажби. Начална страница: CreateWeb.
