В ответ на мою первую статью «Доступность приложений для пользователей с нарушениями зрения» я получил список вопросов, касающихся доступности сайтов, которые действительно неплохо было бы осветить.
По умолчанию почти все элементы HTML доступны для программ экранного доступа, но если вы хотите добиться полной доступности своего сайта, следуйте следующим рекомендациям:
Вопрос спорный. Если у вас хватит профессионализма сделать сайт с красивым дизайном и в то же время с полной доступностью, то надобность в отдельной адаптированной версии отпадёт сама собой. Но даже у vk.com получилось не очень. Дизайн после улучшения доступности вроде бы не пострадал, но сама доступность откровенно хромает на обе ноги.
Если бы передо мной стоял выбор: сделать отдельную версию с идеальной доступностью или совместить обычную и адаптированную версии, я бы выбрал первое, чтобы не страдали ни дизайн, ни адаптация.
Однозначно не стоит размещать ссылку в конце страницы. Причём здесь имеется в виду не визуально нижняя часть страницы, а конец исходного кода, так как именно в том порядке, в котором элементы расположены в исходном коде, их будет читать программа экранного доступа. Лучшим вариантом будет разместить ссылку первым элементом на странице, но сделать её небольшой. Пользователи скрин-ридеров заметят её в первую очередь, а всем остальным она мешать не будет.
Я не знаю, существуют ли такие инструменты, во всяком случае я о них не слышал. Самый простой способ — надеть наушники, закрыть глаза, включить скрин-ридер и попробовать походить по всем страницам своего сайта. Многим такой способ покажется слишком непривычным, но других предложить не могу.
Ещё один способ — позвать для тестирования сайта незрячих людей, но здесь вы рискуете захлебнуться в бессмысленных жалобах неопытных пользователей, поэтому этот метод тоже надо использовать с осторожностью.
Далее идут вопросы, ответы на которые я даю с точки зрения незрячего пользователя, а не программиста.
Самой распространённой проблемой при работе с формами, наверное, является то, что некоторые формы обновляются о мере их заполнения. К примеру, когда вы выбираете страну, обновляется список городов, когда выбран город, обновляется список районов или станций метро. Это вызывает подвисания скрин-ридера и вылеты виртуального курсора из формы к началу страницы.
Ещё одна проблема, которая делает практически недоступными многие формы — отображение форм в диалоговых окнах. Такие формы очень неудобны для навигации, в них зачастую не читается текст, а многие поля не подписаны, и для пользователя остаётся загадкой назначение того или иного флажка или редактора.
Чтобы правильно ответить на этот вопрос, нужно подробнее объяснить, как незрячий пользователь «видит» web-страницу.
Для него страница — это объектная модель, а не картинка. то есть, если визуально можно кнопку, ссылку или обычный текст сделать одинаковыми, то скрин ридер не обманешь, он обязательно произнесёт «ссылка вход», «кнопка вход» или просто «вход». Такая же ситуация - с похожими буквами латинского и русского алфавитов. Если для обычного пользователя надписи «привет» и «пpивet» при беглом чтении могут показаться одинаковыми, то для скрин-ридера это всегда разные буквы, и читает он их по-разному.
Так что фишинговая страница всегда, может чуть-чуть, совсем немного, но отличается от оригинальной, и, если неопытный пользователь может перепутать оригинал с подделкой, то продвинутый юзер, часто проводящий платежи через интернет, почти всегда заметит подмену.
Избыток рекламы на сайтах — одна из самых больших проблем всех незрячих пользователей. Иногда её просто слишком много, что затрудняет навигацию по сайту, иногда она постоянно обновляется, сбрасывая виртуальный курсор на начало страницы, а иногда, если реклама сопровождается звуком, этот звук заглушает речь программы экранного доступа, ввергая многих неопытных, а иногда и опытных пользователей в панику. Представьте, что внезапно по монитору начинают ползать огромные розовые жуки, закрывая вам весь обзор и не давая даже закрыть страницу с рекламой. Неприятно.
Однозначного ответа дать не могу. Наиболее доступной можно назвать уже упомянутую выше версию для незрячих пользователей почты Яндекса.
Почти доступна полная версия vk.com, но присутствует множество грубейших ошибок. В этом нет вины разработчиков, здесь скорее налицо исполнение мечты неопытного пользователя: куча лишней информации, лишних ориентиров, зато не заблудишься. Доступных сайтов много, проще назвать полностью или почти полностью недоступные, например, уже упомянутая мной в первой статье web-версия telegram, официальный сайт сбербанка. Им, конечно, можно пользоваться, но с затруднениями. В эту же категорию можно отнести и сайт ГосУслуги, о котором я тоже уже говорил.
Я ей не пользуюсь, потому что размер шрифта мне не важен. Я вообще не работаю с компьютером визуально.
Siri я не использую, потому что у меня не IPhone, про Alexa раньше никогда не слышал, а Cortana в Windows 10, как впрочем и на Windows Phone, недоступна на русском языке.
Смартфоном я пользуюсь постоянно, но просматривать web-сайты предпочитаю на компьютере, потому что, к сожалению, связки TalkBack + Chrome & Firefox на Android крайне нестабильны и неудобны. А мобильные версии сайтов можно использовать и с компьютера, что очень часто спасает от лишнего контента и упрощает навигацию. Так было в vk.com, до тех пор, пока не сделали адаптивную полную версию.
Нет, такой режим я не использую, но, может быть, в ближайшем будущем попробую.
Здесь работает следующее правило: чем крупнее компания, тем меньше её волнует мнение отдельного пользователя.
к примеру, небольшой интернет-магазин с аудиторией человек в 500 гораздо охотнее ответит на сообщение о проблеме и исправит её, чем такой гигант как Samsung или Sony.
Доступности ВК добивались всей Россией почти месяц, и, только собрав более 200000 подписей под соответствующей петицией на change.org, мы смогли что-то изменить.
С сайтами на английском языке я работаю без перевода, за исключением отдельных случаев, а сайтов на других языках пока не встречал в тех количествах, чтобы задумываться об автопереводе.
А вообще функции автоперевода очень часто убивают любую доступность напрочь, делая даже самый адаптированный сайт неудобным для невизуального использования.
На этом всё.
Что желательно сделать на сайте для повышения доступности
По умолчанию почти все элементы 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, мы смогли что-то изменить.
Как вы работаете с сайтами на других языках? Используете ли функции автоперевода в браузере?
С сайтами на английском языке я работаю без перевода, за исключением отдельных случаев, а сайтов на других языках пока не встречал в тех количествах, чтобы задумываться об автопереводе.
А вообще функции автоперевода очень часто убивают любую доступность напрочь, делая даже самый адаптированный сайт неудобным для невизуального использования.
На этом всё.
Использованные материалы
- Сайт для тех, кто делает сайты
- Заметки о создании адаптивных сайтов от Maniyax
- Множество коротких статей с разных сайтов
