Един сайт може да изглежда безупречно и пак да е неизползваем за значителна част от посетителите. Човек със слабо зрение, който увеличава текста до 200 процента, вижда счупен layout. Потребител, който работи само с клавиатура, стига до менюто и там се заклещва. Някой със сериозен дефицит на цветоусещане не различава червения бутон "Изтрий" от сивия "Откажи". Точно тези ситуации адресира WCAG.
Уеб достъпността отдавна излезе от нишата на добрите намерения. Днес тя е част от европейската регулаторна рамка, влиза в тръжни изисквания и все по-често се появява в договори с корпоративни клиенти. Тази статия обяснява какво реално покрива стандартът, какви са нивата на съответствие и как един бизнес сайт може да мине от "изглежда добре" към "работи за всички".
Какво е WCAG и защо се превърна в норма
WCAG е съкращение от Web Content Accessibility Guidelines, набор от указания, разработени от W3C. Първата версия излиза през 1999 година, но истинският обрат идва с WCAG 2.0 през 2008 и последвалите ревизии 2.1 и 2.2. Причината този документ да стане референтен е проста: той е формулиран като проверими критерии, а не като общи пожелания. Всеки критерий може да получи оценка "покрит" или "непокрит", което го прави годен за одит, за договорна клауза и за правен спор.
В Европа стандартът EN 301 549 препраща директно към WCAG и служи като техническа основа за законодателството. Публичният сектор е обвързан от Директива 2016/2102, а Европейският акт за достъпност разширява обхвата към редица частни услуги: електронна търговия, банкиране, транспортни билети, електронни книги, телекомуникации. Ако вашата фирма продава онлайн на потребители в ЕС, вероятността да попадате в обхвата е реална.
Кой печели от достъпен сайт
Групата е много по-широка от очакваното. Освен хората с трайни увреждания, от достъпността печелят:
- Възрастни потребители с намалено зрение или по-бавна моторика, а това е бързо растяща и платежоспособна група.
- Хора с временни ограничения, например счупена ръка или възпалено око.
- Всеки, който чете сайта на телефон в ярко слънце, където ниският контраст става невидим.
- Потребители на бавен интернет, при които изображенията не се зареждат и alt текстът остава единствената информация.
Практиката показва, че мерките за достъпност почти винаги подобряват използваемостта за всички. По-големите зони за клик, ясните етикети на полетата и предвидимата навигация не помагат само на малцинство.
Четирите принципа на стандарта
WCAG е организиран около четири принципа, известни с абревиатурата POUR. Всеки принцип съдържа указания, а всяко указание има конкретни критерии за успех.
Възприемаемост
Информацията трябва да достига до потребителя по повече от един сетивен канал. Практически това означава alt текст за всяко смислово изображение, надписи и транскрипт за видео, достатъчен контраст между текст и фон, и структура, която не разчита единствено на цвят, за да предаде смисъл. Съобщение за грешка, което само оцветява полето в червено, е класически пропуск.
Работоспособност
Целият интерфейс трябва да е управляем без мишка. Това е може би най-често нарушаваното изискване по български сайтове. Тествайте сами: отворете началната страница, натиснете Tab многократно и следете дали фокусът се вижда, дали обхожда елементите в логичен ред и дали може да излезете от отворен модален прозорец с Escape. Тук влизат и правилата за достатъчно време за попълване на форми, както и забраната за съдържание, което мига по начин, провокиращ епилептичен пристъп.
Разбираемост
Езикът на страницата трябва да е деклариран в HTML, навигацията да е последователна между отделните страници, а формите да дават ясни инструкции преди грешката, не само след нея. Ако полето изисква формат на телефон с код на държава, това се казва предварително.
Стабилност
Кодът трябва да е валиден и семантичен, за да могат помощните технологии да го интерпретират коректно. Бутон, направен от div с onclick, не се обявява като бутон от екранния четец. Използването на правилните HTML елементи решава по-голямата част от проблема без нито един ред допълнителен код.
Нива на съответствие: A, AA и AAA
Стандартът дефинира три нива. Практиката в Европа е, че AA е работната цел за почти всички проекти, докато AAA се преследва само за специализирани услуги.
| Ниво | Обхват | Типични изисквания | За кого е реалистично |
|---|---|---|---|
| A | Минимален праг | Alt текст, навигация с клавиатура, език на страницата | Абсолютен минимум, недостатъчен за регулаторно съответствие |
| AA | Стандартна цел | Контраст 4.5:1 за нормален текст, надписи на видео, видим фокус, преоразмеряване до 200 процента | Корпоративни сайтове, онлайн магазини, публични услуги |
| AAA | Разширено | Контраст 7:1, жестомимичен превод на видео, обяснение на всяка непозната дума | Специализирани платформи, рядко приложимо за целия сайт |
Важна подробност: съответствието се оценява за конкретна страница, а не за сайта като абстракция. Една безупречна начална страница не компенсира недостъпна количка за поръчка.
Най-честите пропуски по български сайтове
От практиката ни при одити на съществуващи проекти се повтарят едни и същи слаби места.
Контрастът е проблем номер едно. Сив текст с код #999999 върху бял фон дава съотношение около 2.8:1, далеч под изискваните 4.5:1. Дизайнерите го харесват заради изчистения вид, но той изважда цели пасажи от четимост за част от аудиторията.
Формите често нямат свързан label елемент. Placeholder текстът не го замества, защото изчезва при започване на въвеждане и обикновено е с нисък контраст. Екранният четец обявява "текстово поле" без никакво указание какво се очаква вътре.
Изображенията получават или празен alt, или буквално описание на файла. Alt текстът трябва да предава функцията на изображението в контекста. Снимка на продукт в каталог се описва с името на продукта, а декоративен разделител получава празен alt, за да бъде пропуснат.
Видео съдържанието почти никога няма надписи. Това е сравнително евтино за поправяне, но остава пренебрегнато. Същите надписи, между другото, увеличават задържането при гледане без звук в социалните мрежи.
Модалните прозорци и падащите менюта често улавят фокуса или изобщо не го получават. Потребител с клавиатура остава заключен зад бисквитковия банер и не може да продължи. Ако темата за банерите ви касае, разгледайте и материала за GDPR и бисквитките.
Как се прави одит стъпка по стъпка
Един разумен процес комбинира автоматизирани и ръчни проверки, защото инструментите улавят между 30 и 40 процента от проблемите.
Първата стъпка е автоматично сканиране. Lighthouse в Chrome, axe DevTools или WAVE дават бърза карта на очевидните нарушения: липсващи alt атрибути, недостатъчен контраст, невалидна структура на заглавията.
Втората стъпка е клавиатурна навигация през основните потребителски пътища. Начална страница, продуктова страница, добавяне в количката, попълване на формата за поръчка, контактна форма. Всеки път се минава изцяло без мишка.
Третата стъпка е тест с екранен четец. NVDA под Windows е безплатен, VoiceOver е вграден в macOS и iOS. Не е нужно да сте експерт, за да чуете, че бутонът за поръчка се обявява като "връзка, празно".
Четвъртата стъпка е проверка при увеличение. Задайте 200 процента zoom и вижте дали съдържанието се пренарежда, или част от него излиза извън екрана и става недостъпно.
Резултатът се оформя като списък с приоритети: блокиращи проблеми, сериозни, козметични. Блокиращите са тези, които правят дадена функция напълно неизползваема, и се поправят първи.
Достъпност и SEO се припокриват повече, отколкото изглежда
Семантичните заглавия помагат едновременно на екранните четци и на индексирането. Alt текстът дава контекст и на помощните технологии, и на търсачките. Ясната структура на връзките подобрява и навигацията с клавиатура, и обхождането от ботовете. Транскриптите на видео създават индексируем текст там, където иначе няма нищо.
Ако работите по органичната видимост, вижте и подхода ни към SEO оптимизацията и към структурираните данни. Достъпността се вгражда естествено в същата работа и рядко изисква отделен бюджет, когато се планира навреме.
Кога да се заложи в проекта и как се бюджетира
Разликата в разхода между "достъпност от старта" и "достъпност след това" е драматична. Когато критериите влязат в дизайн системата, изборът на цветове, размери на шрифта и състояния на фокус се прави веднъж и после се повтаря. Когато сайтът вече е готов и се налага преработка, се пипа в компоненти, които са разпръснати из целия код.
За нов проект достъпността на ниво AA обикновено добавя между 10 и 15 процента към дизайна и фронтенда. За ремонт на съществуващ сайт диапазонът е много по-широк и зависи изцяло от състоянието на кода. Затова оценката винаги минава през одит, а не през обща формула. Ако планирате изработка на сайт или онлайн магазин, поискайте достъпността да е част от заданието още в началото.
WEBPROGRESS работи по индивидуална оферта за всеки проект, защото обемът на работата зависи от броя шаблони, сложността на формите и наличието на видео съдържание. Изпратете адреса на сайта си през контактната форма и ще получите оценка до 24 часа.
Често задавани въпроси
Задължителна ли е достъпността за частна фирма в България
Зависи от дейността. Публичните органи са обвързани отдавна. Европейският акт за достъпност разширява обхвата към частни услуги като електронна търговия, банкиране, транспорт и електронни съобщения. Малките предприятия под определен праг имат облекчения, но търговците, които продават онлайн на потребители, трябва да проверят конкретното си положение. Дори извън обхвата, достъпният сайт е конкурентно предимство при корпоративни търгове.
Достатъчен ли е плъгин за достъпност
Не. Наслагващите се приспособления, които добавят плаващ бутон с настройки за контраст и размер на шрифта, поправят повърхността, но не и структурата. Ако бутонът в кода не е бутон, никакъв плъгин няма да го обяви правилно на екранния четец. Такива инструменти могат да са полезно допълнение, но не заместват коректния HTML и не осигуряват съответствие.
Как се измерва контрастът
Съотношението се изчислява между относителната яркост на текста и фона. За нормален текст WCAG AA изисква поне 4.5:1, за едър текст над 18 пункта или получер над 14 пункта прагът пада до 3:1. Има безплатни проверки в Chrome DevTools, както и онлайн калкулатори, в които се въвеждат двата HEX кода.
Влияе ли достъпността на позициите в Google
Няма пряк фактор за класиране на име "достъпност". Влиянието е косвено, но реално: по-добра семантика, по-ясна структура, повече текстово съдържание около мултимедия, по-нисък процент на отказ. Тези сигнали се отразяват върху резултатите, особено при конкурентни заявки.
Колко време отнема привеждането на съществуващ сайт
За сайт визитка с няколко шаблона работата обикновено се събира в рамките на седмица или две. За онлайн магазин с каталог, филтри, количка и профил на клиента говорим за няколко седмици, разпределени на етапи, като първо се обезпечават критичните пътища на покупка. Точният график се дава след одит.
Следваща стъпка
Достъпността не е еднократен проект, а част от начина, по който се поддържа сайтът. Всеки нов шаблон, всяка нова форма и всяко ново видео влизат под същите правила. Затова най-разумният ход е одит сега, приоритизиран план за поправки и вграждане на критериите в дизайн системата, за да не се повтаря проблемът.
Ако искате да разберете къде стои сайтът ви спрямо WCAG AA, пишете ни през контактите. Правим одит, даваме конкретен списък с приоритети и предлагаме индивидуална оферта за изпълнението, с отговор до 24 часа. Ако сайтът е на етап планиране, вижте и услугите ни за изработка на сайт, хостинг и поддръжка.
