Автор: Рубрики: Общее Просмотрено: 379
Как оптимизировать сайт для незрячих?
14Окт2019

Как оптимизировать сайт для незрячих?

Як оптимізувати сайт для незрячих?

15 октября каждого года отмечается Международный день белой трости (International White Cane Safety Day). Белая трость – символ слепоты, а данный день был отмечен в календаре в знак напоминания обществу о людях с ограниченными возможностями. “Толерантность, Равноправие, Интеграция” – основные принципы Международного дня белой трости.

Сегодня около 3,5% людей имеют проблемы со зрением но по-прежнему они могут пользоваться интернетом благодаря программам экранного доступа. Данные программы считывают экранный текст и предоставляют подсказки пользователю для навигации по сайту.

Чтобы сделать жизнь людей проще, нужно позаботится о многих сферах повседневной жизни, в том числе и об удобcтве использования возможностей интернета. В данной статье мы детально рассмотрим тему оптимизации сайтов для незрячих.

Акция! Сегодня действительно акция. Промо код доступен на Главной странице сайта По нему возможно приобрести Хостинг или ВПС/ВДС сервер со скидкой 50%, при заказе услуги на месяц или квартал. Так мы хотим обратить внимание на то, сколько привилегий, акций и промо-предложений остаются “невидимыми” перед людьми с особыми потребностями.

В процессе своей работы менеджеры хостинга HyperHost.UA предоставляли консультации также и незрячим клиентам. Такие пользователи часто ничем не отличаются в своих запросах от обычных пользователей, но неудобный сайт или пренебрежение правилами, описанными ниже, могут значительно усложнить их опыт взаимодействия.

На самом деле адаптировать сайт для слабовидящих несложно, поэтому мы рассмотрим основные этапы адаптации.

Если проанализировать весь процесс развития сайтостроения, то изначально основное требование к сайтам была их работоспособность. То есть если сайт работает, это уже хорошо. Далее разработчики стали задумываться о внешней подачи сайтов и их привлекательности, и уже только потом на первое место поставили критерий удобности использования. Сегодня уже очень важным аспектом стала доступность сайтов. Имеется ввиду доступность не только на разных устройствах, но и доступность для разных категорий людей, в том числе и с ограниченными возможностями.

В 1996 году был создан Консорциум Всемирной Паутины. Один из главных вопросов, который рассмотрел данный консорциум – это улучшение критериев доступности веб-пространства. Компании Microsoft, IBM, Adobe поддержали подобные инициативы, в итоге популярные браузеры имеют специальные настройки доступности и поддержку WAI-ARIA разметки для полноценного использования Сети пользователям с физическими ограничениями органов зрения и опорно-двигательного аппарата.

Также весьма просто оценить Ваш сайт на лояльность к незрячим – подключить в тестовом режиме голосового помощника. Например Google Chrome поддерживает плагин ChromeVox Classic Extension. Подключите его и пройдитесь по вашему сайту.

Если вы решили провести хотя бы базовую адаптацию вашего ресурса, то изначально необходимо обратить внимание на следующие пункты.

1. Нетекстовый контент должен иметь текстовую версию. Конечно же, для подобной манипуляции есть исключения, к примеру, элементы управления и ввода информации предоставить в виде текста нет возможности, но для них можно применить тег label и атрибуты alt, title. Именно с их помощью можно донести смысл элемента.

Пример№1
Пример стандартного акционного банера с текстом, картинкой и кнопкой

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

К сожалению такое очень часто происходит в электронной коммерции – красивая графика и дизайнерские решения либо не позволяют использовать текст, либо считают его не уместным. Все зависит только от альтернативного описания.

Пример №2
Пример рекламного баннера, где смысл баннера и описание alt не совпадают

В подобном случае используйте хотя бы краткие текстовые пояснения. Отдельная категория, которую нет возможности подать в виде текста – это капча. Но для нее можно подать альтернативу – аудио капчу.

2. Медиа контент с альтернативной текстовой версией подачи во многом упростит его восприятие. Тест с описанием важных моментов к видео прекрасно дополнит подачу материала, а если еще есть и субтитры, то это вдвойне хорошо для оптимизации подобной страницы.

