Проектирование для всех: основные принципы веб-доступности

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

Важность доступности

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

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

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

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

Определение веб-доступности

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

Что такое веб-доступность?

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

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

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

• Восприятие. Информация и компоненты пользовательского интерфейса должны быть представлены так, чтобы пользователи могли их воспринимать. Это включает в себя предоставление текстовых альтернатив нетекстовому контенту, например изображениям, аудио и видео.
• Работоспособность. Любой должен иметь возможность перемещаться по веб-контенту и взаимодействовать с ним, используя различные методы ввода, например клавиатуру или программу чтения с экрана. Интерактивные элементы должны быть легко доступны и работоспособны.
• Понятность. Веб-контент должен быть ясным и понятным, с предсказуемым и последовательным макетом. Пользователи не должны оставаться озадаченными или сбитыми с толку при навигации по веб-сайту.
• Прочность. Веб-сайты и приложения должны создаваться с использованием технологий, способных противостоять развитию вспомогательных технологий и пользовательских агентов. Другими словами, они должны хорошо работать с нынешними и будущими ассистивными технологиями.
• Инклюзивность и равный доступ. Доступность Интернета — это, по сути, инклюзивность. Это гарантирует, что каждый, независимо от своих способностей, может получить доступ и извлечь выгоду из огромного количества информации, услуг и возможностей, доступных в Интернете.
• Юридическая и этическая ответственность. Многие страны признали важность доступности Интернета и приняли законы и постановления для обеспечения ее соблюдения. Нарушение этих правил может привести к юридическим последствиям.
• Преимущества для бизнеса. Доступность Интернета — это не только соблюдение требований; это также разумный деловой ход. Доступные веб-сайты могут охватить более широкую аудиторию, что потенциально увеличивает вовлеченность клиентов и доходы.
• Защищенность от будущего. Цифровой ландшафт постоянно развивается, появляются новые устройства и технологии. Доступность через Интернет гарантирует, что ваш контент и услуги останутся актуальными и пригодными для использования даже при возникновении этих изменений.

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

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

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

Семантический HTML

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

Заголовок

В следующем фрагменте HTML показаны несемантические и семантические примеры стандартной разметки:

<!-- Header - non-semantic  -->
<div class="title">About Us</div>
<div class="content">Our history, mission, and values.</div>

<!-- Header - semantic  -->
<h1>About Us</h1>
<p>Our history, mission, and values.</p>

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

Меню навигации

Ниже мы видим несемантический и семантический способ разметки меню навигации:

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

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

Рекомендации по типографике, цвету и макетам

Далее давайте рассмотрим некоторые рекомендации по типографике, цвету и макету для веб-доступности.

Типография

• Выбирайте читаемые шрифты (избегайте стильных или декоративных шрифтов, которые труднее читать).
• Используйте относительные размеры шрифта в соответствии с различными размерами экрана.
• Оптимизируйте межстрочный интервал и длину.
• Убедитесь, что текст контрастирует с фоном.

Цвет

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

Макеты

• Создавайте адаптивные дизайны.
• Обеспечьте логический порядок чтения.
• Проверьте навигацию по клавиатуре.

Реализуйте четкие стили фокусировки на активных элементах.

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

Делаем мультимедиа доступным

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

Изображений

При использовании изображений обязательно предоставляйте краткий и описательный альтернативный текст (замещающий текст) для изображений. Замещающий текст передает содержимое и функцию изображения пользователям, которые не могут его видеть. Например:

<img src="flower.jpg" alt="A red rose in full bloom">

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

Декоративные изображения

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

<img src="decorative-border.png" alt="">


Сложные изображения

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

Видео

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

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

Аудио

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

• Предлагайте транскрипты. Как и в случае с видео, расшифровки позволяют пользователям читать контент, если они не могут его прослушать.
• Включите элементы управления звуком. Убедитесь, что для аудиоплееров предусмотрены элементы управления воспроизведением, паузой и громкостью. Это помогает пользователям, которые полагаются на программы чтения с экрана или предпочитают использовать клавиатуру.

