Доступный веб-сайт для каждого. Итоговый выпуск 2024

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

«Сила Сети в ее универсальности. Доступность для каждого, вне зависимости от физических особенностей, является наиболее важным аспектом», – Тим Бернерс-Ли, изобретатель Всемирной паутины.

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

Представьте несколько обычных сайтов с типичными проблемами в восприятии. Вы когда-нибудь заходили на веб-сайт с маленьким шрифтом, который вы едва могли прочитать, путали страницы. Сайт, где не ясно, что делать дальше, или там были маленькие кнопки, которые непонятно для чего были созданы? Это, вероятно, вас разочаровало, если не сказать больше. И это все то, что отличает подобный сайт от доступного.

Вот общий список особенностей, которые стоит учитывать при создании доступного сайта:

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

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

Доступные сайты предназначены не только для пользователей с ограниченными возможностями. Они помогают всем:

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

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

Законы о доступности веб-сайтов

Хотя у доступных веб-сайтов много преимуществ, важно помнить, что они не просто обычные дополнения. Конвенция Организации Объединенных Наций о правах инвалидов определяет доступ к информационно-коммуникационным технологиям, включая Интернет, в качестве основного права человека. Большинство стран, включая США, имеют законы, которые требуют, чтобы веб-сайты соответствовали определенным стандартам доступности. Административный консорциум Worldwide Web Consortium (W3C) опубликовал основные принципы доступности, основанные на четырех компонентах:

• Воспринимаемый, что означает, что пользователи могут воспринимать веб-сайты своими чувствами (в основном зрение и слух);
• Работает с помощью мыши, клавиатуры и вспомогательного устройства;
• Понятный без какой-либо путаницы;
• Надежный, доступный как для новых, так и устаревших технологий.

В США правительственные веб-сайты, образовательные организации и некоммерческие группы, в соответствии с разделами 508 и 504 Закона США о реабилитации 1973 года, должны иметь доступные веб-сайты. Все веб-сайты должны соответствовать требованиям Закона США об инвалидах (ADA) 1990 года и разделу 255 Закона о связи, в котором законодательно утверждается, что веб-сайты должны быть доступны в равной степени для пользователей с ограниченными возможностями.

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

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

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

Доступность для пользователей с ограниченными возможностями

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

• Полная или частичная слепота
• Плохое зрение
• Дальтонизм
• Трудность в восприятии цветов и контрастов

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

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

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

Дизайн доступного сайта затрагивает:

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

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

Дизайн и оформление – Многим посетителям с нарушениями зрения будет трудно увидеть контрасты или определенные цвета.

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

• Убедитесь, что ваши заголовки четко описывают страницу и отличаются от названий других страниц, чтобы слепые пользователи, которые используют вспомогательный инструмент для чтения с экрана, могли понять все без дополнительного контекста, а пользователи с плохим зрением смогли бы получить необходимую им информацию.
• Убедитесь, что для каждого изображения есть атрибут alt .Тексты изображений с атрибутом Alt должны кратко и четко описывать изображение. Например, текст альт-изображения для кнопки поиска должен быть «искать», а не «лупа». В этом случае они смогут считываться с помощью устройства для чтения с экрана.
• Убедитесь, что весь текст имеет высокий коэффициент контрастности, что означает, что он резко контрастирует с фоном, например, черный текст на белом фоне или светлый текст на темном фоне. Имейте в виду, что некоторые люди, такие как дислексики, испытывают трудности при чтении букв ярких цветов. Лучше всего на вашем сайте разрешить пользователям устанавливать свои собственные цвета для текстов.
• Слепые и слабовидящие пользователи обычно вместо мыши используют команды клавиатуры или голосовые команды. Им нужны кнопки и выпадающие списки, которые показывают, какая опция выбрана в данный момент. Это может быть реализовано путем выделения текущего выбора или добавления границы.
• Все ваши тексты должны быть набраны шрифтом, который достаточно велик, чтобы посетителям легко его можно было прочитать. Шрифты также должны быть четкими и легко читаемыми, без большого количества дополнительных украшений. Если вы решите использовать меньший шрифт, убедитесь, что страница по-прежнему отображается правильно, если пользователь решает вручную уменьшить размер шрифта.
• У вас нет текста, кнопок или изображений, которые блестят или мигают. Это может не только вызвать приступ у эпилептиков, но также пользователям с плохим зрением будет трудно читать и воспринимать информацию.
• Взвешенно подойдите к выбору цвета. Не выбирайте слишком яркий цвет, который может ослепить глаза, или слишком слабый, который будет сложно разглядеть.
• До 8% мужчин и 0,5% женщин не способны различать цвета, поэтому никогда не используйте цвет для определения кнопки или учебного материала.
• Очень большие изображения многих посетителей могут сбивать с толку, особенно если они их просматривают на экране, который недостаточно велик, чтобы отобразить все изображение целиком. Это также займет много времени для загрузки, или же они могут быть заблокированы из-за их размера, что может отразиться на пользовательском восприятии.
• Убедитесь, что каждая часть видеоконтента имеет аудио аналог или транскрипцию, к которой можно получить доступ с помощью программы чтения с экрана.

