Как проверить сайт на доступность

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

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

Доступность — качество цифровой среды, характеризующее степень её приспособленности для людей с ограниченными возможностями. На английском языке это Accessibility или сокращенно A11Y. Сокращение довольно забавное, ведь между A и Y ровно 11 букв.

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

Почему важно уделять время разработке доступных интерфейсов? На это есть несколько причин:

1. Мораль. Люди с ограниченными особенностями ничем не хуже остальных. Они тоже хотят пользоваться полным функционалом сайта. Им так же хочется читать новости, узнавать что-то новое, пробовать различные сервисы.
2. Клиентоориентированность. Люди с ограниченными особенностями — это тоже клиенты, которые покупают ваш товар, пользуются вашими услугами и предложениями. В конце концов это деньги, прибыль и возможность для вас выйти на новый рынок.
3. Юридический аспект. В США имеется обязательное требование, чтобы все сайты были доступные, поэтому там регулярно проходят суды. В России обязательно доступность должна быть у сайтов государственных учреждений.

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

Что же такое недоступный интерфейс в широком смысле этого слова? В данное понятие входит довольно много нюансов.

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

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

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

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

Иногда бывает так, что пользователь переворачивает телефон и просматривает сайт таким образом, потому что ему так удобно. На сайте тут же выскакивает баннер — «Извините, наш сайт не работает в таком режиме, пожалуйста, поверните телефон».

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

И только после всех этих аспектов идут физиологические особенности.

Кому важны доступные сайты?

Доступность важна пользователям с нарушением зрения:

• полностью незрячим людям,
• слабовидящим пользователям,
• людям с нарушением цветовосприятия.

Этим пользователям сложно или совсем невозможно увидеть ваш сайт.

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

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

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

Главная задача доступности с общей точки зрения (с точки зрения дизайна, разработки и пр.) — сделать удобные интерфейсы для всех.

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

По статистике, на данный момент около 880 000 слепых и слабовидящих людей. Примерно 15% людей всего мира имеют физические особенности. Поэтому очень важно уделять время разработке доступности сайтов и их интерфейсов.

Стандарты доступности сайтов

В России существует ГОСТ Р 52872-2019 — он-то и описывает все требования к доступности информации в цифровой среде. На данный момент в РФ сайты государственных учреждений обязаны иметь версию для слабовидящих людей.

Если говорить о западе, то нужно смотреть руководство WCAG 2.0 от W3C и Section 508.

В WCAG 2.0 прописаны следующие принципы:

• Perceivable (Воспринимаемость) — пользователь должен быть в состоянии воспринять информацию любым из органов чувств. Т.е. невидящий должен услышать, а неслышащий — прочитать.
• Operable (Управляемость) — не должно быть такого действия, которое не смог бы совершить пользователь.
• Understandable (Понятность) — передаваемая информация и способ управления интерфейсом должны быть понятны пользователю.
• Robust (Надежность) — передаваемая информация должна быть пригодна для интерпретации большим количеством вспомогательных средств.

Простой способ проверить сайт на доступность

Предлагаю поиграть в небольшую игру. Попробуйте открыть какой-нибудь сайт и походить по нему с помощью клавиатуры, используя клавиши tab, shift+tab, space, enter, backscape и др. Удобно? А теперь представьте, как люди, которые не могут по тем или иным причинам пользоваться мышкой, просматривают и «ходят» по сайту.

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

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

Если очень сильно присмотреться, то на скриншоте выше можно заметить, что фокус стоит на ссылке «Защита покупателя».

А вот в примере ниже фокус стоит на каком-то элементе, но на каком? Кажется, где-то на слайдере, но это не точно.

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

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

1. WAI-ARIA

   Начнем описание с букмарклета WAI-ARIA. Букмарклет — это такая небольшая программа, написанная с помощью языка программирования Javascript. Суть данного инструмента в том, что вы встраиваете этот код, он сканирует вашу страницу и после выдает свои результаты с фрагментами ошибок. Данный инструмент сугубо ориентирован на проверку ARIA атрибутов.

2. NerdeRegion

   Существует расширение NerdeRegion для браузера Google Chrome. Оно также акцентирует свое внимание на ARIA атрибутах. Данное расширение удобно, когда происходит отлов ошибок на странице. В панели инструментов разработчика отслеживается объявление элементов с метками по времени и откуда было само объявление. Такой способ помогает хорошо понять проблему: либо она идет из кода, либо читалка как-то неправильно отработала на элементе.

