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

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

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

Может ли чрезмерное использование атрибутов ARIA в некоторых случаях навредить пользовательскому опыту?

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

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

Что такое программы чтения с экрана и кто их использует?

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

Существуют встроенные параметры, такие как VoiceOver (входит в состав операционных систем Apple macOS и iOS) и экранный диктор (входит в состав Microsoft Windows), а также подключаемый модуль браузера, который обычно предоставляет дополнительные функции и настройки.

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

Пример 1: изображение

Давайте возьмем это простое изображение мопса.

<img src="assets/images/8193903121.png"/>

      
                

                    
                    
                
            

8193903121.png, изображение

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

<img
  src="assets/images/8193903121.png" 
  alt="A pug wearing a red party hat with white dots"
/>

В качестве примечания: когда элемент html поддерживает этот altтег, его следует использовать поверх aria-label. Aria-labelследует использовать только в особых случаях, например, когда a divимеет свойство role=”img”.

Пример 2: неактивная кнопка отправки

<button disabled>Let's Go!</button>

      
                

                    
                    
                
            

Поехали!, кнопка

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

<button aria-label="Submit email" aria-disabled="true" disabled>Let's Go!</button>

Здесь описывает aria-labelназначение кнопки, а aria-disabledатрибут позволяет программе чтения с экрана описать, что кнопка затемнена и в настоящее время отключена.

Пример 3: поле комментария с меткой

Comment:
<textarea></textarea>
<p> Your comment will be visible to all members of your organization.</p>

      
                

                    
                    
                
            

Редактировать текст, пустой

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

<label id="comment-label" for="comment-box">Comment:</label>
<textarea 
  id="comment-box" 
  aria-labelledby="comment-label" 
  aria-describedby="comment-desc"
></textarea>
<p id="comment-desc">Your comment will be visible to all members of your organization.</p>

Здесь aria-labelledbyсоединяется textareaс label, позволяя программе чтения с экрана понять, что поле запрашивает комментарий. Также обратите внимание, что forсвойство в метке делает обратное, поэтому, когда программа чтения с экрана фокусируется на label, она знает, что это метка для textarea. Наконец, aria-describedbyатрибут связывает описание с файлом textarea.

Пример 4: простая таблица

<table>
  <thead>
    <tr>
      <th>Name</th>
      <th>Quantity</th>
      <th>Rating</th>
    </tr>
  </thead>
  <tbody>
    <tr>
      <th>Product 1</th>
      <td>5</td>
      <td>4.5</td>
    </tr>
    <tr>
      <th>Product 2</th>
      <td>3</td>
      <td>3.7</td>
    </tr>
  </tbody>
</table>

      
                

                    
                    
                
            

Название: (Колонка 1 из 3) -> Количество: (Колонка 2 из 3) -> Рейтинг: (Колонка 3 из 3) -> Продукт 1 -> 5 -> 4,5 -> Продукт 2 -> 3 -> 3,7

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

<table role="table" aria-label="Product Comparison">
  <thead>
    <tr>
      <th scope="col" aria-label="Product Name">Name</th>
      <th scope="col" aria-label="Product Quantity">Quantity</th>
      <th scope="col" aria-label="Product Rating">Rating</th>
    </tr>
  </thead>
  <tbody>
    <tr>
      <th scope="row" aria-label="Product 1">Product 1</th>
      <td>5</td>
      <td>4.5</td>
    </tr>
    <tr>
      <th scope="row" aria-label="Product 2">Product 2</th>
      <td>3</td>
      <td>3.7</td>
    </tr>
  </tbody>
</table>

Теперь, просматривая 3-й столбец, программа чтения с экрана может сказать:

Название продукта: Продукт 2-> Количество продуктов: 3-> Рейтинг продукта: 3,7

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

Пример 5: чрезмерное использование атрибутов Aria

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

<div 
  role="dialog" 
  aria-labelledby="modal-title" 
  aria-describedby="modal-description" 
  aria-modal="true" 
  aria-hidden="false" 
  aria-live="polite" 
  aria-atomic="true"
>
  <h2 id="modal-title">Modal Title</h2>
  <p id="modal-description">This is a modal window that contains important information for the user.</p>
  {...}
</div>

Будущее АРИИ

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

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

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

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

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

1. Используйте атрибуты и методы ARIA, чтобы предоставить дополнительный контекст и функциональные возможности вспомогательным технологиям.
2. Предоставьте четкие и описательные метки и описания для всех элементов и элементов управления.
3. Используйте семантические элементы HTML, чтобы точно передать структуру и содержание страницы.
4. Убедитесь, что контент правильно структурирован и организован, с четкой иерархией и взаимосвязями между элементами.
5. Разумно используйте цвет и контраст, чтобы содержимое было разборчивым и видимым для пользователей с плохим зрением.
6. Обеспечьте специальные возможности клавиатуры, позволяя пользователям перемещаться и взаимодействовать со страницей, используя только клавиатуру или другое устройство ввода.
7. Протестируйте приложение с помощью вспомогательных технологий, чтобы убедиться в его пригодности и доступности.

Есть много других атрибутов ARIA, которые я здесь не показывал. Полный их список смотрите здесь:https://developer.mozilla.org/en-US/docs/Web/Accessibility/ARIA/Attributes

Обратите внимание, что ChatGPT использовался для исследований и написания некоторых частей этой статьи.