Дополнительные советы по доступности веб-сайтов для пользователей с нарушениями зрения

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

• Убедитесь, что заголовки четко прописаны в вашей HTML-разметке, чтобы экранное считывающее устройство могло легко перемещаться между ними.
• Кодирование CSS и эффекты визуального форматирования часто затрудняют или не позволяют слепым пользователям получать доступ к информации в тексте. Лучше избегать CSS и создавать чистые, не громоздкие тексты.
• Создавайте тексты, удобные для увеличения. Используйте относительные значения размера, чтобы при увеличении размера экрана эти буквы не пересекались, удаляйте пробелы между строками или обрезайте концы предложений так, как того требует горизонтальная прокрутка. Избегайте растровых изображений текста, которые трудно увеличить.
• Дайте возможность пользователям перемещаться по веб-сайту с помощью голосового ввода, голосовых инструментов, программ чтения с экрана и других вспомогательных технологий.
• Предлагайте ключевую информацию как визуально, так и в аудио форме. Например, разрешите пользователям прослушивать капчу, которая отсекает ботов.
• Задайте контрастность и цвет текста, чтобы эти параметры можно было настраивать, и при этом каждый пользователь мог настроить цвет и контраст на своем браузере, которые они считают наиболее легкими для чтения.
• Сделайте описания ваших ссылок, чтобы слепой пользователь, который столкнется со списком ссылок на странице без какого-либо контекста, буде знать, куда ведет каждая их них.
• Обеспечьте полную поддержку клавиатуры, включая интуитивную и логическую структуру навигации, и клавиатуру, которая выделяет поля в форме и вариантах в раскрывающемся меню или списке при использовании элементов управления на клавиатуре, не только с помощью мыши.

Доступность для людей с нарушениями слуха

Существует множество способов, с помощью которых люди с нарушениями слуха пытаются пользоваться Интернетом. Посетители веб-сайта с нарушениями слуха бывают:

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

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

Когда вы создаете сайт для пользователей с нарушениями слуха, вы также помогаете:

• Пользователям, которые находятся в шумных местах, такие как железнодорожная станция
• Пользователям, которые хотят сохранить свои действия приватными, например, на работе или когда они не одни в комнате
• Себе, когда хотите архивировать видео на своем сайте по содержанию и тематике

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

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

Чтобы улучшить доступность вашего сайта для посетителей со слуховыми нарушениями, начните с рассмотрения этих вопросов:

• Поясняющие изображения, которые сопровождают звуковые или письменные инструкции, для использования глухими пользователями, которые более знакомы с языком жестов, чем с написанным словом.
• Инструкции и комментарии на языке жестов
• Видео и другие носители, имеющие титры, должны иметь скрытые титры, которые легко включать и выключать с помощью команд клавиатуры, а не только с помощью мыши. Они должны быть доступны на нескольких языках и/или на международном языке жестов.
• Убедитесь, что отсутствуют посторонние звуки, например, звуковые сигналы, предупреждения об ошибках или звуковые подсказки.
• Все аудиоматериалы должны иметь письменную расшифровку, которая будет доступна на той же странице, что и аудиофайл.
• Не только голосовое управление. Все должно управляться с помощью клавиш управления, а также с помощью мыши.

