Простая доступность выигрывает для веб-разработчиков

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

Чтобы понять, почему доступность так важна, я рекомендую потратить пять минут на просмотр этого видео.

Введение в веб-доступность и стандарты W3C

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

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

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

Давайте рассмотрим пример, чтобы сделать это немного практичным.
Предположим, мы создаем панель навигации, и нам нужно включить ссылки на различные разделы или даже другие страницы. Недавно я узнал, что HTML удобно предоставляет навигация элемент специально для этой цели. nav Элемент используется для определения раздела страницы, содержащего навигационные ссылки. Поэтому использование именно этого тега вместо любого другого, например div помогает программам чтения с экрана пропускать этот контент, когда это необходимо. Вы можете себе представить, как утомительно было бы, если программе чтения с экрана приходилось читать каждую навигационную ссылку каждый раз, когда пользователь переходит на новую страницу. На этом простом примере мы видим, как простое исправление оказывает огромное влияние на работу пользователя.

Справочник по элементам HTML является хорошей отправной точкой для изучения всех элементов и их использования.

Убедитесь, что все интерактивные элементы доступны для навигации с помощью клавиатуры

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

Например, следующий компонент React не является интерактивным при доступе с клавиатуры:

const BadInteractiveElement = ({ handleSomeAction }) => {
  return <div onClick={handleSomeAction}>Click me!</div>;
};

Чтобы исправить это, нам также нужно включить обработчик клавиатуры! Первым шагом является добавление keyPress функция обработчика.

const GoodInteractiveElement = ({ handleSomeAction }) => {
  <div onClick={handleSomeAction} onKeyPress={handleKeyPress}>
    Click me!
  </div>;
};

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

const handleKeyPress = (event) => {
  if (event.key === ' ' || event.key === 'Enter') {
    handleSomeAction();
  }
}

Обратите внимание, что в этом примере, если бы мы следовали правилу №1 и использовали button вместо div для интерактивного элемента нам не нужно включать обработчики клавиатуры. button Элемент по умолчанию уже поддерживает клавиатуру, и нам не потребуются дополнительные обработчики событий для него. Это второе правило применяется только в тех случаях, когда мы не можем использовать правило №1.

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

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

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

Альтернативный текст обычно устанавливается в alt атрибут в теге изображения:

<img src="/assets/american-express.png" alt="American Express" />

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

  1. Убедитесь, что альтернативный текст является описательным, точным и полным. Если два разных пользователя заходят на веб-сайт, и один видит изображение, а другой видит альтернативный текст, они оба должны иметь полное изображение (каламбур 😅)
    Короче говоря, альтернативный текст и изображение должны нести одну и ту же информацию.
  2. Если изображение носит исключительно декоративный характер и не нуждается в альтернативном тексте, используйте alt="". Каждое изображение должно содержать alt атрибут. Это относится даже к изображениям, которые не добавляют смысла тексту, или изображениям, добавленным для того, чтобы все выглядело лучше.
  3. Избегайте использования таких терминов, как image или же picture для альтернативного текста. В большинстве случаев они не добавляют никакого смысла.

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

Вы можете найти более подробные сценарии альтернативного текста в этом Статья WebAIM.

  • Руководство по доступности веб-контента является исчерпывающим ресурсом, чтобы узнать больше о методах обеспечения доступности в Интернете.
  • АРИЯ-ВОДА содержит рекомендации по тому, как сделать динамический контент, такой как одностраничные приложения, более доступным.
  • Если вы используете React, Руководство по доступности в документации представлен подробный обзор различных методов, позволяющих сделать ваши веб-приложения на основе React доступными.
  • Если вы используете React и ESLintдобавив eslint-плагин-jsx-a11y Инструмент помогает найти нарушения доступности в вашем коде React, когда вы его пишете. Это также позволяет выполнять такие проверки при тестировании кода в службах непрерывной интеграции.

Вывод

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

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

Фото на обложке Дэвид Трэвис на Скрыть

Похожие записи

Добавить комментарий

Ваш адрес email не будет опубликован. Обязательные поля помечены *