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

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

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

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

В 2016 году Гильермо Роблес, который имеет определенные проблемы со зрением, утверждал, что веб-сайт и приложение для смартфонов Domino's не были доступны для людей, использующих программы чтения с экрана, и, таким образом, цифровые продукты сети пиццерий нарушали Раздел III Закона об американцах с ограниченными возможностями (ADA).

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

Спустя 6 лет разбирательств и принятых решений Окружным судом и Верховным судом США, компания Domino's Pizza, LLC, заключила мировое соглашение с истцом Гильермо Роблесом. Однако этот случай оказал глубокое влияние на соблюдение ADA разными компаниями, включая Domino's Pizza.

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

Что такое доступность сайта?

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

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

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

Принципы веб-доступности

Доступность веб-сайтов основана на четырех основных принципах, известных как POUR. Если быть точнее, то это главные характеристики хорошо доступного ресурса:

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

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

Стандарты веб-доступности

Инициатива W3C по обеспечению веб-доступности (WAI) разрабатывает технические спецификации, руководства, методики и вспомогательные ресурсы, которые описывают решения по обеспечению доступности. Они считаются международными стандартами веб-доступности и носят название Руководства по обеспечению доступности веб-контента (Web Content Accessibility Guidelines, WCAG).

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

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

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

• Руководство по доступности средств разработки (ATAG). Руководство ATAG объясняет, как сделать авторские инструменты (программное обесепечение для создания веб-контента) доступными, чтобы люди с ограниченными возможностями могли также создавать веб-контент. Документ также призван помочь авторам создавать более доступный веб-контент.

• Руководство по доступности пользовательского агента (UAAG). Руководство UAAG объясняет, как сделать пользовательские агенты доступными для людей с ограниченными возможностями. К пользовательским агентам относятся браузеры, расширения для браузеров, медиаплееры, программы для чтения и другие приложения, которые отображают веб-контент. Сервис, который следует UAAG 2.0, улучшает доступность за счет собственного пользовательского интерфейса и способности взаимодействовать с другими технологиями, включая вспомогательные.

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

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

• Раздел 508. Раздел 508 Закона о реабилитации является федеральным законом, который требует от компаний и агентств предоставлять людям с ограниченными возможностями равный доступ к электронной информации и данным. То есть доступ сопоставимый с теми, кто не имеет инвалидности.

Руководства WAI (WCAG, ATAG, UAAG) и другие рекомендации являются путеводной звездой для всех, кто хочет сделать свои проекты более доступными.

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

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

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

1. Время безотказной работы.
2. Техническое обслуживание в непиковые часы.
3. Избыточность и балансировка нагрузки.
4. Логичная и доступная навигация.
5. Обработка ошибок и информативные сообщения о них.
6. Регулярное тестирование доступности.
7. Мониторинг и отчетность.

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

Инструменты для обеспечения веб-доступности

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

Axe DevTools Linter

axe DevTools Linter позволяет проверять код на наличие проблем с доступностью в вашей IDE и CI/CD. Данный инструмент прост в настройке и использовании и может проверять файлы React (.js, .jsx и .tsx), Vue (.vue), Angular (.component.html), HTML (.html и .htm) и Markdown (.md и .markdown).

IBM Equal Access Accessibility Checker

Это расширение для браузера с открытым исходным кодом для веб-разработчиков и аудиторов, использующее движок правил IBM, обнаруживает проблемы с доступностью веб-приложений. Оно обеспечивает интегрированную проверку, помогая быстро определить источник проблем с доступностью и попытаться их устранить. В IBM Equal Access Accessibility Checker также можно выбрать режим проверки клавиатуры.

Color Contrast

Color contrast - это полноценный инструмент проверки доступности для мобильных устройств. Он позволяет убедиться, что цветовой контраст мобильных веб-страниц или изображений соответствует рекомендациям WCAG 2.x AA.

Accessible Web RAMP

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