Расширенные рекомендации по доступности веб-сайтов для пользователей с нарушениями слуха

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

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

Доступность для людей с физическими недостатками

Пользователи Интернета могут иметь физические недостатки по целому ряду причин, но они, как правило, нуждаются в одних и тех же решениях. Физические недостатки, влияющие на использование Интернета, включают:

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

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

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

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

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

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

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

Расширенные возможности доступа для пользователей с ограниченными физическими возможностями

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

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

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

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

• Лица с нарушениями развития, обучения, восприятия или интеллектуальными проблемами
• Лица с проблемами психического здоровья
• Пожилые пользователи, страдающие от ранних стадий деменции
• Пользователи с ADD или ADHD, расстройствами аутистического спектра
• Пользователи с кратковременной потерей памяти и небольшим нарушением концентрации внимания
• Люди с психическими расстройствами, такими как повышенная тревожность или шизофрения, которые могут вызывать трудности с фокусировкой внимания, обработке и/или восприятием информации
• Люди с рассеянным склерозом, особенно во время рецидивов

Когда вы создаете сайт, доступный для пользователей с низкими когнитивными способностями, вы также помогаете пользователям, которые:

• Не являются носителями языка
• Они малограмотны
• Никогда не пользовались Интернетом
• Страдают от естественных процессов старения

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

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

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

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

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

Дополнительные функции могут быть добавлены программистами. Несколько советов:

• Уделите достаточно времени, чтобы пользователи, которые читают медленнее, отвечали, заполняли формы или могли оставлять комментарии на веб-странице до того, как она истечет
• Убедитесь, что разметка вашего сайта может быть прочитана вспомогательными экранными устройствами, чтобы информация могла быть доступна тем людям, у кого есть проблемы с пониманием письменных инструкций
• Реализуйте логическую иерархическую структуру навигации, позволяющей пользователям перемещаться между страницами и разделами
• Предоставьте функцию поиска и иерархическое меню для упрощения навигации.
• Будьте единообразны в своем веб-дизайне, размещении ссылок, структуре веб-страницы и протоколах маркировки
• Уберите всплывающую отвлекающую пользователей анимацию и звук в веб-браузерах и медиаплеерах. Убедитесь, что медиаплеер не запускается автоматически при открытии веб-страницы и что его легко остановить, когда он включится.
• Избегайте дизайна страниц, который не может быть легко скорректирован с помощью элементов управления CSS или веб-браузера.

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

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

Но быстрее и проще проверить сайт, если вы загрузите инструменты для его оценки. W3C рекомендует панель инструментов веб-разработчиков для Chrome, Opera и Firefox и панель инструментов веб-доступности для Internet Explorer, которые являются бесплатными расширениями и доступны на нескольких языках. Также есть много бесплатных и платных инструментов проверки, которые могут вам помочь.

Некоторые аспекты, которые нужно учитывать при выборе средства проверки доступности веб-сайта, включают:

• На каких языках доступен сервис
• Какие стандарты он берет за основу
• Какие форматы он проверяет
• Какой это тип инструмента – для веб-браузеров, мобильных или настольных приложений, инструмент командной строки и т.д.
• Сколько информации он может проверить автоматически
• Предоставляет ли он отчеты, обратную связь на странице, преобразования и т.д.

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

Прочтите о том, что более 95% правительственных сайтов не публикуют изображения людей с ограниченными возможностями!

Вывод

Создание доступного веб-сайта требует немного больше времени и предусмотрительности, но это того стоит. Помимо необходимости соблюдать законы и правила вашей страны, доступный веб-сайт гораздо становится проще абсолютно для всех, улучшает SEO-отдачу и помогает всем вашим посетителям получить более приятный опыт на вашем сайте. Это также делает ваш сайт доступным для 15-20% населения, у которых есть какие-то ограничения.

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