3. Lighthouse

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

4. 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 получил свойства и функционал кнопки.

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

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

Вместо вывода

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

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

# оптимизация сайта # семантическая разметка # создание сайта # структура сайта # техническая оптимизация

Что такое доступность сайта и как её проверить

Photo by Sigmund on Unsplash

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

Основные характеристики доступности:

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

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

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

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

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

Как проверить доступность сайта через Chrome DevTools

В качестве примера возьмём сайт проекта A11Y, рассказывающего о доступности интернета.

1. Открываем DevTools на главной странице сайта (Ctrl + Shift + C на Windows или Cmd + Shift + C на macOS).
2. Переходим на вкладку Lighthouse.
3. В разделе Categories убираем все галочки, кроме Accessibility.
4. Выбираем тип устройства .
5. Нажимаем на кнопку Generate report.

Сейчас нас интересует только доступность

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

Показатель, к которому нужно стремиться

Чтобы просматривать атрибуты ARIA (Accessible Rich Internet Applications), контролировать подписи элементов, используйте Accessibility Tree. Это тот же DOM, только в нём отображаются специальные возможности. Чтобы увидеть это дерево, перейдите на вкладку Elements и выберите режим Accessibility.

Все важные для доступности параметры

Можно анализировать доступность не страниц, а отдельных элементов. При открытии DevTools с помощью горячих клавиш автоматически запускается инструмент Inspect Element Tooltip. Благодаря ему при наведении курсора на элемент выкатывается окно, в котором есть раздел Accessibility. Здесь показаны результаты проверки контрастности, наличие подписи, роль, а также поддержка фокуса с клавиатуры.

Так удобно проверять элементы по отдельности

Можно уделить контрастности чуть больше внимания и попробовать разные сочетания цветов:

1. Открываем DevTools и на вкладке Elements выбираем нужный текстовый фрагмент.
2. Находим color среди его свойств.
3. Двойным кликом по квадрату с цветом открываем дополнительную панель.

Можно быстро подобрать подходящий цвет

Contrast Ratio — текущее значение контрастности. AA — минимально допустимое, AAA — достаточное значение контрастности. В этой же панели можно поиграть с цветами, меняя их и проверяя контрастность.

Проверка доступности сайта для людей, имеющих проблемы со зрением

Чтобы проверить сайт на доступность для людей, имеющих проблемы со зрением, используйте инструмент Emulate Vision Deficiencies. Он находится на вкладке Rendering.

Можно посмотреть на сайт глазами разных пользователей

Эмулируются следующие проблемы:

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

При изменении режима эмуляции страница будет отображаться так, как её видит человек с соответствующими особенностями зрения.

Что ещё почитать о доступности

Главный источник информации о доступности в интернете — раздел Web Accessibility Initiative на сайте W3C. Здесь есть стандарты, гайдлайны, учебные пособия, тесты, рекомендации для дизайнеров, разработчиков, авторов текстов. Основной документ — Web Content Accessibility Guidelines (WCAG). В нём представлен универсальный набор стандартов доступности.

Узнать больше о доступности и способах её проверки можно также на сайте проекта A11Y. Там есть чек-листы для разработчиков, расширения для браузеров, скринридеры, визуальные симуляторы и другие полезные инструменты, которые помогут сделать сайт доступным для максимального количества пользователей.

Проверка работоспособности веб-сайта: проверка статуса веб-сайта

Знайте, если ваш сайт не работает, из мест по всему миру

Бесплатный инструмент Uptrends Website Uptime сообщает о более чем сорока из 231 контрольных точек Uptrends для отправки запроса на ваш сайт, и Uptrends проверяет каждый ответ. Каждая контрольная точка ищет успешный ответ, отслеживает время и создает отчет на основе доступности веб-сайта и времени ответа.

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

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

Это не работает или это только у меня?

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

Бесплатный инструмент «Время работы и доступность веб-сайта» дает вам всесторонний взгляд на ваш сайт с глобальной точки зрения. Когда ваш сайт красный по всем направлениям, вы знаете, что у вас есть более серьезные проблемы, такие как DDoS-атака, сбой хостинг-провайдера или неисправность оборудования.

