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

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

Использовать семантический HTML

Использование семантического HTML — это первый шаг в разработке доступного онлайн-приложения. Семантический HTML — это разметка, которая правильно объясняет то, что она представляет.

Семантический HTML позволяет пользователям программы чтения с экрана лучше усваивать материал на вашей веб-странице. Например, для заголовков используйте теги заголовков (H1, H2, H3 и т. д.), а для списков — списки (UL, OL).

<!-- Bad Example -->
<div>
  <span>My Heading</span>
  <p>Some text here</p>
</div>

<!-- Good Example -->
<h1>My Heading</h1>
<p>Some text here</p>

Использовать атрибуты ARIA

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

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

<!-- Bad Example -->
<div role="button" onclick="doSomething()">Click me</div>

<!-- Good Example -->
<button role="button" onclick="doSomething()">Click me</button>

Сделайте формы доступными

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

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

<!-- Bad Example -->
<input type="text">

<!-- Good Example -->
<label for="username">Username:</label>
<input type="text" id="username" name="username">

/* Style required fields with a visual cue */
input[required] {
  border: 2px solid red;
}

Обеспечить цветовой контраст

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

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

/* Bad Example */
body {
  background-color: #777;
  color: #666;
}

/* Good Example */
body {
  background-color: #f5f5f5;
  color: #333;
}

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

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

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

<!-- Bad Example -->
<img src="image.png">

<!-- Good Example -->
<img src="image.png" alt="A happy dog playing in the park">

Обеспечить навигацию с помощью клавиатуры

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

<!-- Bad Example -->
<div onclick="doSomething()">Click me</div>

<!-- Good Example -->
<button onclick="doSomething()">Click me</button>

/* Highlight focused elements for keyboard users */
*:focus {
  outline: 2px solid blue;
}

Обзор

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

:::информация Также опубликовано здесь.

:::