Поправете 85% от проблемите със достъпа на сайта със помощта на 5 прости стъпки

Здравей, читателю! Достъпа на сайта е много важен показател и процента на «чистите» сайтове е не повече от 3%. Повечето от грешките могат да се групират във няколко категории. Може да се отделят пет причини за лоша достъпност на сайта и които се срещат най често и най лесно могат да бъдат поправени.

  • Текст със недостатъчна контрастност.
  • Изображения без alt текст.
  • Полета за попълване без съответните тагове label.
  • Нееднозначни или празни линкове.
  • Не подредени заглавия

Поправката на тези пет типа проблеми ще отстрани повечето от проблемите.

Увеличете цветовия контраст на текста.

Лошия контраст на текста е най често срещаната грешка. За мен това може да бъде най ограничаващото изискване (за творчеството), тъй като често намирам интересна цветова палитра, от която в крайна сметка се отказвам, защото тя не съответства на изискванията WCAG. Един от вариантите е да спазвате по малко строгите критерии от ниво АА, защото понякога е невъзможно да изпълните изискванията за текста за ниво ААА. Във този сайт има действително отличен инструмент за проверка на цветовия контраст, а също така може да намерите много други онлайн инструменти.

достъпа на сайта
НЕПРАВИЛНО!!!
контраст на текста
ПРАВИЛНО!!!

Добавете алтернативен текст (alt) към изображенията.

Добавянето на алтернативен текст към изображенията е един от най важните принципи за достъпност на сайта. Но това е и една от най разпространените грешки във всеки сайт. Въпреки че изглежда просто – трябва само да се добави атрибут alt с описание към таг img, алтернативния текст може да има нужда от внимателно обмисляне. Каква роля изпълнява изображението? Какъв текст е разположен около него? И още едно нещо, ако изображението се използва за действие, alt трябва да описва необходимото действие което трябва да се направи. Ползвателите могат да разберат, че на изображението е изобразен принтер, но всъщност трябва да знаят, че ако кликнат картинката, ще се отпечата документ.

Полета за попълване на тагове label с атрибут for

Тези полета предоставят много предимства, като: помагат да се идентифицира и предоставят допълнителна информация за полето; при натискане се показва фокусирано свързания елемент със формата; и са прости за реализация. Трябва просто да поставите текста във таг label и да използвате атрибут for, за да посочите идентификатора на елемента:

<label for="username">Username:</label>
<input id="username" type="text" name="user">
<label for="password">Password:</label>
<input id="password" type="password" name="pass">

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

<table>
  <thead>
 <tr>
 <th id="namelabel">Name</th>
 <th id="addresslabel">Address</th>
 <th id="agelabel">Age</th>
 </tr>
  </thead>
  <tbody>
 <tr>
 <td><input aria-labelledby="namelabel" name="name" /></td>
 <td><input aria-labelledby="addresslabel" name="address" /></td>
 <td><input aria-labelledby="agelabel" name="age" /></td>
 </tr>
 ...
  </tbody>
</table>

Ако имате форма или компонент, който включва като поле за попълване или избор, не забравяйте да добавите име за различните елементи на формата или да добавите атрибут aria-labelledby.

Добавете значение за линковете, за да подобрите достъпа на сайта

Колко пъти сте виждали сайт със линк «Прочетете повече»? Въпреки че описва действие което ще се изпълнява от посетителя, всъщност то не предоставя реално значение за линка. Ние може да прочетем повече за слоновете, уеб програмирането или за операция на мозъка? За какво ще четем по нататък?
Някой може да кажат: «Ама ние имаме място само за Прочети повече!». И за тях има възможности да използват aria-label във линковете:

<a href="#" aria-label="Прочетете Повече за Достъпа до Сайта">
  Прочетете повече
</a>

Съвременните програми за четене от екрана ще четат aria-label вместо текста на линка, така че вие може да напишете заглавие за краткия линк, който по добре ще описва за какво разказва статията.

Организирайте съдържанието правилно.

Съдържанието на всяка страница трябва да бъде структурирано правилно със правилни заглавия. Изглежда просто, но това е най често срещаната грешка. Лошо организираната статия обърква нас и скенерите на уеб сайтовете. Не забравяйте да използвате заглавия (h1, h2 . . h5 и т.н.) вместо да стилизирате другите елементи, за да изглеждат като заглавия.

заглавия

Заключение

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

Вашият коментар

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