Подтвердите свое соглашение об уровне обслуживания

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

Время безотказной работы зависит от соединения

Тестирование времени безотказной работы касается возможности установить соединение. Тест гарантирует, что пользователь может установить полное соединение с сервером и получить исходный HTML-код без ошибок. Где у вас происходит сбой соединения: разрешение, соединение или загрузка?

Проверки бонусного контента

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

Размер ответа также имеет значение.

Надежный способ узнать, получаете ли вы правильный контент, — проверить размер страницы. Если первоначальный HTML-ответ не соответствует определенным пороговым значениям, вы знаете, что сервер отвечает неправильным или усеченным содержимым.

Проверка веб-сайта каждую минуту

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

IPv4 или IPv6?

Неважно, какую версию IP использует ваш сайт. Восходящие тренды могут отслеживать и то, и другое. Более половины из наших 231 контрольно-пропускных пунктов поддерживают оба варианта, а на большинстве остальных можно использовать смоделированный IPv6.

Оповещение о доступности веб-сайта

Когда ваш сайт выходит из строя, вы хотите знать об этом. Вот тут-то и появляются расширенные оповещения Uptrends. Uptrends проверяет каждую ошибку с другой контрольной точки, прежде чем выдавать оповещение. Если второй тест также дает ошибки, Uptrends использует предпочитаемую вами систему обмена сообщениями для отправки сообщения: SMS, электронная почта, телефон/голос, Slack, PagerDuty, StatusHub, VictorOps, ServiceNow или ваш собственный веб-хук.

Пользовательские оповещения с эскалацией

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

Получение снимков ошибок

Мониторы вашего HTTPS-сайта также делают селфи, когда это возможно. Когда проблема связана с ошибкой страницы, например с ошибкой проверки содержимого, Uptrends загружает результат в браузер и делает снимок экрана, чтобы вы могли увидеть, как выглядела страница во время ошибки 9. 0050 .

Автоматизируйте мониторинг работоспособности вашего веб-сайта

Проверить время работы сайта 24/7

Разве вы бы не спали спокойнее, если бы знали, что кто-то еще следит за вашим сайтом? С помощью мониторинга доступности веб-сайта вы можете автоматизировать свои проверки. Если что-то случится, пока вы спите, Uptrends сообщит вам об этом.

Проверки работоспособности из местоположений ваших пользователей

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

Ежедневные отчеты о времени безотказной работы

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

Пользовательские информационные панели

Отслеживайте наиболее важные для вас показатели времени безотказной работы в диаграммах и таблицах, которые имеют смысл для вас, с помощью настраиваемых информационных панелей. Кроме того, если вы заинтересованы в соблюдении SLA, загрузите данные о времени безотказной работы на странице обзора SLA.

Плановое обслуживание?

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

Не забывайте о скорости веб-сайта

Мониторы HTTP/HTTPS Мониторы времени безотказной работы A.K.A — самые популярные типы мониторов Uptrends. Однако скорость загрузки, указанная в ваших мониторах времени безотказной работы, отслеживает только загрузку первой HTML-страницы. Чтобы получить полную картину загрузки страницы, вам понадобится Uptrends Web Performance Monitoring.

Начните отслеживать время безотказной работы вашего веб-сайта с помощью веб-сайта Uptrends Monitoring

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

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

Как следить за доступностью сайта

Charris Herrera 12 марта 2021 г. Советы, рекомендации и ресурсы для разработчиков

«100% доступность веб-сайта». Какой веб-мастер не хотел бы видеть этот отчет о доступности? Каждый владелец веб-сайта хотел бы, чтобы его веб-сайт был доступен для пользователей на 99,9% все время. Без веб-сайта, доступного и бесперебойно работающего в любое время суток, все инвестиции, связанные с Интернетом, пропадут даром. Вот почему мониторинг доступности сайта так важен.

В этой статье вы узнаете:

• Что такое доступность сайта?
• Зачем нужен мониторинг доступности сайта?
• Как контролировать доступность веб-сайта?

Что такое доступность веб-сайта

Доступность веб-сайта означает, что пользователи могут успешно получить доступ к определенному веб-сайту. Доступ с помощью таких средств, как ввод URL-адреса или переход по ссылке из социальных сетей, электронных писем, реферальных веб-сайтов и т. д. Если URL-адрес показывает ожидаемое содержимое, то этот веб-сайт «доступен».

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

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

