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

Раскрытие информации: Ваша поддержка помогает поддерживать работу сайта! Мы зарабатываем реферальную плату за некоторые услуги, которые мы рекомендуем на этой странице.


Согласно Консорциуму World Wide Web (W3C), Интернет предоставляет уникальную возможность использовать технологии для обеспечения беспрецедентных уровней доступа к письменному, аудио и видео контенту для людей с ограниченными возможностями. В условиях бурного роста онлайн-услуг в сфере образования, занятости, управления государством, бизнеса, здравоохранения и развлечений доступный дизайн веб-сайта становится критической проблемой, и он будет определять, имеют ли пользователи-инвалиды равный доступ к услугам, которые мы, без инвалидности, принимаем как должное.

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

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

Советы по созданию доступного сайта

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

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

Короче говоря, согласно W3C: «доступность в Интернете означает, что люди с ограниченными возможностями могут пользоваться Интернетом» (источник) независимо от инвалидности. Достижение этого уровня доступа является целью Руководства по доступности веб-контента (WCAG) 2.0, которое является действующим действующим стандартом W3C..

Начните свой проект с доступности в уме

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

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

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

Наконец, прежде чем начать свой проект, просмотрите рекомендации, сделанные в WCAG 2.0. Следование рекомендациям, приведенным в этом документе, поможет убедиться в том, что контент вашего веб-сайта воспринимается, работает, понятен и надежен.

Правильно структурируйте HTML

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

  • Предоставьте описательные текстовые альтернативы (alt-text) для изображений: программы чтения с экрана читают alt-текст, поэтому сделайте его осмысленным. Чтение текста должно передавать то же значение, что и просмотр изображения..
  • Правильно используйте теги заголовков: программы чтения с экрана обращают внимание на теги заголовков и используют их как подсказки о важности информации и структуре контента на странице. Не пропускайте уровень заголовка и не используйте их не по порядку.
  • Создание доступных форм: используйте описательные и хорошо расположенные метки для каждого поля ввода и используйте тег метки или свойство ARIA, чтобы связать метку с полем ввода.
  • Используйте таблицы надлежащим образом. В прошлом использование таблиц для макета веб-сайта было обычной практикой. Однако программы чтения с экрана не могут различить таблицу, содержащую данные, и таблицу, используемую для макета. В результате неправильно используемые таблицы создают ненужную сложность и путаницу для посетителей, использующих программы чтения с экрана..

Работа с визуальным контентом

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

Никогда не полагайтесь на один цвет для передачи информации

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

Не используйте CSS для доставки важной информации

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

Предложите альтернативы аудио и видео контенту

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

Использовать описательный текст ссылки

Посетители, использующие программу чтения с экрана, зависят от текста ссылки, чтобы определить, куда ведет ссылка. В результате ссылки, такие как «Подробнее», или ссылки на изображения, которые не предоставляют альтернативный текст, не доступны для этих посетителей. Текстовые ссылки должны использовать краткий описательный текст, такой как «читать о нас” скорее, чем “читать далее». Эта ссылка и легка для понимания, и посетителям, использующим программное обеспечение для распознавания речи, будет легко запомнить и повторить.

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

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

Узнайте и используйте роли ARIA

Инициатива Web Accessibility Initiative Accessible Rich Internet Applications (WAI-ARIA) – это спецификация W3C, призванная помочь разработчикам веб-сайтов сделать динамический контент более доступным. Вся спецификация ARIA заслуживает серьезного исследования со стороны разработчиков, но любой, кто пишет HTML, должен уделить время, чтобы узнать о новом атрибуте роли и атрибуте aria-label, который можно назначить любому элементу HTML. Эти атрибуты помогают посетителям с определенными нарушениями перемещаться по динамическим веб-сайтам..

Сохранить функциональность для посетителей, использующих только клавиатуру

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

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

Существует множество инструментов и ресурсов, которые вы можете использовать для проверки вашего сайта на предмет доступности. Хорошее место для начала – список Easy Checks, предоставленный W3C. При просмотре этого списка будут обнаружены наиболее распространенные проблемы, такие как изображения без альтернативного текста, заголовки, которые отсутствуют или вышли из строя, распространенные проблемы с цветовым контрастом и т. Д..

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

Дополнительные ресурсы

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

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

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

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

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

  • Контрольный список раздела 508: этот полезный контрольный список поможет убедиться, что ваш дизайн соответствует требованиям раздела 508.
  • Контрольный список WCAG 2.0: Если ваша цель – соответствовать Рекомендациям по доступности веб-контента (WCAG) 2.0, этот контрольный список поможет вам убедиться, что ваш дизайн соответствует стандарту.
  • Проверка контрастности цвета: просто введите цвет шрифта и цвет фона, чтобы определить, соответствует ли контраст между этими двумя стандартами WCAG.
  • Симуляция чтения с экрана: получите представление о том, как посетители, использующие программы чтения с экрана, работают в Интернете с помощью этой симуляции.
  • Симуляция низкого зрения: эта симуляция позволяет вам просматривать веб-сайт таким образом, который имитирует влияние различных нарушений зрения, таких как глаукома, катаракта и дегенерация желтого пятна.
  • Симуляция дислексии. Это простое упражнение даст вам представление о том, каково это, когда вы пытаетесь читать с дислексией, чтобы вы лучше оценили проблемы, с которыми сталкиваются посетители при навигации в Интернете..
  • Моделирование отвлекаемости: Это моделирование даст вам ощущение страдания от отвлекаемости и поможет вам оценить ценность веб-сайтов, разработанных для уменьшения отвлечения внимания..
Jeffrey Wilson Administrator
Sorry! The Author has not filled his profile.
follow me
    Like this post? Please share to your friends:
    Adblock
    detector
    map