Делайте контент таким, чтобы его можно было подать в разных видах без потери структуры. Специальные ассистивные технологии, которые озвучивают текст, воспринимают HTML-страницу как последовательность текста. Поэтому соблюдение в исходном коде страницы последовательности блоков и соответствие их очень важно при подаче такой информации.

3. Прослушивание контента не должно усложнять жизнь пользователей, поэтому максимально упростите данный процесс. Особое внимание уделите аудиоконтенту, который проигрывается автоматически. Каждый из нас уже встречал на просторах Интернета страницы сайтов, которые не только визуально показывают, но и озвучивают автоматически свои рассказы без согласия пользователя. Это нереально раздражает. Представьте как сможет найти источник произведения звука незрчий человек. Если уже такой элемент присутствует на ваших страницах, сделайте возможность убавить громкость непосредственно на странице сайта.

4. Если вашим сайтом можно управлять используя исключительно возможности клавиатуры, это во многом упростит работу с ним для людей с ограниченными возможностями, особенно это касается форм заполнения на вашем сайте. Для проверки уберите мышь и попробуйте работать исключительно средствами клавиатуры. Если получилось, то это явно хороший признак оптимизации вашего ресурса. 

5. Для ознакомления с контентом у ваших посетителей сайта должно быть достаточно времени. Речь идет о баннерах со специальными предложениями, онлайн-тестах, слайдах, которые имеют ограниченное время показа. Ограничения во времени показа составляют проблему не только для слабовидящих, но и для тех, кто просматривает сайт на иностранном языке или пожилым людям. Хорошим решением в данном случае будет возможность поставить паузу вручную со стороны пользователя для изучения вашего предложения. 

6. Хорошая система поиска и навигации на вашем сайте станет очень полезной для людей, у которых есть проблемы со зрением. 
– К каждой странице сайта нужен заголовок, который описывает контент;
– Текст ссылки должен четко описывать соответствующую страницу сайта;
– Поиск по странице должен предоставляться в нескольких удобных вариантах, например, стандартная навигация, карта сайта, строка поиска;
– Учитывая возможности перемещении по форме с помощью только клавиатуры, обратите внимание на достаточное выделение активного поля формы;
– Каждая страница сайта должна раскрывать всю суть, чтобы было понятно, на каком сайте сейчас находится пользователь. 

7. Ограниченное число ссылок на странице еще одно важное преимущество, которого нужно достигнуть в процессе оптимизации. Данное правило следует использовать, если ваш сайт рассчитан на реальных посетителей. Когда пользователь с ограниченными возможностями зрения открывает страницу с помощью специальной программы прослушивания, то он слышит количество ссылок на странице. Если таких ссылок очень много, то вполне предсказуемо, что посетитель уйдет с такого сайта и будет искать более простой и удобный ресурс.

8. Детальный анкорный текст сделает восприятие вашего сайта более простым. Например,  слабовидящие пользователи часто включают функцию по прослушиванию ссылок. Кнопки вида “Нажмите здесь” или “Подробнее” вообще не информативны. Для детальной информации нужно прослушивать около анкорный текст. Поэтому более оптимизированные  надписи, например, “Подробно о продукте Х” или другие.

Главное правило, которого необходимо придерживаться в процессе оптимизации сайта – это сделать весь текстовый контент удобочитаемым и понятным. Тогда ваш ресурс будет однозначно восприниматься легче и проще всеми пользователями Интернета. 

После прочтения данных советов возникает вполне логичный вопрос “Может сделать отдельную версию сайта?”. Действительно подобные эксперименты уже проводили многие компании. Но, как оказалось в результате, подобные версии очень редко используются слабовидящими из-за того, что информация на таких версиях не всегда актуальна, так как ее очень редко обновляют.

Пользователи с ограниченными возможностями лучше используют обычные сайты, но как уже и говорилось с некоторыми доработками по юзабилити. Например, простые тестовые навигационные ссылки в нижней части страницы во многом упростят жизнь при работе с сайтами в интернете.