Примером этого является акция Amazon Prime Day в июле 2018 года. В тот день было много нетерпеливых онлайн-покупателей, ожидавших найти на рынке товары со скидкой. К сожалению, их встретили страницы с ошибками. Хотя отключение коснулось не всех пользователей, многие покупатели не пользовались сайтом в течение нескольких часов. В тот день Amazon продала более миллиона товаров, но эти цифры могли бы быть и выше, если бы не было простоев.

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

Доступность веб-сайта представлена ​​в процентах. Чтобы получить показатель доступности, разделите время безотказной работы на общий промежуток времени. Ваша единица измерения может быть в часах, минутах, секундах или днях; все зависит от ваших предпочтений.

Зачем вам нужен мониторинг доступности сайта?

Мониторинг доступности веб-сайтов — это мощная служба, которая постоянно и круглосуточно проверяет время работы вашего сайта. В случае сбоя система генерирует уведомления. Инструмент Stackify Retrace APM является примером этой услуги.

Retrace постоянно отслеживает веб-сайты и предупреждает разработчиков о сбоях или проблемах, вызывающих простои.

Но есть еще так много причин, по которым вам нужен мониторинг доступности веб-сайтов.

Доступность веб-сайта влияет на доход

Согласно исследованию Akamai, 9% посетителей сайта никогда не возвращаются на недоступный веб-сайт или на недоступный веб-сайт. Есть большая вероятность, что эти 9% просто достанутся вашему конкуренту. Что это значит? Потеря потенциальных клиентов или посетителей означает потерю конверсий, потенциальных клиентов и доходов.

Помните, что в онлайн-мире время – деньги. Результат безотказной работы 98% может привести к потере потенциального дохода почти в 200 тысяч долларов.

Это может повлиять на рейтинг вашего сайта

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

Если у вас есть инструмент мониторинга, такой как Stackify Retrace, вы будете предупреждены о сбое, и вы сможете действовать соответствующим образом.

Почему сайт не работает?

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

• Плановое обслуживание — техническое обслуживание является обязательным для каждого веб-сайта. Когда техническое обслуживание продолжается, веб-сайт автоматически закрывается. Чтобы свести к минимуму потенциальное негативное влияние на пользователей, техническое обслуживание должно проводиться в непиковые часы.
• Всплеск трафика — всплеск трафика является одной из наиболее вероятных причин падения веб-сайтов. Одно из наиболее распространенных решений для предотвращения сбоев во время всплесков трафика — убедиться, что у вашего хостинг-провайдера есть необходимые средства, чтобы гарантировать безотказную работу даже в таких ситуациях.
• Хакерские атаки — в наши дни вредоносные атаки очень распространены. Хакеры могут перегрузить сервер запросами во время DDoS-атак, внедрить вредоносный код или даже украсть учетные данные безопасности с вашего сайта. Когда это происходит, разработчики вынуждены закрывать сайт и устранять неполадки.
• Код — Плохо написанный код может привести к излишне большой нагрузке на серверы. Это может вызвать множество проблем с веб-сайтом, что приведет к ошибкам базы данных и зависанию сайта.
• Веб-хостинговая компания — если это не всплеск трафика, хакерская атака, плановое техническое обслуживание или проблемы с кодом, то проблема должна быть в самом веб-хостинг-провайдере. Инструменты мониторинга доступности веб-сайтов пригодятся в этой ситуации. Такие инструменты могут позволить вам точно оценить надежность веб-хостинговой компании.

Как контролировать доступность веб-сайта

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

Создайте критерии для проверки

При проверке доступности вы можете использовать эти вопросы в качестве руководства для правильного контроля времени работы вашего веб-сайта:

• Сколько времени занимает загрузка определенной страницы на вашем веб-сайте (в секундах)?
• Какую страницу следует использовать для измерения производительности?
• Каков временной интервал измерения?

Проверка доступности по всему миру

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

Найдите узкое место

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

Мониторинг доступности веб-сайтов с помощью Stackify Retrace

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

Stackify Retrace может помочь разработчикам контролировать доступность вашего веб-сайта и обнаруживать условия сбоя. Установив условия отключения, система предупредит пользователей.

Но это еще не все.

This entry was posted in Популярное