Доступность означает, что сайт разработан таким образом, что им могут пользоваться люди с ограниченными возможностями. Под использованием понимается восприятие информации, навигация по интерфейсу и взаимодействие с ним.
Основные характеристики доступности:
Традиционно о доступности сайтов и приложений говорят в контексте использования их людьми со слуховыми, визуальными, речевыми, когнитивными, неврологическими, физическими проблемами. Однако доступность интернета приносит пользу и людям без инвалидности:
Это примеры со страниц проекта Web Accessibility Initiative, посвящённого доступности интернета. Как видите, понятие получается достаточно широким. Поэтому о доступности сайтов нужно думать не только разработчикам государственных порталов, где это является требованием законодательства, но и в принципе всем, кто работает в веб-индустрии.
Доступностью следует заниматься ещё и потому, что она приносит бизнесу материальную выгоду. Например, расширение аудитории за счёт людей с постоянными и временными ограничениями, стимулирование инноваций в области пользовательского опыта, развитие бренда благодаря поддержке разнообразия и инклюзивности.
В качестве примера возьмём сайт проекта 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. Там есть чек-листы для разработчиков, расширения для браузеров, скринридеры, визуальные симуляторы и другие полезные инструменты, которые помогут сделать сайт доступным для максимального количества пользователей.Реклама на Tproger: найдем для вас разработчиков нужного стека и уровня.
Подробнее
Реклама на tproger.ru
Загрузка
Каждый день миллионы пользователей посещают огромное количество сайтов. Читают статьи или новости, смотрят видео, выбирают товар в интернет-магазине и совершают покупки, слушают музыку, пользуются интернет-банком и многое другое. У каждого сайта, помимо всех прочих характеристик, имеется один очень важный — это доступность. Что это такое, почему важно создавать доступные сайты, какие есть особенности, — все это разберем в данной статье.
Доступность — качество цифровой среды, характеризующее степень её приспособленности для людей с ограниченными возможностями. На английском языке это Accessibility или сокращенно A11Y. Сокращение довольно забавное, ведь между A и Y ровно 11 букв.
Доступность — один из важнейших критериев при разработке сайтов. Мало создать просто красивый и привлекательный сайт, необходимо сделать его удобным, чтобы любой пользователь, в том числе человек с ограниченными возможностями, смог воспринять, понять информацию, интерфейс и управлять им, в том числе с помощью вспомогательных технологий (экранная читалка, клавиатура и прочие технологии).
Почему важно уделять время разработке доступных интерфейсов? На это есть несколько причин:
Что же такое недоступный интерфейс в широком смысле этого слова? В данное понятие входит довольно много нюансов.
Например, у пользователя по какой-либо причине сломана мышка. В данном случае он вынужден «ходить» по вашему сайту с клавиатуры. Возможно, он как раз хочет купить себе мышку в интернет-магазине, а у сайта на элементах нет состояния фокуса и непонятно, в каком разделе ты сейчас находишься. Таким образом сайт становится недоступным пользователю.
Если сайт плохо адаптирован, то на маленьком экране его практически невозможно будет его воспринять.
Нередка ситуация, когда на мобильной версии слишком маленький текст, и хочется его увеличить его, но у сайта может быть отключена возможность увеличения на телефоне.
Бывает, что у пользователя плохой интернет. В таком случае сайт будет грузиться продолжительное время и может вовсе не загрузиться.
Иногда бывает так, что пользователь переворачивает телефон и просматривает сайт таким образом, потому что ему так удобно. На сайте тут же выскакивает баннер — «Извините, наш сайт не работает в таком режиме, пожалуйста, поверните телефон».
При плохо подобранном контрасте цветов также возникают сложности при использовании сайта. Особенно это актуально в яркий солнечный день
И только после всех этих аспектов идут физиологические особенности.
Доступность важна пользователям с нарушением зрения:
Этим пользователям сложно или совсем невозможно увидеть ваш сайт.
Вторая категория — это пользователи с нарушением опорно-двигательного аппарата. Таким людям сложно пользоваться устройствами ввода, у них проблема с моторикой, происходит самопроизвольное сокращение мышц.
Еще одна категория — пожилые люди, которые испытывают возрастные трудности при работе с интерфейсом.
Также хочется отметить, что в любой момент каждый из нас может столкнуться с временными ограничениями. К примеру, при переломе рабочей руки не очень удобно пользоваться другой рукой. В таком случае некоторые люди переходят на клавиатуру, чтобы решить свою проблему.
Главная задача доступности с общей точки зрения (с точки зрения дизайна, разработки и пр.) — сделать удобные интерфейсы для всех.
Существует такое понятие как инклюзивный дизайн. Инклюзивный дизайн — это способ создания цифровых продуктов, доступных широкому кругу людей, в независимости от физических ограничений и местонахождения. Данное понятие охватывает широкий спектр людей.
По статистике, на данный момент около 880 000 слепых и слабовидящих людей. Примерно 15% людей всего мира имеют физические особенности. Поэтому очень важно уделять время разработке доступности сайтов и их интерфейсов.
В России существует ГОСТ Р 52872-2019 — он-то и описывает все требования к доступности информации в цифровой среде. На данный момент в РФ сайты государственных учреждений обязаны иметь версию для слабовидящих людей.
Если говорить о западе, то нужно смотреть руководство WCAG 2.0 от W3C и Section 508.
В WCAG 2.0 прописаны следующие принципы:
Предлагаю поиграть в небольшую игру. Попробуйте открыть какой-нибудь сайт и походить по нему с помощью клавиатуры, используя клавиши tab, shift+tab, space, enter, backscape и др. Удобно? А теперь представьте, как люди, которые не могут по тем или иным причинам пользоваться мышкой, просматривают и «ходят» по сайту.
Один из «любимых» сайтов автора — это Aliexpress. Некоторое время назад разработчики убрали совсем состояние фокуса на элементах, т.е. при хождении сайта с клавиатуры было совершенно непонятно, на каком элементе находишься в данный момент. Сейчас разработчики вернули фокус, но не сделали свой индивидуальный — браузер сам будет подбирать состояние фокуса.
Выше на примере видно, что пользователь находится на ссылке «Защита покупателя», но такое сразу можно и не заметить. Зайдя на сайт через браузер Firefox, становится еще хуже.
Если очень сильно присмотреться, то на скриншоте выше можно заметить, что фокус стоит на ссылке «Защита покупателя».
А вот в примере ниже фокус стоит на каком-то элементе, но на каком? Кажется, где-то на слайдере, но это не точно.
Есть немало способов и инструментов для тестирования сайтов на предмет доступности, начиная от каких-то маленьких расширений до больших полноценных приложений.
WAI-ARIA
Начнем описание с букмарклета WAI-ARIA. Букмарклет — это такая небольшая программа, написанная с помощью языка программирования Javascript. Суть данного инструмента в том, что вы встраиваете этот код, он сканирует вашу страницу и после выдает свои результаты с фрагментами ошибок. Данный инструмент сугубо ориентирован на проверку ARIA атрибутов.
NerdeRegion
Существует расширение NerdeRegion для браузера Google Chrome. Оно также акцентирует свое внимание на ARIA атрибутах. Данное расширение удобно, когда происходит отлов ошибок на странице. В панели инструментов разработчика отслеживается объявление элементов с метками по времени и откуда было само объявление. Такой способ помогает хорошо понять проблему: либо она идет из кода, либо читалка как-то неправильно отработала на элементе.
Lighthouse
Это встроенный инструмент от Google для проверки вашего сайта по некоторым параметрам, в том числе и на доступность. После проверки он указывает на проблемы и места для улучшения.
WAVE
WAVE от WebAIM. Очень удобный инструмент, может идти как расширение или как API. Обладает большим функционалом и дает целостное представление об ошибках в коде.
С помощью данного инструмента можно очень хорошо изучить свой сайт на предмет доступности интерфейса. Будут выявлены ошибки по картинкам, формам, структуре сайта, даны комментарии по контрасту фона и текста.
По некоторым оценкам, инструменты могут выявить до 30% всех ошибок доступности. К сожалению, решения, которое бы давало 100% результат и показывало все ошибки, еще не существует. Хоть и идет развитие инструментов, увы, пока они не способны заменить включение людей с ограниченными возможностями в процесс проектирования и разработки. Ведь мы пишем код не для машин, а для пользователей в первую очередь.
Устойчивый и целостный процесс доступности может включать в себя использование всей командой инструментов для выявления как можно большего количества таких ошибок на ранней стадии процесса, вместо того чтобы оставлять все это для тестировщиков и пользователей с ограниченными возможностями, чтобы они находили и сообщали об этих проблемах в процессе работы.
Доступность сайтов тесно связана с семантикой. Семантика — это выбор правильных тегов при разработке сайта, например, это header, main, section, aside, footer и многие другие.
При создании меню на сайте необходимо использовать семантически подходящие для этого теги, такие как nav, ul, li, a. Если это будет все выполнено с помощью тега <div>, то скринридер не сможет правильно предоставить человеку информацию о том, где он сейчас находится.
При верной разметке воспроизведение через экранную читалку будет примерно следующим: Навигация => список из шести элементов => ссылка о компании.
Ниже приведен пример разметки меню в шапке сайта и то, как эта шапка выглядит на сайте.
Для ссылок, которые находятся не в меню, можно добавлять специальный атрибут aria-label, который будет озвучивать, куда ведет ссылка. Ярким примером являются ссылки на социальные сети или мессенджеры. Если не добавить данный атрибут, то скринридер озвучит ссылку, взяв текст из адреса т. е. из атрибута href. Согласитесь, не совсем комфортно слышать непонятные буквы, хотелось бы услышать к примеру, что это ссылка на группу ВКонтакте.
Ниже представлен пример использования атрибута aria-label для ссылки на Telegram-канал компании и пример данного блока на сайте.
Говоря о различных формах, необходимо описывать поля ввода с помощью тега label, обязательно указывать тип данных в поле ввода. Если форма большая, то рекомендуется объединять поля в специальные теги fieldset и давать им подпись через legend. Обязательные поля отмечать с помощью атрибута required.
Ниже представлен пример верстки некоторой части формы и скриншот, как эта форма выглядит.
У картинок обязательно должен быть заполнен атрибут alt. Данный атрибут отвечает за описание картинки, причем важно правильно описать картинку. Подробнее о нем мы рассказывали в нашей статье
Конечно же, важно прописывать заголовки разных уровней на страницах, ведь по ним пользователь может переходить очень быстро. В некоторых скринридерах есть специальная функция, которая открывает список из заголовков, чтобы быстро перейти к нужному разделу на странице.
Есть еще один прием, который касается заголовков на странице. Иногда дизайн сделан так, что явного заголовка на странице нет. Для осуществления доступности разработчики договорились использовать специальный класс visually-hidden.
Ниже как раз представлено меню из скринридера, основанного на заголовках.
Как правило на страницах всегда есть ссылки и кнопки. При создании данных элементов (в частности кнопок) следуют отдавать предпочтение нативным HTML-элементам, т.к. они имеют уже встроенные функциональные особенности.
За кнопку в HTML отвечает тег button. Существует также универсальный тег div, используемый для создания блока информации с последующей стилизацией. Можно, конечно, сделать свою собственную кнопку через div, но, чтобы повторить весь функционал нативной кнопки, нужно приложить массу усилий. У нативной кнопки есть disabled (когда кнопка заблокирована), состояние фокуса, можно перейти на кнопку через клавиатуру.
Ниже представлены 2 кнопки.
На вид они совершенно одинаковы, но стоит заглянуть поглубже в разметку, станет понятно, что первая кнопка — это обычный тег div с кучкой атрибутов. Они нужны, чтобы тег div получил свойства и функционал кнопки.
Что касается фокуса и «хождения» по странице через клавиатуру, желательно всем интерактивным элементам прописывать состояние фокуса, чтобы его было хорошо видно.
Технических нюансов очень много, выше описаны лишь некоторые наиболее популярные. Рассказывать о разных аспектах можно часами, поэтому пока остановимся на этом.
Доступные сайты и приложения делают интернет-пространство лучше, они заставляют каждого чувствовать себя полноценным членом общества, независимо от ситуации или каких-либо ограничений. Доступность устраняет преграды для людей с ограниченными возможностями, поэтому современные сайты должны создаваться с учетом доступности. Доступность — это право, а не привилегия.
Если вы планируете создание сайтов и хотите, чтобы ваш ресурс был доступен для всех пользователей, вне зависимости от их особенностей, обращайтесь к нам — обязательно поможем!
# оптимизация сайта # семантическая разметка # создание сайта # структура сайта # техническая оптимизация
Доступность веб-сайта (также называемое временем безотказной работы веб-сайта) относится к способности пользователей получать доступ и использовать веб-сайт или веб-службу. Доступность веб-сайта обычно указывается в процентах за определенный промежуток времени.
Доступный веб-сайт — это веб-сайт, доступный и пригодный для использования в соответствии с ожиданиями пользователя. Говоря о доступности, мы часто имеем в виду отношение доступного времени к общему времени. Как правило, доступность сайта описывается в процентах, например доступность 99,9%.
100% бесперебойная работа сайта — недостижимая, если не невозможная цель в долгосрочной перспективе. У большинства провайдеров часто есть цель доступности, которую они пытаются достичь и поддерживать. Давайте посмотрим, как рассчитать процент времени безотказной работы.
Доступность представляет собой простой процент, основанный на времени безотказной работы, деленном на общий промежуток времени. В зависимости от необходимой степени точности вы можете использовать часы, минуты, секунды или миллисекунды. Для нашего примера давайте использовать часы.
Сайт с одним часом простоя в течение всего года будет иметь время безотказной работы 99,99%.
((8760 часов – 1 час)/8760 часов) * 100 = 99,99%
Время безотказной работы 99,99% звучит впечатляюще, учитывая всего один час незапланированного простоя в год, и для большинства сайтов это отличная цель. Другие сайты, такие как Google, работают, чтобы превысить 9Доступность 9,999% (5,26 минут простоя в год).
Для многих брендов, обещающих высокую доступность, они относятся только к тому времени, когда пользователь может ввести URL-адрес и не получить ошибку страницы, например:
Конечно, вы можете столкнуться со многими другими ошибками в результате сбоя. Простой факт заключается в том, что пользователь не может получить доступ к сайту или сервису по какой-то не зависящей от него причине. Означает ли доступность только возможность доступа к странице или она включает в себя способность пользователя выполнить задачу? Это хороший вопрос, и ответ зависит от того, кого вы спрашиваете.
Если вы спросите пользователя, доступен ли неисправный сайт, ответ, вероятно, будет «Нет». Если вы спросите хостинг-провайдера, ответ, вероятно, будет «Да». Итак, что это? Основываясь на приведенном выше определении, если пользователь не может получить необходимую ему информацию или не может выполнить задачу, вы должны считать сайт недоступным. Чтобы зафиксировать этот тип простоя, используйте мониторинг транзакций.
Хотя это правда, что сбой блокирует 100% пользователей, исследования показывают, что 91% этих пользователей вернутся на сайт. Для сайта с проблемами, но все еще доступного, коэффициент постоянного отказа составляет 28%. Результаты исследования основаны на краткосрочных сбоях, поэтому чем дольше длится сбой или чаще происходят сбои, тем большее влияние сбои оказывают на репутацию и доход.
Может, если из-за низкой производительности пользователь не может выполнить свою задачу. Таким образом, исходя из нашего основного определения «доступности», уверенная производительность также является фактором доступности. Человеческому мозгу нужны быстрые ответы, чтобы сохранять концентрацию, когда дело доходит до взаимодействия человека с компьютером. Медленные ответы нарушают концентрацию и негативно сказываются на восприятии бренда пользователями (Эвертс, Тэмми. Время — деньги). Кроме того, медленное время загрузки на мобильных устройствах также приводит к снижению поискового рейтинга в Google.
Низкая производительность связана с плохим дизайном и настройкой, причем проблема номер один — большие изображения. Помимо оптимизации изображений, рассмотрите возможность асинхронной загрузки контента, блокирующего рендеринг, использования сжатия, кэширования, подсказок браузера, контроля стороннего контента и использования CDN для уменьшения задержки для повышения производительности вашего веб-сайта.
Как правило, периоды планового обслуживания не считаются простоями. Обычно в период обслуживания разработчики перенаправляют пользователя на страницу с извинениями и объяснением того, что сайт находится на обслуживании, и с просьбой повторить попытку немного позже, чтобы не возвращать код ошибки.
При использовании многих облачных сервисов контент распределяется по нескольким серверам, и обращение к одному серверу для обслуживания просто перенаправляет запросы на другие доступные серверы, что позволяет избежать простоев. Избыточность — ваша самая большая защита от сбоев, но она имеет высокую цену, которая того стоит для крупных игроков, таких как Amazon, которые генерируют сотни тысяч долларов в минуту, для остальных из нас, и комплексная стратегия мониторинга — ваш лучший вариант. для поддержания высокой доступности.
Чтобы отслеживать доступность, бренд должен убедиться, что пользователи могут безошибочно подключиться к своему веб-сайту, используя регулярные, частые интервалы тестирования. Некоторые бренды периодически проверяют вручную в течение дня, но короткие отключения могут остаться незамеченными при периодическом тестировании. Автоматизированное тестирование может проверять время безотказной работы каждую минуту, поэтому даже те короткие сбои, которые влияют на их пользователей, фиксируются в отчетах о времени безотказной работы.
Мониторинг доступности — это упреждающий параметр, который проверяет ответ вашего сайта с помощью серверов, внешних по отношению к вашему сайту. Используя внешние серверы, предпочтительно серверы, расположенные рядом с вашими реальными пользователями, вы фиксируете проблемы с временем безотказной работы и задержками в зависимости от местоположения ваших пользователей. Вот как это работает.
Оповещения выводятся после второй подтвержденной ошибки, чтобы сообщить вам, что у вашего сайта есть проблема с доступностью, и предупреждение о полной очистке выдается, когда вы решили проблему. Помимо положительного ответа (200 ok) проверки доступности также могут проверить:
Знаете ли вы, что сбои могут затронуть одних пользователей, а не других? Из-за местных ограничений, плохой локальной архитектуры Интернета, проблем с сетью, таких как проблемы с DNS, типа браузера и типа устройства, некоторые пользователи могут не иметь доступа к вашему сайту. Используя службу мониторинга с большой сетью контрольных точек, вы можете выбрать тестовые места, более репрезентативные для вашей пользовательской базы, что позволит вашему мониторингу фиксировать локальные проблемы с простоем и задержкой.
Доступность — это больше, чем просто время безотказной работы, но без времени безотказной работы другие проблемы, влияющие на доступность, не имеют большого значения. Мониторинг доступности является основой надежной стратегии мониторинга цифрового опыта.
Узнайте, как Uptrends Website Monitoring может помочь вам контролировать ваши SSL-сертификаты, DNS, FTP и многое другое с помощью бесплатной 30-дневной пробной версии. Кредитная карта не нужна!
Начнем
Ваш веб-сайт может не загружаться для вас, но всегда есть шанс, что это произойдет из-за вашего интернет-провайдера, браузера или других локальных проблем. Кроме того, ваш веб-сайт может быть недоступен только в том регионе, в котором вы живете. Используйте наш инструмент доступности веб-сайта, чтобы получить подробную информацию о состоянии вашего веб-сайта примерно с 30 контрольно-пропускных пунктов на 6 континентах.
Помимо проверки доступности веб-сайта, он также показывает, насколько быстро ваш сайт загружается в каждом месте. Вы можете использовать эту информацию, чтобы узнать, быстр ли ваш сайт на всех континентах. Мы используем настоящий веб-браузер Mozilla Firefox для полной загрузки вашего веб-сайта со всеми тяжелыми элементами дизайна.
Мы отправляем команду на загрузку вашего сайта примерно 30 зондам мониторинга веб-сайтов и ждем ответа. Как только мы получим ответ, мы отобразим время загрузки на карте, чтобы получить четкое представление об отзывчивости вашего сайта по всему миру. Также мы предоставляем более подробную информацию в таблице ниже. Просто введите URL вашего веб-сайта, и мы немедленно проверим его доступность.
адрес сайта | Когда | Статус |
---|---|---|
gitlab.as.dlr.de | 51 секунд назад | |
ptcnews.tv | 9 минут назад | |
smithsstational-fpd. gov | 10 минут назад | |
jmitchellassociates.com | 12 минут назад | |
youtube.com | 16 минут назад | |
портал2europe.com | 17 минут назад | |
is. vu.lt | 19минут назад | |
rceb.org | 31 минут назад | |
cricworldsports1.com | 35 минут назад | |
awsconcepts.com | 1 час назад |
Используйте раздел карты мира, чтобы увидеть, как ваш сайт работает на 6 континентах.
Об авторе