Интернет е безкраен източник на знания. Той съдържа неизчерпаемо количество информация, ресурси и сайтове, които ни подкрепят в ученето, забавлението и решаването на сложни проблеми.За незрящите и слабовиждащите хора обаче достъпът до това богатство зависи от две ключови неща: функционален браузър и достъпен уебсайт, както и удобни клавишни комбинации за работа на компютър. Без тях дори най-ценната информация остава недостъпна.
1. Какво прави един браузър или сайт функционален?
За да е достъпен, сайтът или браузърът трябва да работи безпроблемно със screen reader-и като JAWS или NVDA и брайлови дисплеи. Screen reader-ът прочита на глас всичко, което зрящите виждат на екрана, а брайловият дисплей позволява на потребителя да „чете“ в брайл същото съдържание.
Това обаче работи добре само ако разработчиците са се погрижили всички елементи – бутони, формуляри, изображения, линкове, таблици и заглавия – да са правилно означени. Ако не са, незрящият потребител може да разбере, че на екрана има бутон или картинка, но няма как да знае какво точно е предназначението им. Това е и една от 10-те причини за добра мобилна оптимизация, тъй като помага на търсачките да „разберат“ снимките Ви.
| Елемент от сайта | Проблем при липса | Техническо решение (За разработчици) | Клавиш в JAWS/NVDA |
|---|---|---|---|
| Заглавия (Headings) | Потребителят не може да "прелисти" страницата. | Използване на правилна йерархия (<h1> до <h6>). |
H |
| Изображения (Images) | Screen reader-ът казва "Графика" или чете името на файла. | Атрибут alt="описание на снимката". |
G |
| Формуляри (Forms) | Потребителят не знае какво поле попълва (име или парола). | Свързване на <label> с <input> чрез id. |
E |
| Бутони (Buttons) | Бутонът се разпознава като "празен" или "клик". | Добавяне на aria-label или ясен текст в бутона. |
B |
| Линкове (Links) | Текст "Натисни тук" не дава информация за целта. | Описателен текст: "Изтеглете ценоразпис (PDF)". | K или L |
| Таблици (Tables) | Данните се четат като разхвърляни думи без връзка. | Използване на <th> за заглавия на колони и редове. |
T |
| Списъци (Lists) | Потребителят не знае колко елемента има в списъка. | Използване на семантични тагове <ul> или <ol>. |
I |
2. Бутони
Бутоните играят решаваща роля онлайн. Те са навсякъде: за приемане на условия, изтегляне на файл, преминаване към следваща страница. За да бъдат разпознати от screen reader-а трябва да са ясно означени.
Ето няколко примера за добре означени бутони:
- Бутон Приемам
- Бутон Отказвам
- Бутон Изтегли/Инсталирай
- Бутон Повече Информация
- Бутон Назад
- Бутон Напред
- Бутон Отмени
- Бутон Изтрий
Думата „Бутон“ не е задължително да присъства в етикета. Важното е предназначението му да е ясно.. Например със screen reader-а JAWS потребителите могат да преминават към следващите или допълнителни бутони, като натиснат клавиша „b“, или към предишни бутони с „Shift +b“, и да изберат или активират желания бутон с „Enter“ или бутона за интервал. Това е ключово за сайтове, предлагащи услуги за хотели и къщи за гости, където процесът на резервация трябва да бъде максимално лесен за всички.
3. Формуляри и полета за въвеждане
Формулярите са също толкова важни. Независимо дали за въвеждане на лична информация, влизане в акаунт или извършване на търсене, ако полетата за въвеждане не са означени, незрящият потребител не може да разбере дали трябва да въведе име, имейл адрес или парола. Добре поставените етикети решават този проблем.
Примери за добре означени полета:
- Поле за търсене
- Поле за търсене на термин/ключова дума
- Поле за въвеждане на име и фамилия
- Поле за имейл адрес или телефонен номер
- Поле за парола
С JAWS потребителите могат да преминават директно към следващи или допълнителни полета за въвеждане, като натиснат клавиша „e“. За навигация към предишни полета се използва „Shift +e“. Съответното поле може да бъде активирано с „Enter“. Кратък звук показва, че полето е активирано и може да се въвежда текст. След въвеждане на информация, полето може да се напусне с клавиша „ESC“ (Escape).
4. Изображения и графики
Едно от най-честите препятствия онлайн е липсата на описание на изображенията и графиките. Когато няма алтернативен текст (alt text), screen reader-ът често съобщава объркваща информация като „Графичен правоъгълник“.
Доброто описание обяснява смисъла на картинката. Например:
- „Човек натиска бутона приемам“
- „Потребител въвежда имейл на брайлов дисплей“
- “Жена натиска бутона палец нагоре с бутона за интервал”
Така незрящият човек получава същия контекст, който зрящият вижда с очите си. С JAWS потребителите могат да преминават от една графика към следваща с натискане на „g“ или към предишна с „Shift +g“.
5. Линкове
Линкът е елемент, който обикновено води до допълнителна информация на уебсайт или отваря нов такъв. Той трябва ясно да показва своята дестинация. Неясни инструкции като “Натисни тук” са безполезни без контекст.
Описания като „Изтегли годишния репорт (PDF)“ дават на незрящите потребители ясни указания.
С клавиша „l“ потребителите могат да преминават към следващ линк, а с „Shift +l“ към предишния. За да се покаже списък с всички линкове, се използва комбинацията „JAWS (Insert) +F7“, а навигацията става със стрелките.
6. Таблици
Някои уебсайтове предоставят обобщение под формата на таблици. С клавиша „t“ потребителите могат да преминават към следваща таблица, а с „Shift +t“ към предишна. За оптимална навигация в таблица се използват комбинациите „ALT +CTRL +стрелка наляво/надясно“ за придвижване между колони и „ALT +CTRL +стрелка нагоре/надолу“ за придвижване между редове. Важно е колоните, редовете и съдържанието на таблицата да бъдат ясно означени.
Примерна таблица:
| Действие | Клавишна комбинация |
| Копиране | Control +c |
| Изрязване | Control +x |
| Поставяне | Control +v |
7. Заглавия
Заглавията са от съществено значение за структурирането на страницата. За зрящите те визуално организират съдържанието; за незрящите служат като ориентири. Страница без заглавия е като книга без глави – трудна за четене и още по-трудна за навигиране.
Примери за добра структра на заглавие:
Всички приложения за Windows – най-добрите приложения за Windows устройства с един поглед
Безплатни Аудиокниги
С JAWS потребителите могат да преминават от едно заглавие към следващо с клавиша „h“ и към предишно със „Shift +h“. Това позволява бързо преглеждане на страницата за релевантна информация.
Добре структурираната страница е не само достъпна, но и по-удобна за използване от всички – и обикновено получава повече посещения.
8. Списък с клавишни комбинации
- Отваряне на адресна лента/нов таб: CTRL +l или CTRL +t
- Навигация по заглавия: „h“ – следващо заглавие, „Shift +h“ – предишно заглавие
- Фокус върху формуляр/поле за въвеждане: „e“ – следващо, „Shift +e“ – предишно. Въвеждане – „Enter“; излизане от полето – „Enter“.
- Изображения/графики: „g“ – следващо, „Shift +g“ – предишно
- Линкове: „l“ – следващ, „Shift +l“ – предишен.
- Списък с всички линкове: JAWS (Insert) +F7
- Превключване между табове: CTRL +Tab
- Навигация в таблици: „t“ – следваща таблица, „Shift +t“ – предишна; колони – ALT +CTRL +стрелки наляво/надясно; редове – ALT +CTRL +стрелки нагоре/надолу
- Бутони: „b“ – следващ бутон, „Shift +b“ – предишен
- Затваряне на таб: CTRL +w или ALT +F4
В заключение
За повечето хора проучването в интернет е даденост, но за незрящите и слабовиждащите то е възможно само ако уебсайтовете са внимателно проектирани. Достъпните сайтове с добре означени бутони, полета, изображения, линкове, таблици и заглавия превръщат интернет в мощен инструмент за учене и справяне с проблеми.
Достъпността не е лукс, а необходимост. Само когато браузърите и уебсайтовете се разработват така, че да бъдат функционални и приобщаващи, незрящите потребители ще могат напълно да се възползват от потенциала на интернет, превръщайки го в това, което трябва да бъде: свободно пространство за всички.
Често задавани въпроси
Достъпността влияе ли на класирането в Google?
Да, изключително много. Google използва алгоритми, които следят за Web Content Accessibility Guidelines (WCAG). Сайтовете, които спазват тези стандарти, се считат за по-качествени и се класират по-напред.
Трудно ли е да направя съществуващия си сайт достъпен?
Зависи от платформата. Повечето модерни шаблони в MAX1.BG са проектирани с мисъл за достъпност. Често е достатъчно просто да добавите описания на снимките и да подредите правилно заглавията (H1, H2, H3).
Кой е най-използваният софтуер за незрящи потребители?
Най-популярните екранни четци са JAWS (платен, професионален) и NVDA (безплатен, с отворен код). И двата софтуера разчитат на правилен HTML код, за да интерпретират уебсайтовете коректно.
