10 способов сделать свой сайт доступным

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

Многие дизайнеры на самом деле берут хорошие, доступные CMS, а затем создают проекты с большими проблемами доступности.

Я юрист, дизайнер веб-сайтов и консультант по доступности/разнообразию в Австралии. Консультируя корпоративный, государственный и образовательный секторы, я обнаружил, что многие сайты недоступны и предлагают многим пользователям плохой опыт.

Почему важна доступность?

В 2010 году 10% людей в развитых странах не могли воспринимать печатную информацию. Этот показатель составлял 15% в неразвитых странах.

В Австралии доступность считается достаточно важной, чтобы я мог подать на вас в суд, если ваш сайт недоступен. Потрясенный?

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

Дорогой? Нет, на самом деле все возвращается к стандартам дизайна, потому что это действительно базовые вещи.

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

№1. Сделайте ваш сайт удобным в использовании

Мне не нужно рассказывать вам, ребята, как проектировать. Но эти три ключевых принципа помогут пользователям с ограниченными возможностями:

1. Сделайте сайты удобными для чтения и понимания
2. Сделайте сайты удобными для навигации
3. Сделайте сайты удобными для использования на мобильных устройствах

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

Программы для чтения с экрана, с помощью которых я тестирую свои сайты, ничем не отличаются от роботов Google (за исключением того, что первыми появились слепые технологии).

№ 2. Протестируйте с помощью специального программного обеспечения

Знаете ли вы, что на ПК есть специальные программы, помогающие перемещаться по экрану и читать его? Вы, наверное, знали, но знаете ли вы также, что в ядро ​​мобильных устройств встроено программное обеспечение специальных возможностей? Это программное обеспечение может читать людям, в том числе с нарушениями зрения:

• Apple (iOS) использует VoiceOver;
• Android использует Talkback;
• Windows использует экранный диктор.

Почти все дизайнеры веб-сайтов включают меню в шаблон, но 95% не могут быть прочитаны ни с одной из вышеперечисленных технологий! Большинство этих служб специальных возможностей не могут распознать существование меню, потому что оно неправильно закодировано. Чаще всего проблема в том, что меню плохо закодировано или нечетко помечено тегами.

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

№3. Не пишите все заглавными буквами

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

Это научно проверено и доказано, ПОТОМУ ЧТО ВСЕ ЗАГЛАВНЫЕ БУКВЫ ТРУДНЫ ДЛЯ ЧТЕНИЯ!

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

№ 4. Четко объясняйте свои ссылки

Кнопки «Подробнее» или «Нажмите здесь» не сообщают Google (или тем, кто использует программы чтения с экрана), что скрывается за ссылкой. Просто вырвите ссылку из контекста, чтобы понять, имеет ли она смысл. Имеет ли для вас какое-то значение надпись «Читать дальше» в середине страницы? Читать дальше что?

№ 5. Используйте хорошие контрастные стили

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

№ 6. Используйте ссылки «перейти к содержимому»

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

О, и не скрывайте ссылку за экраном! Люди с ослабленным зрением часто используют лупы и ищут эти ссылки вручную (не с клавиатуры).

№ 7. Прекратите использовать всплывающие окна

По крайней мере, перестаньте использовать те, от которых мы не можем нажать «esc», чтобы избавиться. Знаете ли вы, что наше программное обеспечение в принципе не может попасть в эти всплывающие окна? И обычно мы заканчиваем тем, что читаем то, что находится за коробкой — для вас это выглядит серым, но не для нас.

Если вы собираетесь использовать всплывающие окна:

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

№8. Изменение размера текста может быть полезно в некоторых ситуациях.

Лично изменение размера текста гораздо менее важно, чем переход к ссылкам на контент. Это связано с тем, что человек с ограниченными способностями воспринимать печатную информацию (включая старшее поколение) будет использовать либо лупу Windows, либо какой-либо специализированный продукт, например масштабирование текста, волшебные глаза или другое бесплатное программное обеспечение. По моему опыту, средства изменения размера обычно уничтожают мобильный контент и даже менее чувствительны, чем сжатие или использование основных функций доступности для мобильных устройств.

Кроме того, с помощью адаптивной технологии изменения размера текста пользователь может включать и выключать ее, чтобы оказаться на экране (некоторое масштабирование, чтобы одновременно видеть только 1/8 экрана). Тем не менее, средства изменения размера текста все еще могут быть актуальными и их стоит использовать для правительственных сайтов, но для меня это не входит в десятку приоритетов.

№ 9. Используйте значки шрифтов, а не значки изображений

Те, кто использует увеличение, могут видеть только около 1/8 сайта за раз, а те, кто использует мобильные телефоны, обычно загружают бесплатные версии изображений — нажав кнопку «читатель». Я мог бы написать пост о том, что большинство «иконок-изображений» при максимальном увеличении пикселируются до предела, но значки шрифтов — нет (ну, во всяком случае, не так сильно).

№10. Добавьте стенограммы видео

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

Просто ради интереса возьмите техническое видео на YouTube без речи, а затем закройте глаза. Примечание: закрытие глаз не имитирует слепоту, потому что вы можете просто открыть их снова, но это забавное упражнение.

Ресурсы доступности

Эти сайты предоставляют рекомендации и инструменты для проверки вашего сайта:

• Проверка доступности Web Aim
• Руководство по доступности веб-контента правительства Австралии
• Валидатор W3C. Обратите внимание, что валидатор W3C выдает много ненужных ошибок. Вы должны принять решение о том, стоит ли каждая ошибка затраченных усилий или нет.

Эти сайты предоставляют программы для чтения с экрана, которые вы можете использовать для тестирования сайта для настольных компьютеров:

• Доступ к заданиям с помощью речи (JAWS)
• Ai Squared предлагает бесплатные пробные версии
• Window Eyes - Программа чтения с экрана
• NV Access предлагает совершенно бесплатную программу чтения с экрана Non Visual Desktop Aid (NVDA).

Примечание. Я не рекомендую Sitecues: я бы не назвал его простым в установке или эффективным для людей с ограниченными возможностями печати.

Вывод

Как и везде, здесь есть баланс между функционалом и строгим соблюдением правил. Ни один из моих клиентских сайтов не является доступным на 100% / совместимым с W3C. Они доступны и удобны для поисковых систем. Они логичны и хорошо контрастируют, но также имеют стиль и особенности для воздействия.

Сколько миллионов людей в мире не могут воспринимать печатную информацию? Сколько потенциальных клиентов?

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