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

Статья
04/04/2023

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

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

Сведения о новых функциях HTML5, поддерживаемых Microsoft Edge, см. на странице HTML5Accessibility .

Принцип работы специальных возможностей

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

Для приложений на платформах Майкрософт и в Интернете специальные возможности взаимодействуют с любой комбинацией:

Microsoft модель автоматизации пользовательского интерфейса.
Объектная модель для конкретного приложения, например модель DOM в Microsoft Edge.

Для веб-разработчиков некоторые ЭЛЕМЕНТЫ HTML сопоставляются с модель автоматизации пользовательского интерфейса объектами, поэтому при выборе этих ЭЛЕМЕНТОВ HTML разработчик может использовать свойства специальных возможностей и события, встроенные в эти элементы. При разработке веб-сайта обычно необходимо только убедиться, что API правильно написан или указан соответствующий элемент, чтобы приложение было доступно.

Дополнительные сведения см. в статье ARIA и автоматизация пользовательского интерфейса в Microsoft Edge . Специальные возможности приложений универсальная платформа Windows (UWP) описаны в статье Специальные возможности в Центре разработки для Windows.

Многие распространенные проблемы со специальными возможностями динамического содержимого можно устранить с помощью правильной практики написания кода. Документация по WCAG 2.0 содержит множество методов и рекомендаций, которые помогут вам создать более доступные динамические веб-приложения. Однако даже при правильном коде динамическое содержимое не обязательно доступно. Доступные расширенные интернет-приложения (ARIA) помогают устранить эту проблему.

Дополнительные сведения о специальных возможностях в Интернете проверка из статьи Общие сведения о специальных возможностях в Интернете в рамках инициативы веб-специальных возможностей (WAI).

АРИЯ

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

Роли, свойства и состояния

Роли ARIA задаются для элементов с помощью атрибута role для предоставления дополнительных возможностей и API специальных возможностей информации об элементе. Например, приведенный ниже <li> элемент назначается role="menuitem" для обозначения того, что он является элементом в меню.

<li role="menuitem">Home</li>

Состояния и свойства ARIA — это атрибуты с префиксом aria, которые предоставляют конкретные сведения об объекте, помогающие определить природу ролей. Свойства — это атрибуты, необходимые для природы объекта, например aria-readonly и aria-haspopup. Изменение свойства влияет на значение объекта .

В приведенном ниже примере свойство aria-haspopup="true" задается в элементе <li> меню, чтобы означать, что у него есть всплывающее окно:

<li role="menuitem" aria-haspopup="true">Open</li>

Состояния не изменяют природу объекта, но представляют информацию, связанную с объектом, или взаимодействие пользователя с объектом, например aria-hidden или aria-checked. Например, состояние aria-checked="false" в приведенном ниже примере означает, что флажок снят, а не установлен:

<div role="checkbox" aria-checked="false">Accept</div>

Чтобы просмотреть полный список ролей, свойств и состояний, перейдите в раздел Модель ролей в W3C.

Тестирование совместимости специальных возможностей

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

Тестирование совместимости клавиатуры проверяет, имеют ли пользователи доступ ко всем интерактивным элементам управления без необходимости использования мыши. Microsoft Accessibility Insights для Интернета — это расширение браузера для Microsoft Edge и Chrome, которое поможет вам выявить ряд распространенных проблем.

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

Html, ARIA и CSS.
Уровень поддержки специальных возможностей для компонента или техники.

Различные браузеры могут сопоставлять элементы с API специальных возможностей платформы иначе, чем Microsoft Edge сопоставляет их. При создании интерфейса важно учитывать каждое различие.

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

Узнайте, как тестировать

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

Тестирование с помощью средств чтения с экрана в WebAIM предоставляет дополнительные сведения об обучении тестированию со специальными возможностями.

Локальное тестирование

Большинство устройств включают специальные возможности, встроенные в ОС. Microsoft Windows включает средство чтения с экрана экранного диктора Windows и экранную лупу Windows. Сторонние вспомогательные технологии, такие как NVDA, FreedomscientificSoftwareJaws и ZoomText , доступны для скачивания. Apple macOS включает средство чтения с экрана VoiceOver . IOS, Android и Linux поддерживают различные специальные технологии.

Тестирование на виртуальных машинах и эмуляторах

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

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

Примечание.

Симулятор iOS в настоящее время не включает VoiceOver.

Облачные средства тестирования

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

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

См. также облачные эмуляторы и симуляторы.

Ресурсы по основам специальных возможностей

Это проекты и инициативы по обеспечению специальных возможностей.

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

Инициатива по обеспечению специальных возможностей в Интернете (WAI)

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

Блоги о специальных возможностях

Это блоги о специальных возможностях.

TPGi, LLC

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

Уровень доступа

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

Примеры со специальными возможностями

Это библиотеки и примеры специальных возможностей.

ally.js . Руководства

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

Примеры OpenAjax

Веб-сайт OpenAjax Alliance является отличным ресурсом для проверки правил для WAI-ARIA и содержит ряд примеров реализаций WAI-ARIA.

Шаблоны

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

Методы и средства специальных возможностей

Это методы и средства для улучшения специальных возможностей.

Специальные возможности: создание значков расширений со специальными возможностями для Microsoft Edge

Получите рекомендации по созданию значков расширений со специальными возможностями для Microsoft Edge. Дополнительные сведения см. в статье Специальные возможности: создание значков расширений со специальными возможностями для Microsoft Edge.

Имя и описание со специальными возможностями: вычисления и сопоставления 1.1

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

Ресурсы оценки специальных возможностей

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

Тесты совместимости специальных возможностей

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

Создание доступных веб-сайтов стало намного проще

В этой записи блога .NET Web Development and Tools описывается средство проверки читаемости расширения Visual Studio. Дополнительные сведения см. в разделе Создание доступных веб-сайтов стало намного проще.

Основные сопоставления API специальных возможностей 1.1

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

Простые проверки — первая проверка специальных возможностей в Интернете

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

Знакомство с WCAG 2.0

Краткий справочник по рекомендациям по обеспечению доступности веб-содержимого (WCAG) 2.0 (критерии успеха) и методикам. Дополнительные сведения см. в статье Практическое руководство по выполнению wcAG 2.0.

Сопоставления API специальных возможностей HTML 1.0

В этом документе по сопоставлениям W3C объясняется, как элемент и атрибуты HTML5.1 сопоставляется с API специальных возможностей платформы. Дополнительные сведения см. в статье Сопоставления API специальных возможностей HTML 1.0.

Краткие советы

Список советов по быстрой веб-разработке для специальных возможностей проекта A11Y. Дополнительные сведения см. в разделе Краткие советы.

Проверка сайта

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

Методы для WCAG 2.0

Методы из W3C, которые предоставляют рекомендации для веб-разработчиков по выполнению условий успешного выполнения рекомендаций по специальным возможностям веб-содержимого (WCAG) 2.0 . Дополнительные сведения см. в статье Методы для WCAG 2.0.

Советы по разработке специальных возможностей в Интернете

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

Методики разработки WAI-ARIA 1.1

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

Список средств оценки специальных возможностей в Интернете

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

Перспективы специальных возможностей в Интернете: изучение влияния и преимуществ для всех

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