Создание доступных и инклюзивных веб-сайтов для нашего сообщества

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

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

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

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

В этой статье:

1. Почему мы должны сделать наши веб-сайты более доступными?

Доступность — это закон

Доступность — это право человека

2. Распространенные проблемы доступности

слух

видеть

Понимание

Навигация

Речь

3. Как сделать наши веб-сайты более доступными?

4. Способы создания веб-страниц, доступных всем

5. Руководство по доступности веб-контента (WCAG)

6. Резюме WCAG — способы сделать веб-контент доступным для всех

7. Когда оправдано несоблюдение WCAG?

8. Тестирование веб-доступности

9. 6 простых способов вручную протестировать веб-доступность

Вернуться к вершине

1. Почему мы должны сделать наши веб-сайты более доступными?

Мы должны сделать наши веб-сайты более доступными по трем основным причинам:

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

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

• Это право человека и требование закона – это чрезвычайно важно.

Вернуться к вершине

Доступность — это закон

В соответствии со статьей 24 Закона о дискриминации по признаку инвалидности (1992 г.) «лицо, которое за плату или безвозмездно предоставляет товары или услуги или предоставляет средства, является незаконным для дискриминации другого лица на основании его инвалидности:

1. путем отказа предоставить другому лицу эти товары или услуги или сделать эти средства доступными для другого лица;
2. в условиях, на которых первое упомянутое лицо предоставляет другому лицу эти товары или услуги или предоставляет эти средства другому лицу; или же
3. способом, которым первое упомянутое лицо предоставляет другому лицу эти товары или услуги или делает эти средства доступными для другого лица.

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

Вернуться к вершине

Доступность — это право человека

В дополнение к Закону о дискриминации инвалидов, доступность во всех формах является правом человека. Конвенция о правах инвалидов (КПИ) была принята Организацией Объединенных Наций в 2006 году. Статья (4)(1)(g) Конвенции призывает стороны «содействовать доступу инвалидов к новой информации и коммуникациям». технологий и систем, включая Интернет». Австралия была одной из первых сторон, подписавших Конвенцию, но, как указывает Австралийская комиссия по правам человека (AHRC), мы все обязаны защищать права, закрепленные в Конвенции.

Вернуться к вершине

2. Распространенные проблемы доступности

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

слух

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

видеть

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

Понимание

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

Навигация

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

Речь

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

Вернуться к вершине

3. Как сделать наши веб-сайты более доступными?

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

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

Вернуться к вершине

4. Способы создания веб-страниц, доступных всем

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

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

Вернуться к вершине

5. Руководство по доступности веб-контента (WCAG)

W3C — это международное сообщество, в котором организации-члены, штатные сотрудники и общественность работают вместе над разработкой веб-стандартов. Миссия W3C состоит в том, чтобы полностью раскрыть потенциал Интернета, и они реализуют Инициативу доступности Интернета (WAI). Рекомендации WAI по обеспечению доступности веб-сайтов:

• Руководство по доступности веб-контента (WCAG) 2.0 — руководство по обеспечению доступности веб-сайтов для людей с ограниченными возможностями.
• Mobile Web Best Practices (MWBP) — руководство по созданию веб-сайтов, которые можно использовать с мобильных устройств.
• Mobile Web Application Best Practices (MWABP) — руководство по разработке и доставке веб-приложений на мобильные устройства.

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

WCAG (Руководство по обеспечению доступности веб-контента) Полный документ

MWBP (Передовые практики мобильного Интернета) Полный документ

MWABP (Передовые практики мобильных веб-приложений) Полный документ

Вам может быть интересно, почему существуют рекомендации по доступности, основанные на создании страниц, приложений или веб-инструментов для мобильных устройств, но W3C и Австралийская комиссия по правам человека (AHRC) согласны с тем, что «Люди с ограниченными возможностями, использующие компьютеры, имеют те же ограничения взаимодействия, что и люди без инвалидности, которые используют мобильные устройства». На самом деле существует так много совпадений, что W3C разработала рекомендации для мобильных устройств, которые подходят как людям с ограниченными возможностями, так и людям с типичным развитием, потому что мы все сталкиваемся с проблемами доступности на мобильных телефонах по сравнению с компьютерами.

Вернуться к вершине

6. Резюме WCAG — способы сделать веб-контент доступным для всех

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

WCAG перечисляет их как 4 основных принципа, которые могут быть достигнуты на хорошем, очень хорошем или превосходном уровне (отмечены в Руководстве как A, AA и AAA соответственно). В этом документе перечислены только решения A и AA, поскольку все уровни соответствуют требованиям доступности, а некоторые решения AAA требуют слишком много времени или средств. На веб-сайте правительства Австралии говорится, что он соответствует требованиям AA и, например, работает над соблюдением требований AAA.

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

1. Воспринимаемый (зрением, звуком или и тем, и другим)
2. Работает (мышью и клавиатурой)
3. Понятный (текст должен быть легким для понимания)
4. Надежный (интерпретируется широким спектром пользовательских агентов)

Принцип 1. Веб-сайт и его навигация должны быть заметными

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

• Крупный шрифт, шрифт Брайля, речь
• Символы
• Более простой язык

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

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

Создавайте адаптируемый веб-контент , который можно представить несколькими способами без потери информации или структуры:

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

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

