Accessibility – как да създаваме уеб, който всеки може да ползва

Ще започна този урок с кратка лична история. През 2016 година се запознах с човек, който е със 100% нарушено зрение в следствие на лекарска грешка преди години. Повода на срещата ни бе делови – нуждаеше се от уеб сайт за своя бизнес. Така между нас започна интензивна комуникация по… имейл. Човекът ми изпращаше референти, информация от други уеб сайтове и пишеше безупречни имейли. Как бе възможно това, при условия, че нямаше асистент? Отговорът е един – web accessibility или казано на български – достъпност. Как? Ще научиш в статията и видеото по-долу 😉

Какво означава accessibility (достъпност)?

Достъпен уеб означава, че уеб сайтовете (включително и приложенията) са проектирани и разработени така, че хората с увреждания да могат да ги използват. По-конкретно, хората могат:

• да възприемат, разбират, навигират и взаймодействат с мрежата
• да допринасят за мрежата (например да публикуват съдържание)

Уеб достъпността обхваща всички увреждания, които засягат достъпа до мрежата, включително:

• слухови
• когнитивни
• неврологи§ни
• физически
• реч
• визуални

Т.нар. accessibility е полезно и за хора, които нямат увреждания, например:

• хора, браузващи през мобилни телефоно, смарт часовници, смарт телевизори и други устройства с малки екрани, различни режими на въвеждане и пр.
• възрастни хора с променящи се способности поради напредване на възрастта си
• хора с временни увреждания – счупена ръка, загубени очила..
• хора със „стационарни ограничения“ – при ярка слънчева светлина, среда, в която не могат да слушат аудио, бавна интернет връзка и още.

Защо е важно един уеб сайт да е достъпен и да има високо ниво на accessibility?

Значението на уеб достъпността набира все по-голяма популярност и през последните години освен, че се говори много по темата, се набляга много и на имплементирането ѝ както в нови, така и във вече съществуващи уеб сайтове.

Причините за това са няколко, тук ще изброя най-основните:

• все повече хора имат нарушено зрение – според проучване на Световната здравна организация, над 16% от популацията на планетата страда от някакъв вид увреждане, което затвуднява използването на уеб
• един достъпен уеб сайт има много по-големи предимства спрямо такъв, които не следва правилата за accessibility – това освен, че благоприятства за броя посетители, той осигурява безпроблемното си използване за всеки от тях
• съдебни дела и големи санкции – фокусът върху достъпността също може да помогне да се гарантира, че уеб сайтът е в съответствие със законите и разпоредбите, като например Закона за американците с увреждания (ADA), Закона за рехабилитацията и Европейския закон за достъпността (EAA). Законите забраняват дискриминацията срещу хората с увреждания и изискват фирмите и организациите да направят разумни условия за тях. Пренебрегването на насоките може да доведе до даване на съд на дадена компания от потребител, които по един или друг начин не е успял да използва уеб сайта ѝ.

Какво да направим, за да имаме accessible уеб сайт?

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

Добрият контраст и използването на цветове са жизненоважни за уеб достъпността. Потребителите, включително потребителите със зрителни увреждания, трябва да могат да възприемат съдържанието на страницата.

Цветовете могат да бъдат дефинирани по няколко начина. Например този нюанс на синьото може обикновено да се подаде по три различни начина в CSS-a на уеб сайта:

p {
  color: rgb (97, 97, 255);
}

В примера горе количеството червено, зелено и синьо, които образуват въпросния цвят, се представя като число между 0 и 255.

p {
  color: #6161FF;
}

В този пример пък използваме „шестнадесетичен“ формат, при който червените/зелените/сините стойности са представени като комбинация от шест букви или цифри. Обикновено се нарича „Hex“ и това е може би най-често срещания формат за подаване на цвят.

p {
  color: hsl (240, 100%, 69%);
}

Нюансът, наситеността и лекотата (hue, saturation & lightness) се приближават по-близо до начина, по който хората възприемат цветовете. Промяната на „светлотата“ (последната стойност) на цвят ще промени съотношението му на контраст към друг цвят.

