Что такое доступность сайта
Что такое доступность сайта и как её проверить
Авторизуйтесь
Что такое доступность сайта и как её проверить
Доступность означает, что сайт разработан таким образом, что им могут пользоваться люди с ограниченными возможностями. Под использованием понимается восприятие информации, навигация по интерфейсу и взаимодействие с ним.
Основные характеристики доступности:
Традиционно о доступности сайтов и приложений говорят в контексте использования их людьми со слуховыми, визуальными, речевыми, когнитивными, неврологическими, физическими проблемами. Однако доступность интернета приносит пользу и людям без инвалидности:
Это примеры со страниц проекта Web Accessibility Initiative, посвящённого доступности интернета. Как видите, понятие получается достаточно широким. Поэтому о доступности сайтов нужно думать не только разработчикам государственных порталов, где это является требованием законодательства, но и в принципе всем, кто работает в веб-индустрии.
Доступностью следует заниматься ещё и потому, что она приносит бизнесу материальную выгоду. Например, расширение аудитории за счёт людей с постоянными и временными ограничениями, стимулирование инноваций в области пользовательского опыта, развитие бренда благодаря поддержке разнообразия и инклюзивности.
Как проверить доступность сайта через Chrome DevTools
В качестве примера возьмём сайт проекта A11Y, рассказывающего о доступности интернета.
Сейчас нас интересует только доступность
Проверка показывает 100 % доступность главной страницы. Можно открыть подробности и посмотреть, какие именно параметры были проверены. Например, мы видим, что прописаны роли, есть описания в атрибутах Alt, так что скринридеры могут корректно передать пользователю, на каком именно элементе он сейчас находится фокусом.
Показатель, к которому нужно стремиться
Чтобы просматривать атрибуты ARIA (Accessible Rich Internet Applications), контролировать подписи элементов, используйте Accessibility Tree. Это тот же DOM, только в нём отображаются специальные возможности. Чтобы увидеть это дерево, перейдите на вкладку Elements и выберите режим Accessibility.
Все важные для доступности параметры
Можно анализировать доступность не страниц, а отдельных элементов. При открытии DevTools с помощью горячих клавиш автоматически запускается инструмент Inspect Element Tooltip. Благодаря ему при наведении курсора на элемент выкатывается окно, в котором есть раздел Accessibility. Здесь показаны результаты проверки контрастности, наличие подписи, роль, а также поддержка фокуса с клавиатуры.
Так удобно проверять элементы по отдельности
Можно уделить контрастности чуть больше внимания и попробовать разные сочетания цветов:
Можно быстро подобрать подходящий цвет
Contrast Ratio — текущее значение контрастности. AA — минимально допустимое, AAA — достаточное значение контрастности. В этой же панели можно поиграть с цветами, меняя их и проверяя контрастность.
Проверка доступности сайта для людей, имеющих проблемы со зрением
Чтобы проверить сайт на доступность для людей, имеющих проблемы со зрением, используйте инструмент Emulate Vision Deficiencies. Он находится на вкладке Rendering.
Можно посмотреть на сайт глазами разных пользователей
Эмулируются следующие проблемы:
При изменении режима эмуляции страница будет отображаться так, как её видит человек с соответствующими особенностями зрения.
Что ещё почитать о доступности
Главный источник информации о доступности в интернете — раздел Web Accessibility Initiative на сайте W3C. Здесь есть стандарты, гайдлайны, учебные пособия, тесты, рекомендации для дизайнеров, разработчиков, авторов текстов. Основной документ — Web Content Accessibility Guidelines (WCAG). В нём представлен универсальный набор стандартов доступности.
3–4 декабря, Онлайн, Беcплатно
Узнать больше о доступности и способах её проверки можно также на сайте проекта A11Y. Там есть чек-листы для разработчиков, расширения для браузеров, скринридеры, визуальные симуляторы и другие полезные инструменты, которые помогут сделать сайт доступным для максимального количества пользователей.
Как улучшить доступность веб-страниц
«The power of the Web is in its universality. Access by everyone regardless of disability is an essential aspect».
Tim Berners-Lee, создатель World Wide Web и директор W3C
8 советов, как сделать сайт доступным каждому человеку, включая тех, кто имеет ограниченные возможности.
На людях, которые занимаются созданием сайтов, лежит большая ответственность – им надо сделать сайт, который будет доступен и удобен для просмотра абсолютно всем. В этой статье собрано 8 советов, следуя которым вы сможете адаптировать ваш сайт и для людей с ограниченными возможностями.
Что такое веб-доступность?
Согласно W3C, “web accessibility means that every person can perceive, understand, navigate, interact with, and contribute to the web”. Если переводить на русский, то веб-доступность означает, что каждый человек может воспринимать, понимать, перемещаться, взаимодействовать и вносить вклад в Интернет. Это значит, что вся информация на веб-сайте должна быть доступна даже людям с ограниченными возможностями. Как этого добиться? Читайте ниже.
Совет 1
Не делайте зависимость от цвета.
По статистике, один из видов дальтонизма есть приблизительно у 8% мужчин и 0,5% женщин – то есть примерно 300 млн человек страдают от цветовой слепоты. Если говорить о России, то в 2012 году число дальтоников составляло около 4 миллионов. 
Кстати, Марк Цукерберг, создатель Facebook, является дейтеранопом, то есть плохо различает красный и зеленый. Поэтому основной цвет Facebook – синий. «Синий – самый многогранный цвет для меня, я могу различить все оттенки синего» (“Blue is the richest color for me — I can see all of blue”) – Марк Цукерберг.
Проблемные сочетания, которые могут вызывать сложности восприятия у дальтоников:
Если вы хотите посмотреть свой сайт от лица дальтоника, воспользуйтесь сервисом Coblis. В него нужно загружать изображения, поэтому вы можете сделать скриншоты страниц своего сайта и посмотреть, различимо, удобно ли они выглядят для людей с цветовой слепотой, смогут ли они увидеть все необходимые пункты, не происходит ли где-то смешение цветов.
Почитать о дизайне для дальтоников глазами дальтоника можно в интересной переводной статье на Хабрахабре « Создание дизайна для дальтоников (и вместе с ними) ».
Совет 2
Оставьте возможность масштабирования в мобильной версии.
Астигматизм – еще один дефект зрения, от которого страдают около половины населения земного шара. Однако возможность масштабирования будет полезна не только для них, а вообще для любого пользователя – это может значительно упростить ему восприятие информации на вашем сайте.
Поэтому не нужно устанавливать maximum-scale=1.0 – это лишит пользователей возможности делать страницу крупнее:
При этом не забудьте проверить, нормально ли ваш сайт выглядит при увеличении (если нет, то поправьте макет).
Совет 3
Используйте атрибут alt.
Несколько важных вещей об атрибуте alt:
А если у вас есть изображения в формате svg, то используйте теги и для короткой и длинной подписи.
Совет 4
Добавьте субтитры и описания к своим видеороликам.
Пожалуй, это один из самых трудоемких советов – в первую очередь из-за того, что он требует большого количества времени для выполнения работы. Есть несколько способов сделать субтитры:
Совет 5
Используйте семантическую разметку.
Некоторые считают, что семантическая разметка появилась только в HTML5 – это не так. Она существовала с самой первой HTML-страницы, но с тех пор была значительно переработана. В HTML5 появились новые семантические теги, которые обязательно следует использовать – и не только для SEO.
Основная задача семантической разметки – это создание такой структуры документа, которая будет понятна на всех этапах разработки, вплоть до размещения в сети и посещения сайта пользователями. Например, когда вместо
или вы используете
, вы изменяете значение этого элемента, создавая иерархию и структуру информации на странице. И это может значительно помочь скринридерам.
Совет 6
Используйте правильные теги.
Вдогонку к предыдущему совету необходимо обсудить использование нескольких тегов, а именно:
Time и Datetime
Элемент отвечает за отображение временных зон и форматов дат, используя стандарт ISO 8601 для показа даты и времени.
Datetime – это необязательный атрибут, который устанавливает дату и время редактирования текста.
Del и Ins
Информация на сайтах постоянно меняется, и нет необходимости оставлять эти изменения незамеченными. При помощи тегов и вместе с атрибутом datetime можно помечать эти изменения.
Тег показывает, какие изменения были добавлены в текст документа:
Тег отвечает за удаленную информацию:
Совет 7
Следуйте веб-стандартам доступности.
Существует еще много информации, которая не упомянута в этой статье. Поэтому вам следует обратиться к двум документам:
Там вы можете найти варианты кода, о которых, может быть, раньше даже не слышали.
Совет 8
Проверьте доступность сайта.
Наконец, после того, как вы выполнили все необходимые действия по улучшению доступности сайта, самое время провести аудит. И в этом вам помогут инструменты из списка ниже:
Что такое доступность сайта и как её проверить
Доступность означает, что сайт разработан таким образом, что им могут пользоваться люди с ограниченными возможностями. Под использованием понимается восприятие информации, навигация по интерфейсу и взаимодействие с ним, — пишет tproger.ru.
Основные характеристики доступности:
Традиционно о доступности сайтов и приложений говорят в контексте использования их людьми со слуховыми, визуальными, речевыми, когнитивными, неврологическими, физическими проблемами. Однако доступность интернета приносит пользу и людям без инвалидности:
Это примеры со страниц проекта Web Accessibility Initiative, посвящённого доступности интернета. Как видите, понятие получается достаточно широким. Поэтому о доступности сайтов нужно думать не только разработчикам государственных порталов, где это является требованием законодательства, но и в принципе всем, кто работает в веб-индустрии.
Доступностью следует заниматься ещё и потому, что она приносит бизнесу материальную выгоду. Например, расширение аудитории за счёт людей с постоянными и временными ограничениями, стимулирование инноваций в области пользовательского опыта, развитие бренда благодаря поддержке разнообразия и инклюзивности.
Как проверить доступность сайта через Chrome DevTools
В качестве примера возьмём сайт проекта A11Y, рассказывающего о доступности интернета.
Проверка показывает 100 % доступность главной страницы. Можно открыть подробности и посмотреть, какие именно параметры были проверены. Например, мы видим, что прописаны роли, есть описания в атрибутах Alt, так что скринридеры могут корректно передать пользователю, на каком именно элементе он сейчас находится фокусом.
Чтобы просматривать атрибуты ARIA (Accessible Rich Internet Applications), контролировать подписи элементов, используйте Accessibility Tree. Это тот же DOM, только в нём отображаются специальные возможности. Чтобы увидеть это дерево, перейдите на вкладку Elements и выберите режим Accessibility.
Можно анализировать доступность не страниц, а отдельных элементов. При открытии DevTools с помощью горячих клавиш автоматически запускается инструмент Inspect Element Tooltip. Благодаря ему при наведении курсора на элемент выкатывается окно, в котором есть раздел Accessibility. Здесь показаны результаты проверки контрастности, наличие подписи, роль, а также поддержка фокуса с клавиатуры.
Можно уделить контрастности чуть больше внимания и попробовать разные сочетания цветов:
Contrast Ratio — текущее значение контрастности. AA — минимально допустимое, AAA — достаточное значение контрастности. В этой же панели можно поиграть с цветами, меняя их и проверяя контрастность.
Проверка доступности сайта для людей, имеющих проблемы со зрением
Чтобы проверить сайт на доступность для людей, имеющих проблемы со зрением, используйте инструмент Emulate Vision Deficiencies. Он находится на вкладке Rendering.
Эмулируются следующие проблемы:
При изменении режима эмуляции страница будет отображаться так, как её видит человек с соответствующими особенностями зрения.
Что ещё почитать о доступности
Главный источник информации о доступности в интернете — раздел Web Accessibility Initiative на сайте W3C. Здесь есть стандарты, гайдлайны, учебные пособия, тесты, рекомендации для дизайнеров, разработчиков, авторов текстов. Основной документ — Web Content Accessibility Guidelines (WCAG). В нём представлен универсальный набор стандартов доступности.
Узнать больше о доступности и способах её проверки можно также на сайте проекта A11Y. Там есть чек-листы для разработчиков, расширения для браузеров, скринридеры, визуальные симуляторы и другие полезные инструменты, которые помогут сделать сайт доступным для максимального количества пользователей.
Аптайм и Даунтайм: Как Проверить Доступность Сайта или Сервера
Что такое аптайм и даунтайм? Зачем мониторить сервер и как посчитать аптайм? С этими на первый взгляд сложными понятиями должен разобраться каждый владелец сайта, и вот почему.
Представьте, что вы делаете покупку в интернет-магазине и почти оплатили товар, когда внезапно на сайте происходит сбой. Если это случилось один раз, вы, скорее всего, проигнорируете ошибку и попробуете снова. Но если это происходит постоянно, вы, вряд ли, задержитесь на этом сайте и просто найдёте другой интернет-магазин.
Это то, что вы хотите для своих клиентов?
Один из самых важных показателей работы сайта — это его доступность. У вас может быть отличный контент, качественные фото товаров и любой функционал, который вы захотите. Но если сайт недоступен посетителям, когда он им нужен, они уйдут в другое место. Даже лишняя секунда загрузки может привести к потере продаж. Согласно исследованию Web Hosting Australia, 50% респондентов покидают сайт, который не загружается в течение трёх секунд.
Вот почему так важно следить за производительностью вашего сайта. Всего одна минута простоя может стоить вашему бизнесу тысячи долларов. Представьте себе потери, когда минуты растягиваются на часы или даже дни.
Что такое аптайм/даунтайм
Аптайм, или время безотказной работы обычно исчисляется в процентах. Этот показатель позволяет узнать, как часто ваш сайт доступен и полностью функционирует. Остальной процент — это время, когда ваш сайт недоступен. Скажем, хостинг-провайдер предлагает аптайм 93%. Это означает, что их серверы в среднем не работают в 7% случаев. Может показаться, что это не так уж и много. Но даже такой небольшой процент простоя может разрушить ваш бизнес, если перевести его в минуты или часы в месяц.
Как посчитать аптайм?
Для этого есть формула: от общего количества часов в году вычитаем общее количество часов простоя, делим это число на общее количество часов в году и умножаем на 100. Например, в году 8760 часов (365 х 24). Если у вашего веб-сайта 4 часа простоя в год, у вас останется 8756. Расчёт будет следующим:
(8756/8760) x 100 = 99.95
Это означает, что аптайм сайта составляет 99,95%.
Хотя мы все стремимся к 100%, это невозможно. Лучшие провайдеры хостинга стремятся к тому, чтобы время безотказной работы, или аптайм в их соглашении об уровне услуг (SLA) составляло 99,9%. SLA — это процент времени безотказной работы, который обещает ваша служба хостинга, когда вы подписываетесь на их услуги. Безусловно, достигнуть такой аптайм возможно с помощью современных технологий. Однако, такой показатель по-прежнему означает, что у вашего веб-сайта потенциальное время даунтайма составляет 43 минуты 50 секунд в месяц.
Что вы можете сделать, чтобы сократить процент, который приходится на даунтайм?
Как сократить время, в течении которого лежит ваш сайт?
За время безотказной работы обычно отвечает ваша служба хостинга. Однако есть несколько факторов, которые могут повлиять на даунтайм:
– Тип хостинга, который вы выбираете
– Расположение серверов относительно вашего местоположения
– Ваш контент, например, много ли у вас видео или изображений
– Ваша платформа, например, WordPress или созданная на заказ CMS
Первое, что вы можете сделать — это держаться подальше от общего хостинга. Вы можете до определённой степени контролировать то, что происходит с вашим собственным веб-трафиком, но не можете контролировать действия владельца сайта, с которым вы разделяете пространство. Они могли завладеть ресурсами, что нанесло бы ущерб всем другим сайтам в общей службе.
Если вы хотите ограничить время простоя вашего сайта, воспользуйтесь услугой VPS-хостинга, которая предлагает достаточно ресурсов для обработки трафика, даже если вы испытываете внезапные его всплески или стремительный рост бизнеса. Если вам нужен более мощный хостинг, но вы не готовы самостоятельно администрировать сервер, как этого требует VPS, вам подойдёт облачный сервер. Вы также должны убедиться, что ваша CMS и плагины используют последнюю версию PHP для обработки запросов, которые не кэшируются.
Это не влияет на статические сайты так сильно, как на загруженный интернет-магазин или сайт с функционалом личного кабинета. Ваша служба хостинга также должна иметь современное шифрование, защиту от утечек DNS и аутентификацию SSL. Эти вещи необходимы для защиты вашего сайта от злонамеренных действий, таких как DDoS-атаки, которые призваны вызвать сбой системы.
Также в вопросах безопасности не полагайтесь только на свой хостинг. Убедитесь, что вы всегда используете последнюю версию WordPress, и удалите все старые или неиспользуемые плагины. Настройте автоматические обновления антивируса и антишпионского ПО, а также установите надёжный брандмауэр. Обязательно проверяйте свой сайт сразу после внесения любых изменений. И последнее, но не менее важное: постоянно контролируйте работу сайта и убедитесь, что у вас есть чёткий план действий в случаи возникновения любых ошибок.
Проверка аптайма сайта: почему это важно?
Даунтайм не только расстраивает посетителей, но и может парализовать работу вашей команды. Каждый раз, когда приходится устранять сбой, вам потребуется в среднем 6,2 часа, чтобы вернуться к нормальной работе.
Более того, плохой пользовательский опыт может негативно повлиять на вашу позицию в рейтинге страниц в поисковых системах (SERP) и вашу профессиональную репутацию.
Конечно, не нужно сидеть и ждать пока случиться проблема. Вот почему существуют инструменты, которые помогут вам отслеживать, анализировать и оптимизировать ваш сайт, чтобы свести даунтайм к минимуму.
Бесплатная проверка аптайма
Да, иногда хорошие инструменты бывают бесплатными. Существует ряд бесплатных инструментов для проверки аптайма, которые сообщат вам, когда ваш сайт не работает. В основном эти сервисы очень просты. Достаточно вставить ссылку на страницу в соответствующее поле и нажать кнопку «Старт». Многие из платных инструментов мониторинга также имеют бесплатную версию. У них ограниченная функциональность, потому что они предпочитают, чтобы вы платили за их услуги, но даже самая базовая бесплатная версия будет нормально проверять аптайм и даунтайм.
1. DownNotifier
У этого продукта есть как платная, так и бесплатная версия. Он сообщит вам, когда ваш сайт находится в режиме оффлайн или отсутствует определённый текст. Чтобы использовать его, просто перейдите на их домашнюю страницу, поместите свой URL в строку поиска и выберите, как вы хотите получать оповещения. Они могут присылать их по электронной почте или SMS. Сервис будет сканировать ваш сайт каждые 10 минут, если вы используете бесплатную версию; каждые 60 секунд, если это базовый платный тариф. Если вы выберите корпоративный пакет, то получите неограниченный круглосуточный мониторинг.
2. Supermonitoring
Простой, но надёжный. Он не только выполняет всесторонний мониторинг, но и информирует вас в режиме реального времени. Также предусмотрена защита от ложных срабатываний.
Платные инструменты для мониторинга аптайма/даунтайма
Платные инструменты предоставят вам более агрессивный мониторинг и ряд других полезных функций. Большинство из них не настолько дороги, поэтому вы только выиграете, если купите их платные услуги. Они также предлагают бесплатные пробные версии, так что вы можете пройти тест-драйв, прежде чем что-либо делать.
1. Site24x7
Это комплексный инструмент мониторинга, который не просто ищет лежащие сайты. Он проверяет ваш сайт, сервер и вашу сеть на наличие проблем. Вы также получите реальный мониторинг пользователей, мониторинг приложений для команд DevOps и мониторинг синтетических транзакций. Вы можете попробовать его бесплатно или выбрать один из платных тарифов.
2. Pingdom
Один из самых популярных платных инструментов мониторинга — Pingdom. Даже если вы выберете их бесплатную версию, вы сразу же получите отзывы из более чем 70 мест. Он отслеживает каждую минуту и сообщает вам о любых проблемах с помощью push-уведомлений или электронной почты. В премиум версии есть SMS-уведомления.
Завершающее слово
Скорость и надёжность необходимы для того, чтобы выжить в современном конкурентном мире электронной коммерции. Вы можете быть уверены в том, что ваш интернет-магазин или любой другой сайт всегда нормально функционирует, если правильно выберите хостинг, максимально усилите безопасность и приобретёте правильные инструменты, чтобы мониторить аптайм и даунтайм вашего сайта.
Ольга уже около пяти лет работает менеджером в сфере IT. Написание технических заданий и инструкций — одна из её главных обязанностей. Её хобби — узнавать что-то новое и создавать интересные и полезные статьи о современных технологиях, веб-разработке, языках программирования и многом другом.
Доступность сайтов для «самых маленьких»
Сила веба заключается в его универсальности.
Доступность всем, вне зависимости от ограничений здоровья,
является важным аспектом.
Тим Бернерс-Ли, Директор W3C и изобретатель Интернета
В последнее время все чаще разработчики вспоминают о таком понятии, как доступность. Многие подразумевают под этим термином удобство использования сайта людьми с проблемами зрения. То есть то, как ваш сайт читается программами чтения с экрана.
Но по факту доступность сайта это гораздо более обширная область.
Об этом говорит Крис Хайльман:
Давайте начнем с официального определения от консорциума W3C:
Веб был спроектирован так, чтобы с ним мог работать любой человек, вне зависимости от его аппаратного и программного обеспечения, языка, культуры, физических и умственных способностей. Когда Веб удовлетворяет всем этим требованиям, то он становится доступным для людей с ограничениями слуха, подвижности, зрения и когнитивных способностей.
Как мы видим из определения, под доступностью стоит понимать не только читабельность сайта, но и удобство его использования группами людей с иными ограничениями. Если говорить простыми словами, любой посетитель вашего сайта должен удобно получить необходимый контент.
Почему так важно помнить о доступности?
В первую очередь, это выгодно с точки зрения бизнеса. Доступность стоит в одном ряду с таким общепринятыми практиками как юзабилити, адаптивный дизайн, SEO-оптимизация. Исследования доказали, что доступные сайты увеличили охват аудитории, поднявшись на более высокие позиции в органическом поиске, а также наблюдалось снижение затрат на обслуживание. Более подробно можно почитать на сайте проекта доступности от W3C.
Во-вторых, доступность помогает увеличить социальную интеграцию пожилых людей, людей из развивающихся стран и сельских районов.
В-третьих, во многих развитых странах возможность использовать интернет относится к основным правам человека. Это значит, что всем социальным группам людей должны быть предоставлены равные условия доступа к информации, удобства ее получения.
Ни у кого не должно быть преимуществ перед другими.
Уровни доступности
В спецификации выделяются три уровня требований к сайту: А (низший), АА (средний) и ААА (наивысший). При выполнении всех требований с маркером А вы сделаете сайт, доступный людям без отклонений и с легкими отклонениями. Выполнив все три уровня требований вы сделаете свой сайт доступным для абсолютно всех людей, за редким исключением.
Принципы
В основе идеи доступности веба лежат четыре принципа: воспринимаемость, управляемость, понятность и надежность.
Даже если какой-то конкретный кейс, существующем на вашем сайте, не рассмотрен в документации, основываясь исключительно на этих четырех принципах и собственном здравом смысле вы сможете протестировать интерфейс на доступность.
Рассмотрим каждый из этих принципов подробнее.
Восприимчивость
Информация и элементы интерфейса должны быть доступна для восприятия любого пользователя.
Это означает, что ваш сайт должен быть доступен в полной мере для всех органов восприятия. Не должно быть такого, что у зрячих пользователей будет преимущество перед людьми с проблемами зрения. Или сайтом будет невозможно пользоваться только при помощи клавиатуры.
Самым ярким примером этому служит полноценная возможность использования сайта при помощи программ чтения с экрана. Например, у всех картинок должен быть задан альтернативный текст.
Однажды я смотрела документальную передачу о человеке после автокатастрофы. Он был почти полностью парализован. Он писал книги, набирая их на компьютере при помощи карандаша, зажатого в зубах. Об использовании мыши не могло быть и речи.
Подумайте, сможет ли такой человек полноценно пользоваться вашим сайтом? Сможет ли он «увидеть» то, что вы скрыли во всплывающем окне? Будет ли адекватным поведение контента по нажатию на пробел?
Управляемость
Все элементы интерфейса и навигации доступны для взаимодействия.
Любой пользователь должен иметь возможность использовать интерфейс полноценно.
Возвращаясь к предыдущему примеру, подумайте, сможет ли такой пользователь перемещаться по навигации с помощью Tab? Откроется ли ваше красивое бургер-меню? А выпадающий список?
Понятность
Контент и интерфейс в целом должны быть понятны пользователю. Ничего на сайте не должно находится за пределами его понимания.
Некоторые дизайнеры (а с ними и разработчики) любят заменять стандартные пункты меню на иконки. Поймет ли пользователь значение иконки правильно? Расшифрует ли какой пункт или функция кроются за ней? Не верены? Стоит продублировать информацию подписью под иконкой.
Надежность
Контент на сайте должен быть одинаковым для любого пользователя. В том числе для тех, кто работает с вашим сайтом при помощи вспомогательных технологий.
На вашем сайте размещена статья. По дизайнерской задумке она перемежается различными элементами украшения. Проследите, чтобы эти элементы не мешали навигации по статье людям, не использующим мышь или не зачитывались экранными читалками.
Рекомендации, чтобы сделать сайт доступным
Рассмотрим несколько самых основных рекомендаций, внедрив которые в свой продукт вы сделаете его доступным для большего числа людей.
1. Предоставьте текстовую расшифровку для всего нетекстового контента. Продублируйте все видео и аудио материалы текстовой расшифровкой. Сюда же относится альтернативный текст фотографии, возможность проговорить капчу, названия для полей ввода.
2. Дайте возможность увеличить шрифт, если основным контентом сайта является текст. А вообще всегда давайте такую возможность.
3. Скрывайте от читалок и навигации с клавиатуры оформительский контент. При перемещении по сайту Tab’ом я бы не хотела застрять на каком-нибудь вензеле вместо попадания на нужную кнопку.
4. Контент должен оставаться логичным и понятным при его адаптации. Например, при упрощении макета страницы, отключении css-стилей и картинок. Восприятие не должно зависеть от формы, размера или оформления контента.
5. Предоставьте возможность управления всеми функциями при помощи клавиатуры. При этом не должно мешать естественной навигации и взаимодействию при помощи мыши.
6. Не используйте на сайте мигающих элементов. Или ограничьтесь тремя вспышками. Часто мигающие элементы могут вызвать эпилептический припадок или привести к нежелательным последствиям у людей с нарушениями психики.
7. Помогайте пользователю понять где он находится. Используйте так называемые «хлебные крошки», указывая на то, какой путь он проделал вглубь сайта начиная с главной страницы.
8. Каждая страница имеет заголовок, из которого понятно ее содержание.
9. Не пугайте пользователя непредсказуемым поведением страницы. Ярким примером могут послужить различные всплывающие окна с предложениями акций. Посетитель пришел читать статью, а не смотреть на внезапно возникающие всплывающие окна, закрывающие пол-экрана.
10. Помогайте пользователям с вводом информации и по возможности исправляйте ошибки. Если требуется ввести название города, то после ввода первой буквы предлагайте список вариантов. Или если название было введено английскими буквами предлагайте вариант названия города, но на русском языке.
11. Следите за чистотой собственного кода. Всегда используйте закрывающие теги, даже там, где они не обязательны и их отсутствие не ведет к “поломке” верстки. Все теги используются согласно своей роли в спецификации, нет повторяющихся идентификаторов или атрибутов (в рамках одного тега).
Безусловно, это далеко не все рекомендации даже для достижения уровня А. Но это я считаю все пункты выполнимыми в короткий срок и с минимальными финансовыми/временными затратами. С этого стоит начать.
Если у вас нет никакой возможности изменить существующий сайт прямо сейчас, то создайте альтернативную версию сайта, на которой будут учтены основные пожелания к доступности. Причем не обязательно дублировать сайт полностью, с его дизайном и всем контентом без исключения. Вынесите только самое основное и важное, за чем пришел клиент.
У меня есть знакомый, страдающий от тяжелой формы дальтонизма. Как-то он рассказал, что не смог воспользоваться функцией восстановления пароля от личного кабинета одного крупного банка. Для сброса пароля нужно было выбрать из нескольких изображений красный предмет.
Заключение
В большинстве своих примеров я приводила крайние формы нарушений. Но не забывайте, что доступность это обо всех пользователях. Не у всех ваших посетителей зрение равно 1, не у всех работают обе руки, не все хорошо слышат.
Я очень советую задумывать о доступности в самом начале проектирования продукта. Обязательно расскажите о доступности своему дизайнеру и UX-проектировщику. Если на этапе разработки вы понимаете, что какой-то из элементов сайта не будет работать для некоторых из посетителей — не молчите и предлагайте найти альтернативное решение.
Настоятельно советую вам начать изучение данной темы с официальной спецификации W3C и с советами по реализации рекомендаций.