Как сделать сайты доступнее для пользователей с нарушениями зрения

    В ответ на мою первую статью «Доступность приложений для пользователей с нарушениями зрения» я получил список вопросов, касающихся доступности сайтов, которые действительно неплохо было бы осветить.

    Что желательно сделать на сайте для повышения доступности


    По умолчанию почти все элементы HTML доступны для программ экранного доступа, но если вы хотите добиться полной доступности своего сайта, следуйте следующим рекомендациям:

    • Добавьте атрибут alt к изображениям, кратко, можно сокращённо, описав картинку. Ни в коем случае не используйте надписи вида «img12345» или «image1948372» — они не облегчат, а, наоборот, существенно усложнят навигацию.

    • Если при разметке сайта использовались контейнеры div, добавьте к ним атрибут role, тем самым дав понять скрин-ридеру, что здесь находится меню (role=«navigation»), основное содержимое (role=«main») или подвал сайта (role=«contentinfo»). Список всех возможных значений атрибута role и информацию о его использовании вы можете найти здесь.

    • Если на странице присутствуют несколько контейнеров с одинаковым значением role, используйте атрибут area-label, в значении которого по-русски кратко описывайте предназначение контейнера. Если вы напишете <div role=«navigation» area-label=«главное меню»>something</div>, то скрин-ридер прочитает пользователю «главное меню навигация ориентир», что довольно удобно.
      Отличный пример использования адаптивной разметки с помощью role и area-label можно увидеть в исходном коде mail.yandex.ru, в режиме для пользователей программ экранного доступа.

    • При желании добавьте горячие клавиши к значимым ссылкам, например, к элементам главного меню. Это делается с помощью атрибута accesskey=«X», где X — любая буква латинского алфавита.

    • Если вам нужно отобразить какой-либо текст при наведении мыши на ссылку, кнопку или другой элемент, сделайте это с помощью атрибута title, а не при помощи JavaScript.

    Чего делать не надо


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

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

    • Использование технологии Flash полностью ломает любую доступность, так как элементы, созданные с помощью неё скрин-ридер даже не распознаёт как отдельные объекты.

    • Правильная разметка — это хорошо, но не злоупотребляйте атрибутами role и area-label, их избыток тоже затрудняет навигацию.

    • Как недавно выяснилось, некоторые элементы HTML5 могут некорректно распознаваться программами экранного доступа в некоторых браузерах. Но здесь чётких рекомендаций пока нет, это тема для отдельного исследования.

    Нужна ли сайту отдельная версия для пользователей с нарушениями зрения?


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

    Если бы передо мной стоял выбор: сделать отдельную версию с идеальной доступностью или совместить обычную и адаптированную версии, я бы выбрал первое, чтобы не страдали ни дизайн, ни адаптация. 

    Где разместить ссылку на адаптированную версию сайта?


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

    Как проверить сайт на доступность? существуют ли специальные инструменты?


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

    Ещё один способ — позвать для тестирования сайта незрячих людей, но здесь вы рискуете захлебнуться в бессмысленных жалобах неопытных пользователей, поэтому этот метод тоже надо использовать с осторожностью.

    Далее идут вопросы, ответы на которые я даю с точки зрения незрячего пользователя, а не программиста.

    С какими проблемами вы сталкиваетесь при работе с формами?


    Самой распространённой проблемой при работе с формами, наверное, является то, что некоторые формы обновляются о мере их заполнения. К примеру, когда вы выбираете страну, обновляется список городов, когда выбран город, обновляется список районов или станций метро. Это вызывает подвисания скрин-ридера и вылеты виртуального курсора из формы к началу страницы.

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

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


    Чтобы правильно ответить на этот вопрос, нужно подробнее объяснить, как незрячий пользователь «видит» web-страницу.

    Для него страница — это объектная модель, а не картинка. то есть, если визуально можно кнопку, ссылку или обычный текст сделать одинаковыми, то скрин ридер не обманешь, он обязательно произнесёт «ссылка вход», «кнопка вход» или просто «вход». Такая же ситуация  - с похожими буквами латинского и русского алфавитов. Если для обычного пользователя надписи «привет» и «пpивet» при беглом чтении могут показаться одинаковыми, то для скрин-ридера это всегда разные буквы, и читает он их по-разному.

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

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


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

    Приведите пример отличного по доступности сайта


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

    Почти доступна полная версия vk.com, но присутствует множество грубейших ошибок. В этом нет вины разработчиков, здесь скорее налицо исполнение мечты неопытного пользователя: куча лишней информации, лишних ориентиров, зато не заблудишься. Доступных сайтов много, проще назвать полностью или почти полностью недоступные, например, уже упомянутая мной в первой статье web-версия telegram, официальный сайт сбербанка. Им, конечно, можно пользоваться, но с затруднениями. В эту же категорию можно отнести и сайт ГосУслуги, о котором я тоже уже говорил.

    Пользуетесь ли вы настройкой браузера, позволяющей увеличить размер шрифта? часто ли это работает?


    Я ей не пользуюсь, потому что размер шрифта мне не важен. Я вообще не работаю с компьютером визуально.

    Используете ли вы голосовые помощники вроде Siri, Alexa, Cortana?


    Siri я не использую, потому что у меня не IPhone, про Alexa раньше никогда не слышал, а Cortana в Windows 10, как впрочем и на Windows Phone, недоступна на русском языке. 

    Часто ли вы пользуетесь смартфоном? Удобнее ли Мобильные сайты десктопных? Мобильные сайты содержат меньше мусора, является ли это преимуществом?


    Смартфоном я пользуюсь постоянно, но просматривать web-сайты предпочитаю на компьютере, потому что, к сожалению, связки TalkBack + Chrome & Firefox на Android крайне нестабильны и неудобны. А мобильные версии сайтов можно использовать и с компьютера, что очень часто спасает от лишнего контента и упрощает навигацию. Так было в vk.com, до тех пор, пока не сделали адаптивную полную версию.

    Используете ли вы режим чтения в браузере, который вырезает шелуху?


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

    Пытаетесь ли вы сообщать владельцам сайтов о проблемах с доступностью? Помогает ли это?


    Здесь работает следующее правило: чем крупнее компания, тем меньше её волнует мнение отдельного пользователя.

    к примеру, небольшой интернет-магазин с аудиторией человек в 500 гораздо охотнее ответит на сообщение о проблеме и исправит её, чем такой гигант как Samsung или Sony. 

    Доступности ВК добивались всей Россией почти месяц, и, только собрав более 200000 подписей под соответствующей петицией на change.org, мы смогли что-то изменить.

    Как вы работаете с сайтами на других языках? Используете ли функции автоперевода в браузере?


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

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

    Использованные материалы


    Поделиться публикацией
    Похожие публикации
    Реклама помогает поддерживать и развивать наши сервисы

    Подробнее
    Реклама
    Комментарии 14
    • –3
      А если сделать отдельный сервис (или софт, например простенький браузер), который переваривает любые сайты и вообще любое содержимое страниц — включая пдф документы, если они не отсканированы — и адаптирует их для людей с нарушением зрения (а заодно и других функций)?
      Причем, если делать браузер, то он может использоваться вообще во всем мире, и это поможет просто огромному количеству людей.

      Мне представляется, что лучше сделать один хороший инструмент, чем миллионы элементов подгонять под людей, тратя человекочасы и бюджеты (кстати о бюджетах, далеко не каждый заказчик сайта захочет заботиться о людях с ограниченными возможностями. Опять же потому, что это удорожает и увеличивает сроки).
      • +2
        Чтобы этот браузер работал, у страницы должна быть правильная разметка)
        • –3
          Я бы не согласился — просто с обывательской точки зрения я думаю, что браузер можно «научить» понимать и «правильную» разметку, и неправильную. Собственно об этом и идет речь.
          Есть же машинное обучение, например. Почему его нельзя использовать? Показывать браузеру сайты, корректировать его ошибки и т.д. чтобы в итоге он всё переводил в доступный вид. Разумеется, это время, и для такого проекта нужно иметь команду желающих
          • +2
            Я не очень верю в это. Возьмем к примеру список задач. Если он помещен внутрь ul элемента, то скринридер дойдя до него скажет что-то типа: «Список элементов, пункт первый, полить цветы, пункт второй...» и т.д.
            А если верстальщик засунет это все в div, то тогда скринридер будет просто читать всю страницу сплошным текстом без препинаний.

            Ну или навигация сайта: пока верстальщик в nav не поместит ссылки, машина не поймет какая семантика у этой разметки. Это ведь может быть и просто облако тегов и ссылки на сайты спонсоров и вообще что угодно, пока автор контента сам явно не укажет какова роль у этих элементов. И никакая нейронная сеть не поможет)
            • –3
              Вы описали работу скринридера же. То есть подход все с «той же» стороны.

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

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

              Проблемы вижу только две:
              Никому это не нужно, потому что на таком вряд ли заработаешь
              Это серьезная объемная работа, для которой нужно много человекочасов хороших специалистов
              • 0
                Теоретически, если сторонний верстальщик может с довольно высокой точностью понять что есть что в разметке другого верстальщика, то и машину можно научить думать подобным алгоритмом. Но опять же, лично мое мнение, что к тому времени и браузеров то не останется в привычном для нас виде и необходимость в этих разработках может отпасть сама собой)
              • 0
                Насчёт работы скрин ридеров вы не совсем правы. Я не отвечаю за JAWS, но NVDA, которым пользуются наверное 70% незрячих и я в том числе, читает немного не так. ul это маркерованный список, поэтому читать он его будет так:
                мы доходим до списка и выбираем первый элемент
                «список из 5 элементов маркер полить цветы»
                жмём стрелку вниз
                «маркер сходить в магазин»
                доходим до последнего элемента или «прыгаем» на другой элемент уже вне списка
                «вне список»

                немного криво, но изначально скрин ридер был американским, поэтому читает, как перевели.
                • 0
                  Насчет ul это я ошибся, надо было ol в пример ставить)
                  Я давно тестировал на маке через их встроенный voiceover и там примерно так все работало)
                  В общем отличия от NVDA видимо не значительные.
          • 0
            Прочитал все ваши комментарии на эту тему, но отвечаю именно на первый. Во-первых, такой браузер будет требовать огромную процессорную мощность, так как это самообучение и анализ больших объёмов информации. Скрин ридеры сами по себе на слабых компьютерах очень подтормаживают систему, а такой браузер будет просто ронять её. Я согласен, что не все будут заниматься доступностью, но крупные компании ради сохранения имиджа точно будут. Не сразу, но они реагируют на отзывы и все-таки что-то меняют.
            • –1
              Браузер лишь гипотеза — может быть что-то другое.
              Вообще, я считаю что техническая реализация в любом случае есть, был бы проект.

              А самообучение, оно же будет только в процессе разработки и далее в фоновом режиме на серверах будет анализировать, а результаты пользователям выдавать уже в виде готового материала. Да хотя бы просто кодом с кучей условий
          • +1
            Привет. Есть вопрос по скринридерам:
            Допустим на странице имеется элемент input type=text aria-invalid=false. Если введенное пользователем значение не проходит валидацию, то необходимо присвоить атрибуту aria-invalid значение true. Это можно сделать двумя способами:
            1) классическим — поменять значение атрибута через js;
            2) современным (angular, react) — отрендерить компонент заново с измененным значением атрибута;

            Так вот я давно читал о том, что второй способ не рекоммендуется, ибо скринридер не всегда может понять, что это изменился стэйт у старого элемента. Он иногда думает, что старый компонент исчез и вместо него появился новый, которого раньше небыло и от этого впадает в ступор. Интересно узнать ваш пользовательский опыт в этом моменте.
            • 0
              Как вы понимаете, я не всегда смотрю исходный код проблемной страницы, поэтому не могу сказать, в каких именно случаях возникают проблемы, но да, такое бывает, что скрин ридер после нескольких неверных символов сбрасывается на начало страницы или зависает, а потом все равно сбрасывается. Если вы приведёте пример сайта с такой валидацией в формах, я могу посмотреть и сказать вам результат.
              • +2
                Хорошо, как мне на глаза попадется нечто похожее, то обращусь в личку с просьбой помочь протестировать, если Вы не против)
                • +1
                  Конечно, обращайтесь обязательно. Я только за то, чтобы тестировать сайты на доступность и помогать в её улучшении.

            Только полноправные пользователи могут оставлять комментарии. Войдите, пожалуйста.