Толкова за начините, по които може да дефинираме цвят. Но какво се случва, когато дизайнер ни подаде цвят за основен текст черно (представен в hex като #000000;) и цвят за линк сиво – #958888; ?

Сам/а виждаш, че дори без да се налага да притваряш очи е трудно да различиш линка от основния текст (и още по-трудно, ако няма text-decoration: underline;).

Затова и е важно различните елементи да имат добро съотношение като контраст и да се убедиш, че няма текст, който се различава трудно на даден фон, или пък линк, който по никакъв начин не се отличава от основния текст.

Семантичен HTML

Семантичният HTML се отнася до използването на HTML тагове, които предават значението или семантиката на съдържащото се в тях съдържание. Такива тагове са: <header>, <nav>, <section>, <aside>, <main>, <article>, <figure> и други (пълния списък може да провериш тук). Добавяйки семантични HTML тагове към markup-a си, предоставяме допълнителна информация, която помага да се определят ролите и относителната важност на различните части на уеб страницата.

Употребата на семантичен HTML е важна точка по отношение на достъпността – за потребители без зрителни нарушения е лесно да идентифицират различните части на уеб страница. Заглавията, страничната навигация и основното съдържание се виждат мигновено.

Това обаче не е толкова лесно за потребители, които са слепи или с нарушено зрение и разчитат на екранни четци (screen readers). Правилното използване на HTML семантични тагове ще позволи на тези потребители да разберат твоето съдържание по-добре, да навигират по-лесно в сайта и най-важното – да го използват така, както всеки друг.

Описателни текстове

Какво виждаш на снимката долу?

Ще кажеш – кит, който изскача на повърхността на водата. А ако си луд фен на китовете като мен дори може да разпознаеш, че това е гърбат кит. Но какво вижда браузъра (и съответно екранните четци)? Изображение. Нищо повече.

Ако обаче използваш alt атрибута на изображението и добавиш описателен текст – това изображение вече ще има съвсем друг смисъл както за машините, така и за хората с нарушено зрение:

<img decoding="async" width="1024" height="700" src="https://devblondie.com/wp-content/uploads/2024/06/humpback-whale-how-important-alt-tags-are-for-accessibility-1024x700.png" alt="humpback whale - this is how important alt text is for web accessibility" class="wp-image-6090">

Бонус точки тук отиват и за SEO показателите – добре описаните изображения помагат на Google и други търсещи машини да идентифицират семантиката на съдържанието, показано на дадена страница, а с това шансовете за по-високото ѝ класиране при търсене се повишават.

Какви са стандартите за accessibility и кой ги е създал?

Тук ще започна с това, че спрямо WCAG 2 (Насоки за достъпност на съдържанието, създадени от W3C – консорциум на световната мрежа), има три нива на достъпност:

• WCAG Level A – Basic accessibility – смятани за най-малко строги, критериите за достъпност от ниво А са от съществено значение за всеки уебсайт. Ако уебсайтът не отговаря на WCAG ниво A, той може да има сериозни проблеми с достъпността, които не позволяват на потребителите с увреждания да го използват. На това ниво в рамките на настоящите насоки (WCAG 2.1) има 30 критерия, на които организациите трябва да отговарят.
  
  Ето и три примера за тези критерии:
  – нетекстовото съдържание (изображения и видеоклипове) трябва да има текстов еквивалент.
  – потребителите трябва да имат достъп до съдържание само с помощта на клавиатура.
  – формите и техните input полета трябва да включват етикети (label) или инструкции, така че потребителите да знаят какво се очаква от тях.
  
• WCAG Level AA – Strong accessibility – Докато WCAG ниво A позволява на организациите да покрият основите, WCAG ниво AA отива по-далеч, за да направи уеб съдържанието достъпно за потребителите в по-голямо разнообразие от контексти. Поради тази причина повечето експерти по достъпност препоръчват това ниво на съответствие.
  
  На ниво АА критериите включват всичко, което е описано на ниво А плюс допълнителни 20 изисквания.
  
  Примерите включват:
  – текстът и фонът трябва да използват добър цветови контраст. Например, тук говорим за минимално ниво на контраст от поне 4,5 към 1.
  – съдържанието трябва да бъде организирано под ясни заглавия, като се използва логичен ред. Например H1, последван от H2, H3 и т.н.
  – елементите, които влияят на навигацията, трябва да са последователни в целия сайт.
  
• WCAG Level AAA – Excellent accessibility – ниво AAA е най-високото възможно ниво на съответствие в WCAG и в резултат на това държи организациите на най-високия стандарт за достъпност. На това ниво уеб страницата и съдържанието отговарят на всички критерии за успех от ниво A, ниво AA и ниво AAA.
  
  Въпреки че нивото AAA може да не е приложимо или реалистично за постигане от всички, организациите трябва да се стремят да изпълнят възможно най-много от неговите критерии.
  
  Kритериите за ниво ААА прибавят допълнителни 28 изисквания от тези, посочени на ниво АА.
  
  Примерите включват:
  – контрастното съотношение между текст и фон е поне 7 към 1.
  – предварително записаното видеосъдържание трябва да има превод на жестомимичен език.
  – трябва да се предостави разширено аудио описание за предварително записани видеоклипове.

Как да тестваме достъпността на даден уеб сайт?

Съвременният интернет предлага множество опции, когато дойде време за accessibility тестове – от десктоп приложения, до browser extensions и уеб платформи, чрез които да се тества.

Посредством уеб платформа/сайт

В интернет съществуват купища уеб сайтове, чрез които можеш да провериш нивото на accessibility на уеб сайта си, тук ще изброя някои, които съм тествала лично и които дават много конкретни насоки за подобряване нивото на accessibility:

• Siteimprove
• Browserstack
• Accessibility Checker

Посредством browser extension

Съществуват множество добавки за различните браузъри, посредством които можеш своевременно да тестваш нивото на достъпност, още докато пишеш кода за уеб сайта си:

• DigitalA11Y Color Contrast Checker
• WAVE Chrome extension
• A11y quick check
• WCAG Contrast Checker
• Firebug
• axe DevTools

Разбира се, тук ще трябва да съобразиш и браузъра, с който работиш, но повечето от добавките са разработени за повече от един браузър.

Екранни четци (screen readers)

Първо – нека си обясним как работят екранните четци – технологията чете на глас това, което е на екрана и потребителите могат да ги адаптират към своите нужди, например могат да намалят скоростта на говора или да променят езика. Екранните четци позволяват на хората да навигират през уебсайтове и приложения чрез говорния изход. Някои екранни четци могат да се използват и с брайлов дисплей.

Най-често използваните четци (в зависомост от операционната система) са:

• NVDA за Windows
• VoiceOver за Apple устройства
• Talkback за Android устройства

Вместо заключение

За финал, уеб достъпността става все по-важна през 2024г., а и след това. С нарастващия брой хора с увреждания и законовите изисквания, които трябва да се спазват, от съществено значение е всеки уеб сайт да бъде проектиран и разработен по начин, който позволява на ВСЕКИ да го използва.

Stay blond 😉

P.S. Обучения сезон есен ’24

През септември 2024 започва новият сезон с обученията на {dev} blondie; В програмата ще бъдат включени обучения насочени към front-end разработчиците, а също и такива за back-end разработка с WordPress.

Запиши се в списъка с абонати, които първи ще научат за новата програма.

Име *

Email *

Запази си място