Total Validator

Total Validator проверяет доступность веб-сайтов, использование валидных HTML, ARIA и CSS, отсутствие битых ссылок и орфографических ошибок. Данный инструмент может проверять как отдельные страницы, так и несколько веб-сайтов за один раз, включая автономные, сайты с аутентификацией и страницы, сгенерированные с помощью javascript.

WAVE

WAVE от WebAIM предлагает несколько инструментов для оценки доступности вашего сайта. Он предоставляет отчет о визуальном представлении тех частей сайта, которые нуждаются в улучшении. Чтобы начать, нужно ввести URL-адрес вашего сайта, и Wave выделит области, которые не соответствуют стандартам WCAG. Кроме того, вы можете получить аудит от эксперта и обзор содержимого вашего сайта.

DYNO Mapper

DYNO Mapper от Indigo Design Company LLC - это генератор карты сайта. Он полезен для представления, насколько доступен ваш сайт после проведения ревизии контента, аудита и отслеживания ключевых слов. Dyno Mapper тестирует множество различных типов сайтов, включая публичные, частные и онлайн-приложения, что делает его удобным для разных проектов.

Технологии, позволяющие сделать веб-сайты более доступными

Помимо непосредственного анализа доступности сайта с помощью специальных инструментов вы можете использовать и другие технологии.

Искусственный интеллект и NLP

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

Нейролингвистическое программирование (NLP) позволяет веб-сайтам более естественно реагировать на пользовательский ввод, повышая удобство использования сайта для людей с некоторыми ограничениями. Например, это позволит лучше адаптировать рекомендации под конкретного пользователя.

Биометрическая аутентификация

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

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

Технология отслеживания движения глаз

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

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

Заявление о доступности

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

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

Для чего нужно заявление о доступности?

• Демонстрация приверженности. Это свидетельствует о стремлении владельца сайта обеспечить инклюзивный и доступный онлайн-опыт для всех пользователей, независимо от их способностей.
• Обеспечение прозрачности. Такое заявление информирует пользователей о текущем состоянии доступности сайта, включая любые известные ограничения или области для улучшения.
• Поощрение обратной связи. Заявляя о доступности, вы поощряете пользователей сообщать о проблемах, с которыми они сталкиваются, что помогает выявлять и устранять текуще барьеры доступности.
• Соблюдение нормативных требований. В некоторых юрисдикциях заявления о доступности веб-сайта могут быть обязательными в соответствии с законом или нормативными актами, например, Законом об американцах с ограниченными возможностями (ADA) в США.

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

Как поддерживать доступность веб-контента на высоком уровне: 10 советов

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

Совет №1. Включите теги alt-текста для ваших изображений.

Альтернативный текст (alt text) - это письменное описание изображения, которое помогает слабовидящим пользователям понять его содержание. При написании alt-текста будьте лаконичны и описательны, предоставляя достаточно деталей, чтобы передать смысл изображения, но не будьте слишком многословны. Избегайте использования общих описаний, таких как «изображение» или «фотография», если они не описывают изображение в точности.

Совет №2. Сделайте ваш контент легким для чтения и восприятия.

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

Совет №3. Предложите альтернативные способы просмотра аудио- и видеоконтента.

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

Совет №4. Обеспечьте пользователям сайта возможность управления звуком.

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

Совет №5. Обеспечьте полную функциональность сайта с помощью клавиатуры.

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

Совет №6. Избегайте мерцающего контента.

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

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

Совет №7. Сделайте ваш сайт легким для навигации (логически структурируйте страницы).

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

Совет №8. Предоставьте достаточно времени для взаимодействия с вашим сайтом.

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

Совет №9. Предоставляйте полезные сообщения об ошибках.

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

Совет №10. Используйте HTML-код, совместимый со вспомогательными технологиями.

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

Почему веб-доступность важна для онлайн-проектов?

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

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

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

Заключение

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

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