Изучение ролей ARIA

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

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

Давайте рассмотрим некоторые распространенные атрибуты ARIA на примерах.

aria-label

Атрибут aria-labelпредоставляет текстовую метку для передачи элемента вспомогательным технологиям. Это особенно полезно, когда элемент не имеет видимого текста, например значок или кнопка с изображением:

<button aria-label="Play video">
    <img src="play-button.png" alt="Play">
</button>

aria-labelledby

Атрибут aria-labelledbyссылается на элемент (обычно заголовок или метку), который служит доступным именем или меткой для другого элемента. Это помогает обеспечить контекст и гарантировать, что пользователи программ чтения с экрана понимают назначение элемента:

<div id="section-heading">Important Information</div>
<div aria-labelledby="section-heading">This is a critical update for all users.</div>

aria-describedby

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

<input type="text" aria-describedby="username-hint">
<div id="username-hint">Please enter your username (minimum 8 characters).</div>

aria-expanded и aria-hidden

Атрибуты aria-expandedи aria-hiddenчасто используются в сочетании со складными элементами, такими как аккордеоны и меню, чтобы указать, скрыто или развернуто содержимое. Они помогают пользователям понимать и контролировать интерактивные элементы:

<button aria-expanded="false" aria-controls="menu-content">Show Menu</button>
<div id="menu-content" aria-hidden="true"> <!-- Hidden content here --> </div>

role

Атрибут roleопределяет роль или тип элемента, помогая вспомогательным технологиям понять его функцию. Общие роли включают button, menu dialog, alertи т. д.:

<div role="alert">This is a critical announcement.</div>

aria-live

Атрибут aria-liveсообщает средствам чтения с экрана, что динамическое содержимое обновляется без вмешательства пользователя. Его можно использовать для объявления таких изменений, как новые сообщения чата или результаты поиска в реальном времени:

<div aria-live="polite" id="live-region">New message received.</div>

aria-activedescendant

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

<input aria-autocomplete="list" aria-activedescendant="suggestion-1">
<ul role="listbox">
  <li id="suggestion-1">Option 1</li>
  <li id="suggestion-2">Option 2</li>
  <!-- More options -->
</ul>

Использование ARIA для создания доступных форм и таблиц данных

ARIA играет жизненно важную роль в обеспечении лучшей производительности и доступности. Давайте посмотрим на несколько примеров.

Accessible form

<form>
    <label for="name">Name:</label>
    <input type="text" id="name" aria-describedby="name-desc" required>
    <div id="name-desc">Enter your full name.</div>

    <label for="email">Email:</label>
    <input type="email" id="email" aria-describedby="email-desc" required>
    <div id="email-desc">Provide a valid email address.</div>

     <label for="username">Username:</label>
    <input type="text" id="username" aria-invalid="true" required>
    <div id="username-error" role="alert">Please enter a valid username.</div>

    <button type="submit">Submit</button>
</form>

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

Для сигнализации состояний ошибок мы используем атрибут aria-invalidи role=»alert»атрибут для обозначения сообщения об ошибке для программ чтения с экрана.

Data Tables

<!-- table1 -->
<table>
  <caption>
    Monthly Expenses
  </caption>
  <thead>
    <tr>
      <th scope="col">Month</th>
      <th scope="col">Expense</th>
      <th scope="col">Amount</th>
    </tr>
  </thead>
  <tbody>
    <tr>
      <th scope="row">January</th>
      <td>Rent</td>
      <td>$1,000</td>
    </tr>
    <tr>
      <th scope="row">February</th>
      <td>Utilities</td>
      <td>$200</td>
    </tr>
  </tbody>
</table>

В приведенной выше простой таблице с заголовками <caption>элемент предоставляет заголовок таблицы, <th>элементы с атрибутами области определяют заголовки и <th scope="row">указывают заголовки строк.