После всего выше написанного можно только подытожить, что оптимизация сайта для пользователей с ограниченными возможностями зрения, не занимает много времени. И это нужно делать не только в честь Международного дня белой трости, но и в общем для повышения юзабилити вашего сайта. Ведь удобность использования ресурса напрямую влияет на его продвижение и развитие в дальнейшем.

 

Як оптимізувати сайт для незрячих

15 жовтня кожного року відзначається Міжнародний день білої тростини (International White Cane Safety Day). Біла тростина – символ сліпоти, а даний день був відзначений в календарі в знак нагадування суспільству про людей з обмеженими можливостями. “Толерантність, Рівноправність, Інтеграція” – основні принципи Міжнародного дня білої тростини.

Сьогодні близько 3,5% людей мають проблеми із зором, але як і раніше вони можуть користуватися інтернетом завдяки програмам екранного доступу. Дані програми зчитують екранний текст і надають підказки користувачеві для навігації по сайту.

Щоб зробити життя людей простішим, потрібно подбати про багато сфер повсякденного життя, в тому числі і про зручність використання можливостей інтернету. У даній статті ми детально розглянемо тему оптимізації сайтів для незрячих.

Акція! Сьогодні дійсно акція. Промо код доступний на Головній сторінці сайту. Застосувавши код можна придбати Хостинг або ВПС / ВДС сервер зі знижкою 50% при замовленні послуги на місяць та квартал. Саме так ми хочемо звернути увагу на те, скільки привілеїв, акцій і промо пропозицій залишаються “невидимими” для людей з особливими потребами.

В процесі своєї роботи менеджери хостингу HyperHost.UA надавали консультації незрячим клієнтам також. Такі користувачі часто нічим не відрізняються в своїх запитах від звичайних користувачів, але незручний сайт або нехтування правилами, описаними нижче, можуть значно ускладнити їх досвід взаємодії.

 

Насправді адаптувати сайт для людей з вадами зору нескладно, тому ми розглянемо основні етапи адаптації.

Якщо проаналізувати весь процес розвитку сайтобудування, то спочатку основна вимога до сайтів була їх працездатність. Тобто якщо сайт працює, це вже добре. Далі розробники стали замислюватися про зовнішню подачу сайтів і їх привабливість, і вже тільки потім на перше місце поставили критерій зручності використання. Сьогодні вже дуже важливим аспектом стала доступність сайтів. Мається на увазі доступність не тільки на різних пристроях, а й доступність для різних категорій людей, в тому числі із обмеженими можливостями.

У 1996 році був створений Консорціум Всесвітньої Павутини. Одне з головних питань, яке розглянув даний консорціум – це поліпшення критеріїв доступності веб-простору. Компанії Microsoft, IBM, Adobe підтримали подібні ініціативи, в результаті популярні браузери мають спеціальні налаштування доступності та підтримку WAI-ARIA розмітки для повноцінного використання Мережі користувачами з фізичними обмеженнями органів зору та опорно-рухового апарату.

Доволы просто оцінити Ваш сайт на лояльність до незрячих підключивши у тестовому режимі голосвого помічника. Наприклад Google Chrome підтримує плагін ChromeVox Classic Extension. Підключіть його та пройдіться по власному сайту.

Якщо ви вирішили провести хоча б базову адаптацію вашого ресурсу, то спочатку необхідно звернути увагу на наступні пункти.

1. Нетекстовий контент повинен мати текстову версію. Звичайно ж, для подібної маніпуляції є винятки, наприклад, елементи керування та вводу інформації надати у вигляді тексту немає можливості, але для них можна застосувати тег label і атрибути alt, title. Саме з їх допомогою можна донести сенс елемента.  Використовуйте хоча б короткі текстові пояснення для складних елементів вашого сайту.

Пример№1
Приклад стандарного акційного банеру з текстом, кортинкою та кнопкою.

Зліва представлено стандартний макет банера, котрий ми використовуємо на головній сторінці сайту під час акцій. Якби ми подали увесь контент цільним зображенням, програма-помічник лише б указала на сам банер. Проте без опису зображення, весь контент залишиться поза досяжністю незрячих користувачів.

