Пытаясь включить перетаскивание в свой первый проект на рельсах, я наткнулся на важную информацию о том, как сделать веб-сайты более доступными. Все началось с отличной статьи о том, как сделать функции перетаскивания доступными для пользователей клавиатуры (источник), но она открыла мне целый мир специальных возможностей, которые я еще не изучил. Все, что я действительно знал, пока не прочитал эту статью и не попал в последующую кроличью нору документации, это то, что вы действительно должны иметь замещающий текст во всех ваших тегах img.
Перетаскивание
Часто перетаскивание реализуется способами, которые зависят от трекпада или мыши. Типичный опыт ориентирован на пользователя, который перемещает мышь, щелкает элемент, перетаскивает его в новое положение и размещает, отпуская кнопку/щелчок. В идеале пользователи, работающие с клавиатурой, должны иметь тот же набор возможностей, что и пользователь с мышью.
Информационная очередь
Программы чтения с экрана часто слышат текст в порядке очереди. Информация ставится в очередь по мере того, как пользователь перемещается по веб-странице. ARIA (Accessible, Rich, Internet, Applications) — это инструмент, который стоит учитывать в процессе проектирования. Они позволяют не стоять в очереди, чтобы быстро получить важную информацию.
Роли HTML — это обещание
Из документации здесь я узнал о том, что отличает хорошую ARIA от плохой ARIA, и что плохая ARIA хуже, чем вообще ничего. Один из основополагающих принципов доступности ARIA заключается в том, что роль — это обещание. Чтобы использовать их пример, следующий код подразумевает, что разработчик включил javascript для надлежащего включения div с взаимодействиями, которые позволяют пользователю клавиатуры работать с кнопкой. Если им это не удалось, это будет похоже на ссылку, которая обещает что-то очень крутое, но в конечном итоге ни к чему не приведет.
Интерактивные регионы ARIA
Они делают это с живыми регионами ARIA (см. документацию здесь) и с реализацией этих очень мило названных вежливых и невежливых регионов… также отключенных (состояние по умолчанию), что некрасиво, но все же очень важно. Когда на вашем сайте есть динамические области, которые изменяются без перезагрузки страницы, часто это изменение заметно визуально. Как воспроизвести этот опыт для пользователей, которые не видят страницу визуально?
Вежливые регионы, как и следовало ожидать, ждут своей очереди. Невежливые регионы сокращают очередь. Создайте вежливый текст, подобный этому.
Как говорится в документации ARIA live region, лучше всего делать такие вещи, как выпадающее меню, вежливыми, так как тогда пользователь программы чтения с экрана услышит информацию, когда он останавливается на элементе меню. Довольно легко представить, насколько хаотичным был бы опыт, если бы все, что вы так сильно задели, было поставлено в очередь и прочитано вам, особенно если многие вещи соперничали за первый приоритет.
Как я планирую включить это в свой проект: перетаскивание
После реализации моей функции перетаскивания я хотел бы включить область ARIA-live для моей функции перетаскивания, а также необходимый javascript, чтобы пользователи клавиатуры могли получить доступ к функции перетаскивания с помощью пробела и клавиш со стрелками. . Чтобы создать вспомогательный текст, доступный для пользователей с программой чтения с экрана, но невидимый для глаз, я бы последовал предложениям здесь и сделал вспомогательный текст классом с абсолютной позицией и сделал его крошечным и, следовательно, невидимым.
А также раздел aria-live с классом вспомогательного текста.
Связывание вышеприведенного с javascript, который помещает соответствующий текст внутри диапазона и очищает его, освобождая место для нового текста.
Обновление в реальном времени
Используя следующий код в моем index.html.erb, я ссылаюсь на вторую страницу с обновленной историей на случай, если кто-то еще что-то опубликовал в истории, пока другой пользователь сидел на той же странице.
Это код из last.html.erb
Это сделано для того, чтобы пользователю не приходилось постоянно обновлять страницу, чтобы проверить, что кто-то опубликовал что-то новое, с чем я столкнулся, когда проводил тестовое развертывание своего проекта через ngrok. Я хотел проверить пользовательский опыт и получить отзывы, а также некоторые забавные исходные данные от моих друзей.
Мой <section class="story-area" id="updated-text-area"> кажется важным местом для использования живого региона ARIA с правильным атрибутом aria-live. aria-live="polite" кажется мне наиболее подходящим, так как его лучше всего использовать для любого региона, который получает важные обновления, но не настолько срочные, чтобы их быстро читали, как регионы, помеченные как aria-live="assertive".
Первоначально опубликовано на https://yasmina95.hashnode.dev.