<!-- table 2 -->
<table>
  <caption>
    Stock Prices
  </caption>
  <thead>
    <tr>
      <th id="symbol" scope="col">Symbol</th>
      <th id="price" scope="col">Price</th>
      <th id="change" scope="col">Change</th>
    </tr>
  </thead>
  <tbody>
    <tr>
      <th headers="symbol">AAPL</th>
      <td headers="price">$150.25</td>
      <td headers="change" aria-label="Positive change">+0.75%</td>
    </tr>
  </tbody>
</table>

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

Популярные инструменты и методы тестирования доступности

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

Lighthouse

Lighthouse, являющийся частью Chrome DevTools, включает в себя аудит доступности, который может помочь выявить распространенные проблемы с доступностью.

На изображении ниже показан тест доступности из стабильной версии инструментов разработчика Chrome Lighthouse. Это ясно показывает, что у проверяемого сайта есть некоторые проблемы с доступностью.

На изображении ниже показаны эти проблемы, которые разработчик должен исправить.

axe

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

WAVE

WAVE — это инструмент оценки доступности веб-страниц, который обеспечивает визуальное представление доступности веб-страниц и создает подробные отчеты с практическими советами.

Pa11y

Pa11y — это инструмент командной строки, который позволяет автоматически тестировать доступность и составлять отчеты для нескольких страниц. Его y можно интегрировать в конвейеры непрерывной интеграции (CI).

HTML_CodeSniffer

HTML_CodeSniffer — это букмарклет и инструмент командной строки, который проверяет веб-страницы на соответствие стандартам веб-доступности и предоставляет результаты в простом для понимания формате.

Tenon

Tenon — это облачный инструмент тестирования доступности, который предлагает варианты автоматического тестирования, создания отчетов и интеграции с различными инструментами разработки.

Accessibility techniques

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

• Автоматизированное тестирование. Используйте инструменты тестирования доступности, такие как Axe, WAVE и Pa11y, чтобы быстро выявлять распространенные проблемы, такие как отсутствие замещающего текста, низкий контраст и неправильная структура заголовков.
• Ручное тестирование. Просматривайте веб-контент вручную с помощью вспомогательных технологий, таких как программы чтения с экрана, навигация с помощью клавиатуры и программное обеспечение для распознавания голоса, чтобы имитировать действия пользователей с ограниченными возможностями.
• Тестирование клавиатуры. Убедитесь, что все интерактивные элементы, включая формы и кнопки, полностью функциональны и доступны только с клавиатуры.
• Тестирование программы чтения с экрана. Протестируйте свой веб-контент с помощью популярных программ чтения с экрана, таких как JAWS, NVDA или VoiceOver, чтобы оценить порядок чтения, навигацию и альтернативный текст.
• Тестирование цветового контраста. Используйте такие инструменты, как средство проверки цветового контраста WebAIM, чтобы убедиться, что цвета текста и фона соответствуют стандартам доступности.

Интеграция тестирования доступности в рабочий процесс разработки

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

• Образование и обучение. Убедитесь, что ваша команда разработчиков осведомлена о стандартах и ​​передовых практиках веб-доступности.
• Автоматизированное тестирование в CI/CD. Включите автоматические тесты доступности в свой конвейер непрерывной интеграции/непрерывного развертывания (CI/CD), чтобы выявлять проблемы сразу после фиксации кода.
• Ручное тестирование. Назначьте конкретных членов команды или тестировщиков для выполнения ручного тестирования доступности на ключевых этапах разработки.
• Контрольные списки доступности. Разработайте и поддерживайте контрольные списки или рекомендации по обеспечению доступности, адаптированные к вашему проекту, чтобы гарантировать, что все члены команды следуют передовым практикам обеспечения доступности.
• Пользовательское тестирование. Проведите пользовательское тестирование с участием людей с ограниченными возможностями, чтобы получить ценные отзывы и выявить реальные проблемы доступности.
• Отслеживание ошибок доступности. Интегрируйте отслеживание ошибок специальных возможностей в свои инструменты управления проектами, чтобы расставлять приоритеты и эффективно решать проблемы.
• Обзор доступности. Включите проверку доступности в процесс обеспечения качества (QA) перед каждым выпуском.

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

Заключение

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

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