Нажаль таке часто спостерігається в електронній комерції – гарна графіка та дизайнерські рішення або не дозволяють використання тексту, або рахують його зайвим. В цьому випадку, все залежатиме від альтернативного опису.

Пример №2
Приклад рекламного банера, де суть та опис у alt не співпадають

 

 

Окрема категорія, яку немає можливості подати у вигляді тексту – це капча. Але для неї можна подати альтернативу – аудіо капчу.

2. Медіа контент з альтернативною текстовою версією подачі багато в чому спростить його сприйняття. Текст з описом важливих моментів до відео прекрасно доповнить подачу матеріалу, а якщо ще є і субтитри, то це удвічі покращить оптимізацію подібної сторінки. Робіть контент таким, щоб його можна було подати в різних видах без втрати структури. Спеціальні допоміжні технології, які озвучують текст, сприймають HTML-сторінку як послідовність тексту. Тому дотримання в вихідному коді сторінки послідовності блоків і відповідність їх дуже важлива при подачі такої інформації.

3. Прослуховування контенту не має ускладнювати життя користувачів, тому максимально спростіть даний процес. Особливу увагу приділіть аудіоконтенту, який програється автоматично. Кожен з нас уже зустрічав на просторах Інтернету сторінки сайтів, які не тільки візуально показують, а й озвучують автоматично свої розповіді без згоди користувача. Це нереально дратує. Уявіть як можна знайти джерело звуку незрчій людина. Якщо вже такий елемент присутній на ваших сторінках, зробіть можливість зменшити гучність безпосередньо на сторінці сайту.

4. Якщо вашим сайтом можна управляти використовуючи виключно можливості клавіатури, це багато в чому спростить роботу з ним для людей з обмеженими можливостями, особливо це стосується форм заповнення на вашому сайті. Для перевірки приберіть мишу і спробуйте працювати виключно засобами клавіатури. Якщо вийшло, то це явно добра ознака оптимізації вашого ресурсу.

5. Для ознайомлення з контентом у ваших відвідувачів сайту має бути достатньо часу. Йдеться про банери зі спеціальними пропозиціями, онлайн-тести, слайди, які мають обмежений час показу. Обмеження в часі показу становлять проблему не тільки для людей з вадами зору, а й для тих, хто переглядає сайт іноземною мовою або літнім людям. Хорошим рішенням в даному випадку буде можливість поставити паузу вручну з боку користувача для вивчення вашої пропозиції.

6. Хороша система пошуку і навігації на вашому сайті стане дуже корисною для людей, у яких є проблеми із зором.
–  До кожної сторінки сайту потрібен заголовок, який описує контент;
–  Текст посилання повинен чітко описувати відповідну сторінку сайту;
–  Пошук по сторінці повинен надаватися в декількох зручних варіантах, наприклад, стандартна навігація, карта сайту, рядок пошуку;
–  З огляду на можливості переміщення по формі за допомогою тільки клавіатури, зверніть увагу на достатнє виділення активного поля форми;
–  Кожна сторінка сайту повинна розкривати всю суть, щоб було зрозуміло, на якому сайті зараз знаходиться користувач.

7. Обмежене число посилань на сторінці ще одна важлива перевага, якої потрібно досягти в процесі оптимізації. Дане правило слід використовувати, якщо ваш сайт розрахований на реальних відвідувачів. Коли користувач з обмеженими можливостями зору відкриває сторінку за допомогою спеціальної програми прослуховування, то він чує кількість посилань на сторінці. Якщо таких посилань дуже багато, то цілком передбачувано, що відвідувач піде з такого сайту і буде шукати більш простий і зручний ресурс.

8. Детальний анкорний текст зробить сприйняття вашого сайту простішим. Наприклад, слабозорі користувачі часто включають функцію по прослуховуванню посилань. Кнопки виду “Натисніть тут” або “Детальніше” взагалі не інформативні. Для детальної інформації потрібно прослуховувати близький анкорний текст. Тому більш оптимізовані написи, наприклад, “Детально про продукт Х” або інші.

