Доступность сайта означает, что каждый человек, включая людей с ограниченными возможностями, может выполнить любое действие на сайте. При этом неважно, использует пользователь клавиатуру или любое другое устройство.
Критерии доступности сайта определяются рядом стандартов Web Content Accessibility Guidelines или WCAG, которые регулируют, какие функциональные возможности должны быть доступны на сайте.
Доступность веб-сайта означает, что ваш сайт должен быть простым и доступным для всех, включая пользователей с ограниченными возможностями или физическими особенностями. Интернет – это неосязаемое пространство, поэтому он должен быть одинаково доступным для всех, но только в том случае, если мы сами создадим эту доступность.
«Сила Сети в ее универсальности. Доступность для каждого, вне зависимости от физических особенностей, является наиболее важным аспектом», – Тим Бернерс-Ли, изобретатель Всемирной паутины.
Кому нужны доступные веб-сайты?
Представьте несколько обычных сайтов с типичными проблемами в восприятии. Вы когда-нибудь заходили на веб-сайт с маленьким шрифтом, который вы едва могли прочитать, путали страницы. Сайт, где не ясно, что делать дальше, или там были маленькие кнопки, которые непонятно для чего были созданы? Это, вероятно, вас разочаровало, если не сказать больше. И это все то, что отличает подобный сайт от доступного.
Вот общий список особенностей, которые стоит учитывать при создании доступного сайта:
Что делает этот инструмент?
Никто не любит видеть сообщение о том, что сайт недоступен — будь то ваш собственный сайт или какой-то другой. Однако не нужно спешить и начинать паниковать! Сперва нужно выяснить — может, такая проблема есть только у вас (например, из-за настроек подключения)? Может, сайт недоступен для всех пользователей — например, из-за проблем на стороне хостинга, повреждения базы данных, вирусной атаки, проблем с настройкой DNS, DDoS-атаки и так далее.
Когда нужно использовать этот сервис?
Наш инструмент отслеживает статус сайта и проверяет его доступность без каких-либо скрытых платежей. Когда вы введете URL, мы проведем проверку доступности домена в режиме реального времени.
Что делать, если мой сайт недоступен?
Когда вы убедитесь в том, что ваш сайт действительно недоступен, свяжитесь с представителями вашего хостинга, чтобы узнать о том, сколько времени потребуется на исправление проблем. Возможно, вам придется связаться со своими клиентами через социальные сети и предупредить их о технических проблемах, над решением которых вы активно работает.
DNS-серверы интернет-провайдеров обновляются с разной периодичностью. То есть с одного интернет-провайдера ваш сайт может открываться, а с другого — быть недоступен. Обычно DNS-серверы обновляются в течение 24 часов.
Если с момента смены DNS-серверов прошло более суток, но сайт всё ещё недоступен, проверьте, с чем может быть связана проблема:
Ваш сайт доступен, но отображается ошибка?
Воспользуйтесь следующим разделом справки: Сайт не работает. Откройте подходящую статью и следуйте её рекомендациям.
Помогла ли вам статья?
Спасибо за оценку. Рады помочь 😊
Что такое доступный сайт
Сайт считается доступным, если с ним может взаимодействовать человек, использующий вспомогательные технологии: скринридеры, устройства для чтения текста или голосовые устройства управления. Кроме того, интерфейс сайта должен быть понятным и удобным для людей с ограниченными возможностями.
В 2022 году в мире насчитывалось более 1 миллиарда людей с ограниченными возможностями. Получается, примерно каждый восьмой человек на Земле имеет особенности со здоровьем, которые могут отражаться на работе — в том числе, на использовании интернета.
Как создать доступный сайт
Чтобы сделать сайт доступным, необходимо следовать ряду правил и критериев, установленных организацией W3C. Она создала стандарт доступности сайтов, его актуальная версия — WCAG 2.1.
📌 В стандарте рекомендации по доступности делятся на четыре категории:
В каждой категории есть ряд рекомендаций, которые и являются критериями доступности. Рассмотрим несколько важных критериев.
🔠 Предоставление текстовых альтернатив для всех не визуальных элементов — изображений, видео и аудио. Для обеспечения доступности аудио и видеоконтента на сайте необходимо добавлять описания, а также субтитры или звуковые сигналы для пользователей с ограниченными возможностями.
Чтобы скринридеры могли верно прочитать все элементы, важно прописывать определения для всех визуальных и интерактивных элементов
⌨️ Сайтом можно полностью пользоваться склавиатуры. Формы и другие интерактивные элементы на сайте должны быть доступны с помощью клавиатуры и иметь понятные инструкции для пользователей.
Пример доступности форм — в каждом поле есть подсказки, форма доступна с помощью клавиатуры. Источник — Яндекс
🅾️ Достаточная контрастность текста и изображений. Веб-страницы должны иметь достаточный контраст между текстом и фоном, чтобы обеспечить лёгкую читаемость. Также необходимо учитывать размер и тип шрифта, чтобы он был читаемым для всех пользователей, включая тех, у которых есть проблемы со зрением.
Пример недостаточной контрастности текста и декоративных элементов. Источник — Аудиосервис Звук
Важно учитывать, что существуют особенности зрения, которые проявляются в неверном восприятии цветов, например, дальтонизм. Поэтому рекомендуется добавлять состояния интерактивным элементам не только в виде изменения цвета, но и с помощью других визуальных средств.
При нажатии кнопки подчёркиваются, что помогает визуально понять, что действие совершено. Источник — Кинопоиск
🖌️ Простой и интуитивный дизайн. Он не требует дополнительных усилий или знаний для пользования сайтом. Разработчику важно разбираться в дизайне, чтобы создавать качественные и доступные сайты.
Структура сайта должна быть чётко организована, чтобы пользователи могли без сложностей перемещаться по страницам и находить необходимую информацию. Использование семантической разметки, где каждый тег стоит на своём месте, облегчает чтение и понимание содержимого программами чтения с экрана.
Пример простого дизайна с ясными категориями и фильтрами для удобной навигации. Также учтена доступность, и сайт предлагает возможность изменения размера шрифта. Источник — Etsy
↕️ Адаптируемость. Сайт должен быть доступен на разных устройствах и в портретной, и в альбомной ориентации.
Как создавать адаптивные сетки
Страница помощи не адаптируется под ориентацию устройства пользователя. Источник — HeadHunter
🚦Доступная навигация. Навигация и ссылки на сайте должны быть организованы и иметь ясные названия, чтобы пользователи могли находить нужный контент и определять своё местонахождение на странице.
Пример понятной и удобной навигации, с помощью которой пользователю легко найти необходимое. Источник — Dropbox
💬 Тестирование и обратная связь. Необходимо проводить тестирование доступности сайта с помощью инструментов и методик, которые позволяют определить проблемы доступности. Также необходимо предоставлять возможность обратной связи для пользователей, чтобы они могли сообщать об ошибках или проблемах на сайте.
Для определения достаточной контрастности сайта существуют разные инструменты, например, сервис WebAIM позволяет проверять контрастность цветов элементов и соотносить данные с критериями WCAG. Также есть отдельный инструмент от WebAIM для измерения контрастности ссылок относительно фона и основного текста.
Пример разбора контрастности ссылок. Источник — WebAIM
Помимо проверки контрастности, есть сервисы для симуляции дальтонизма и других особенностей зрения, чтобы проверить, как видят сайт люди с другим цветовосприятием. Например, в Chrome DevTools есть встроенный симулятор особенностей зрения, в котором вы можете проверить любой сайт. Это можно сделать, добавив инструмент Rendering и выбрав в пункте Emulate vision deficiencies нужную особенность зрения.
Пример того, как выглядит сайт Яндекс. Маркет с фильтром Protanopia (отсутствие восприятия красного цвета)
Доступность сайта должна учитываться на каждом этапе разработки. В процессе вёрстки рекомендуется постоянно проверять сайт на доступность и вносить изменения, чтобы не упустить ни один из критериев.
Подробнее узнать о критериях доступности, инструментах проверки и научиться создавать доступные для каждого пользователя сайты, можно на нашем специализированном курсе.
Как сделать сайт для посетителей с визуальными ограничениями более доступным
Дизайн доступного сайта затрагивает:
Содержание – Сайт должен быть легок для восприятия, даже если читать вслух с помощью инструмента для чтения с экрана.
Форматирование – Плохо отформатированные страницы нельзя увеличить без потери качества, по ним невозможно полноценно перемещаться или отрегулировать для лучшей видимости.
Дизайн и оформление – Многим посетителям с нарушениями зрения будет трудно увидеть контрасты или определенные цвета.
Вот основные параметры, которые нужно проверить на своем веб-сайте, чтобы убедиться, что он доступен для посетителей с нарушениями зрения:
Доступность для пользователей с ограниченными возможностями
В основном, Интернет воспринимается визуально, поэтому одной из основных ограниченных возможностей человека, которую стоит учитывать при создании веб-сайта, является визуальная ограниченность. Это может включать в себя:
Когда вы будете создавать сайт с учетом особенностей восприятия людьми с ограничениями в визуальном восприятии, вам так же придется учесть следующие аспекты:
Доступность для людей с физическими недостатками
Пользователи Интернета могут иметь физические недостатки по целому ряду причин, но они, как правило, нуждаются в одних и тех же решениях. Физические недостатки, влияющие на использование Интернета, включают:
Интернет-пользователи, у которых выявлены неврологические расстройства или же они и вовсе являются инвалидами, часто страдают от своих физических недостатков. Разработка веб-сайта, доступного для пользователей с физическими недостатками, также может помочь пользователям, которые:
Доступность для людей с нарушениями слуха
Существует множество способов, с помощью которых люди с нарушениями слуха пытаются пользоваться Интернетом. Посетители веб-сайта с нарушениями слуха бывают:
Некоторые интернет-пользователи, у которых есть слуховые нарушения, используют язык жестов для общения и могут пытаться читать текст. Это означает, что язык, используемый на веб-сайтах, должен быть простым и понятным, наряду с письменными инструкциями с пояснительными изображениями
Когда вы создаете сайт для пользователей с нарушениями слуха, вы также помогаете:
Как сделать свой сайт доступным для посетителей со слуховыми нарушениями
Чтобы сделать сайты доступными для посетителей со слуховыми нарушениями, необходимо для начала определиться с его содержанием. Некоторые глухие пользователи в основном используют язык жестов и нуждаются в текстовых инструкциях, написанных простым языком. Форматирование – еще одна потенциальная проблема, включающая такие функции, как регулировка громкости. Наконец, среди прочих шагов, доступный дизайн для глухих пользователей должен включать использование пояснительных изображений.
Чтобы улучшить доступность вашего сайта для посетителей со слуховыми нарушениями, начните с рассмотрения этих вопросов:
Доступные веб-сайты хороши для всех
Доступные сайты предназначены не только для пользователей с ограниченными возможностями. Они помогают всем:
Когда вы создаете доступный веб-сайт, одновременно вам нужно выполнить множество других задач. Мобильный веб-дизайн, удобство использования, SEO и оптимальный пользовательский интерфейс с большой долей вероятности перекроют доступный дизайн. Кроме того, если ваш сайт прост в использовании, не запутан и доступен для пользователей с ограниченными возможностями, он будет намного более привлекательным абсолютно для всех, кто его посещает. У доступных сайтов обычно лучше результаты SEO, больший охват, более низкие затраты на техническое обслуживание, а также более высокий уровень корпоративной социальной ответственности.
Расширенные возможности доступа для пользователей с ограниченными физическими возможностями
Если у вас есть программист, который может изменить кодировку вашего сайта, для вас открывается много дополнительных функций.
Расширенные возможности доступа для пользователей с низкими когнитивными способностями
Дополнительные функции могут быть добавлены программистами. Несколько советов:
Как сделать свой сайт доступным для посетителей с низкой когнитивной способностью
Разработка веб-сайта, доступного для пользователей с низкими когнитивными способностями, начинается с содержимого, которое должно быть сформулировано простым языком, короткими фразами и несложными инструкциями. Низкие когнитивные способности не всегда одно и то же, что и низкий интеллект, поэтому важно не разговаривать с этими пользователями снисходительно. Многие из потребностей в доступности для пользователей с низкой когнитивной способностью совпадают с потребностями пользователей, у которых есть зрительные или слуховые нарушения, такие как поддержка клавиатурных элементов управления и вспомогательных инструментов для чтения с экрана, последовательность и четкий навигационная хронология.
Вот несколько важных моментов, которые необходимо учесть для создания доступного сайта для пользователей с низкой когнитивной способностью:
Как сделать ваш сайт доступным
Ряд исправлений на вашем сайте внести достаточно легко, например, изменить цвета фона на белый или добавить субтитры к вашим видео. Другие же, такие, как настройка иерархии заголовков, исправить достаточно сложно и необходимы навыки программирования. Мы изложим некоторые основные решения, которые сделают ваш сайт доступным, и дадим советы о том, как их достичь.
Как сделать свой сайт доступным для посетителей с ограниченными физическими возможностями
Когда вы создаете сайт, доступный для пользователей с физическими недостатками, первое, что нужно учитывать, – возможность использования его без мыши. Для пользователей с физическими недостатками и ограничениями использовать клавиатуру гораздо проще, чем мышь. Некоторые пользователи могут использовать специальные приспособления для управления с помощью рта или ног, которые не всегда точно удается направить в нужную область, или специальное программное обеспечение, работающее от движения глаз, которое, к сожалению, не работает с каждой веб-страницей.
Вот несколько шагов, чтобы сделать ваш сайт более доступным для пользователей с физическими недостатками.
Как проверить доступность вашего сайта
Но быстрее и проще проверить сайт, если вы загрузите инструменты для его оценки. W3C рекомендует панель инструментов веб-разработчиков для Chrome, Opera и Firefox и панель инструментов веб-доступности для Internet Explorer, которые являются бесплатными расширениями и доступны на нескольких языках. Также есть много бесплатных и платных инструментов проверки, которые могут вам помочь.
Некоторые аспекты, которые нужно учитывать при выборе средства проверки доступности веб-сайта, включают:
К сожалению, нет ни одного инструмента, который бы мог проверить доступность вашего веб-сайта полностью. Вам необходимо использовать несколько разных инструментов, чтобы оценить различные аспекты вашего сайта. Но даже самый большой набор инструментов для проверки доступности не сможет сделать ваш сайт идеальным. Это требует контроля людьми. Кто-то лично должен проверить различные аспекты, такие как возможность увеличения текста, просмотр страниц с использованием специальных программ, и выявить все возможные преграды, которые могут возникнуть у людей с ограниченными возможностями.
Прочтите о том, что более 95% правительственных сайтов не публикуют изображения людей с ограниченными возможностями!
Дополнительные советы по доступности веб-сайтов для пользователей с нарушениями зрения
Разработку дополнительных опций для улучшения доступности сайтов для людей с ограниченным зрением лучше доверить программистам. Вот некоторые дополнительные советы по доступности для разработчиков:
Доступность для пользователей с низкими когнитивными способностями
Пользователи сайта с низкой когнитивной способностью обычно имеют более короткую краткосрочную память, у них нарушения концентрации и они легко отвлекаются. Это могут быть:
Когда вы создаете сайт, доступный для пользователей с низкими когнитивными способностями, вы также помогаете пользователям, которые:
Материалы по теме
«Доктайп» — журнал о фронтенде. Читайте, слушайте и учитесь с нами.
Законы о доступности веб-сайтов
Хотя у доступных веб-сайтов много преимуществ, важно помнить, что они не просто обычные дополнения. Конвенция Организации Объединенных Наций о правах инвалидов определяет доступ к информационно-коммуникационным технологиям, включая Интернет, в качестве основного права человека. Большинство стран, включая США, имеют законы, которые требуют, чтобы веб-сайты соответствовали определенным стандартам доступности. Административный консорциум Worldwide Web Consortium (W3C) опубликовал основные принципы доступности, основанные на четырех компонентах:
В США правительственные веб-сайты, образовательные организации и некоммерческие группы, в соответствии с разделами 508 и 504 Закона США о реабилитации 1973 года, должны иметь доступные веб-сайты. Все веб-сайты должны соответствовать требованиям Закона США об инвалидах (ADA) 1990 года и разделу 255 Закона о связи, в котором законодательно утверждается, что веб-сайты должны быть доступны в равной степени для пользователей с ограниченными возможностями.
Некоторые организации даже удалось привлечь к ответственности за отсутствие доступных веб-сайтов. Они были наказаны огромными штрафами, а их репутация от этого только пострадала. Во многих случаях, когда закон не ясен в отношении требований к доступности, многие компании просто решили сделать все возможное, чтобы быть доступными, вместо того, чтобы рисковать нарушением закона.
Расширенные рекомендации по доступности веб-сайтов для пользователей с нарушениями слуха
Вам понадобится помощь программиста или наличие дополнительных знаний в области программирования, чтобы применить расширенные возможности доступа для пользователей с нарушениями слуха.
Вывод
Создание доступного веб-сайта требует немного больше времени и предусмотрительности, но это того стоит. Помимо необходимости соблюдать законы и правила вашей страны, доступный веб-сайт гораздо становится проще абсолютно для всех, улучшает SEO-отдачу и помогает всем вашим посетителям получить более приятный опыт на вашем сайте. Это также делает ваш сайт доступным для 15-20% населения, у которых есть какие-то ограничения.
Хотя некоторые моменты достаточно сложны и вам потребуется помощь разработчика, вы с самого начала можете сделать свой сайт доступным с помощью простых и быстрых изменений. Работа над доступным веб-сайтом может вестись несколько дольше, но нет никаких сомнений в том, что это того стоит.