• Включите элементы управления звуком для звука продолжительностью более 3 секунд.
• Используйте низкий уровень фонового звука или его отсутствие.
• Отделите передний план от фона.
• Используйте цвет только со словами в качестве визуального средства передачи информации о действии, ответе или визуальном элементе.
• Используйте текст для описания визуальных презентаций.
• Используйте коэффициент контрастности в копии не менее 4,5: 1.
• Позволяет изменять размер копируемого текста до 200 % без потери содержимого или функциональности.
• Избегайте необходимости для пользователей прокручивать в двух измерениях.
• Расстояние:
  • Межстрочный интервал: 1,5 и более.
  • Интервал в конце абзаца: 2 x размер шрифта или более
  • Расстояние между буквами: 0,12 или больше
  • Межсловный интервал: 0,16 x шрифт или более
• Сделайте содержимое, находящееся при наведении, отклоняемым, доступным для наведения и постоянным.

Вернуться к вершине

Принцип 2. Веб-сайт и его навигация должны быть работоспособны

Сделайте веб-контент доступным с помощью мыши и клавиатуры:

• Сделайте весь контент и функции доступными с помощью клавиатуры и мыши .
• Разрешить свободное перемещение фокуса клавиатуры с помощью клавиатуры и мыши.
• Ярлыки могут быть включены или отключены, переназначены или активны только в фокусе.

Предоставьте пользователям достаточно времени для чтения и использования контента:

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

Создавайте контент, не вызывающий припадков или физических реакций:

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

Обеспечьте способы помочь пользователям перемещаться, находить контент и определять, где они находятся:

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

Упростите пользователям работу с функциями с помощью нескольких входов помимо клавиатуры:

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

Вернуться к вершине

Принцип 3 – Понятно

Информация и работа пользовательского интерфейса должны быть понятными.

Сделайте текстовый контент читабельным и понятным:

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

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

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

Помощь при вводе: помогите пользователям избежать и исправить ошибки:

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

Вернуться к вершине

Принцип 4 – Надежный

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

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

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

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

Вернуться к вершине

7. Когда оправдано несоблюдение WCAG?

Существуют согласованные ограничения на создание доступных веб-сайтов, установленные Австралийской комиссией по правам человека. В соответствии с Законом о дискриминации по признаку инвалидности (1992 г.) в некоторых (но не во всех) обстоятельствах обязательства в соответствии с DDA по обеспечению равного доступа ограничиваются концепцией неоправданных трудностей.

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

Для получения дополнительной информации о судебном деле — имейте в виду, что эта ссылка не является юридической консультацией, а просто общей информацией — нажмите на humanrights.gov.au/our-work/disability-rights/world-wide-web-access-disability-disability. -действовать-рекомендации-примечания-ver#whatis

Вернуться к вершине

8. Тестирование веб-доступности

Мы можем проверить наши уровни веб-доступности двумя способами:

• Инструменты веб-доступности (Для процессов инструментов веб-доступности просто обратитесь к своему непосредственному руководителю)
• Ручной аудит (проверка человеком — см. ниже)

При разработке или изменении дизайна веб-сайта или веб-приложения оценивайте доступность на раннем этапе и на протяжении всего процесса разработки, чтобы выявить проблемы доступности на раннем этапе, когда их легче решить. Существуют инструменты оценки, которые помогают с оценкой. Однако ни один инструмент сам по себе не может определить, соответствует ли сайт стандартам доступности. Чтобы определить, доступен ли сайт, требуется компетентная человеческая оценка». (веб-сайт W3C, 9 апреля 2021 г.)

Вернуться к вершине

9. 6 простых способов вручную протестировать веб-доступность

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

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

1. Отключите мышь и/или выключите трекпад.

Взаимодействуйте с сайтом, используя только TAB или SHIFT+TAB. для навигации и ENTER для перехода по ссылке.

• Можете ли вы взаимодействовать со всеми элементами управления, ссылками и меню, используя только клавиатуру?
• Можете ли вы всегда видеть, какой элемент находится в фокусе?
• Соответствует ли порядок визуального фокуса предполагаемому порядку взаимодействия?

2. Включите режим высокой контрастности — при этом также удаляются цвета на сайте.

Согласно опросу пользователей с плохим зрением, проведенному WebAIM, 30% респондентов заявляют, что они использовали режимы высокой контрастности.

• Можете ли вы легко просмотреть каждый элемент на странице?
• Вы можете перемещаться по сайту?
• Можете ли вы прочитать и понять все элементы текста?

3. Отключите изображения в настройках браузера.

• Имеет ли содержание смысл?
• Контент становится труднее понять?
• Пропал ли какой-либо контент?
• Исчезают ли какие-либо важные элементы управления?

4. Проверьте подписи или стенограммы

• Есть ли титры непосредственно на видео или есть элемент управления в плеере, который включает/отключает титры?
• Есть ли альтернативная версия со звуковым описанием или элемент управления в плеере, который включает/выключает звуковое описание?
• Для видео с большим количеством диалогов есть ли текстовая расшифровка на странице или ссылка рядом с видеопроигрывателем, которая ведет к расшифровке?

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

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

5. Нажмите на метки полей.

Имейте в виду отсутствие или неполную маркировку, неэффективную обработку ошибок и плохое управление фокусом.

Нажмите на текстовую метку рядом с полем:

• Когда вы нажимаете на метку рядом с вводом текста или текстовой областью, курсор переходит в поле?
• Когда вы нажимаете на метку рядом с переключателем или флажком, выбирается ли соседняя опция?
• Когда вы нажимаете на метку рядом с элементом SELECT, фокусируется ли это место на SELECT?

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

6. Отключите CSS в настройках браузера. Фоновые изображения исчезнут

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

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

Вернуться к вершине

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

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