Головне правило, якого необхідно дотримуватися в процесі оптимізації сайту – зробити весь текстовий контент легким для читання і максимально зрозумілим. Тоді ваш ресурс буде однозначно сприйматися легше і простіше усіма користувачами Інтернету.

Після прочитання даних порад виникає цілком логічне запитання “Чи може краще зробити окрему версію сайту?“. Дійсно подібні експерименти вже проводили багато компаній. Але, як виявилося в результаті, подібні версії дуже рідко використовуються відвідувачами зі слабким зором через те, що інформація на таких версіях не завжди актуальна, так як її дуже рідко оновлюють.

Користувачі з обмеженими можливостями краще використовують звичайні сайти, але як вже і говорилося, з деякими доробками по юзабіліті. Наприклад, прості тестові навігаційні посилання в нижній частині сторінки багато в чому спростять роботу з сайтами в інтернеті.

Після всього вище написаного можна тільки зробити висновок, що оптимізація сайту для користувачів з обмеженими можливостями зору, не займає багато часу. І це потрібно робити не тільки в честь Міжнародного дня білої тростини, а й загалом для підвищення юзабіліті вашого сайту. Адже зручність використання ресурсу безпосередньо впливає на його просування та розвиток в подальшому.

380 раз(а) 1 Сегодня просмотрено раз(а)
  • Lavron

    Короче говоря, установил расширение в браузере и большую часть статьи дослушал, а не дочитал.
    Только курсором каждый абзац приходилось выделять, чтобы робот прочла мне инфу. Да и вообще всё подряд озвучивает, что не всем надо.
    Идея для нового поста: обзор проги для зрячих, но крайне ленивых читателей.

    • Семён Семёныч

      Вот про это я и писал – будет каша! Тут нужно либо специально контент для слабовидящих готовить, либо ограничиться кнопкой размера шрифта и не парить себе мозг.

      • Марина Семёнова

        А нет ли какой цмс специально для незрячих? Ну чтобы все необходимые функции изначально были заложены в панель управления сайта?
        Или на какой цмс это удобнее всего реализовать – https://hyperhost.ua/ru/hosting-for-cms ?

        • Семён Семёныч

          Мне такого ещё ни разу не стречалось, но думаю что определённые наработки в этой сфере есть. Незрячих же полным-полно в нашей стране, да и во всём мире.

          • Владимир Дот

            У 1с-битрикс есть специальный модуль Мибок подстраивающий сайт для слабовидящих. Там есть встроенный движок озвучивания материала на странице, однако стоит он 15900 рублей.

  • Семён Семёныч

    Честно признаюсь, я так и не понял как атрибуты альта могут быть прочитаны человеком со слабым зрением или вообще без него. Большая яркая надпись на баннере ведь лучше маленькой пометке в редакторе страницы?! Если это будет делат какое-то дополнение в бразуре, то будет мешанина из картинок ведь? По мне дак самое главное – большая кнопка смены шрифта на всём сайте. В других случаях возня с такой подстройкой под слепых, явно не принесёт прибыли больше чем потраченное время. Уж извините, но тратить дни на то, чтобы слабовидящие могли пользоваться вашим сайтом глупо, особенно если он новый. Сейчас и так конкуренция бешеная, а так вообще в минус улетишь.

    • Незрячие пользователи используют помощники – ридеры, которые озвучивают все, что изображено на мониторе.
      Без описания изображения, программа просто озвучит что в этом месте есть картинка. Вместе с тем он никогда не узнает, что изображено на картинке.

      • Марина Семёнова

        Короче, он озвучит то, что человек указал в описании к картинке, тоесть то что указано между тегов альт. Именно поэтому содержимое картинки и должно всегда совпадать с описанием.

        • Семён Семёныч

          Ну слабовидящий ещё как то может увидеть картинку или баннер, а как быть если он совсем ничего не видит? В сериале “сорвиголова” главный слепой герой сидел в инернете через панель создающую веревод на шрифт брайля, не знаю есть ли такое вообще в реальности? Такое я ещё как то могу понять.

          • Владимир Дот

            Тут надо в эту тему конкретно вникать и желательно, чтобы кто-нибудь помогал. Сложно понять то, чего не можешь толком проверить.