Практические советы по доступности, которые можно применить сегодня
соответствие. Речь идёт о создании продуктов, которыми могут пользоваться все, независимо от их способностей, технической грамотности, операционной системы или устройства.
В этой статье я поделюсь практическими советами о том, как правильно разметить три распространённых шаблона пользовательского интерфейса. Независимо от того, являетесь ли вы новичком в области доступности или просто нуждаетесь в освежении, эти советы помогут создавать более инклюзивные интерфейсы. Также привожу ссылки на примеры реализации и внешние ресурсы, чтобы можно было воочию убедиться, как эти изменения влияют на удобство использования. Вы увидите, как несколько продуманных корректировок могут изменить всё к лучшему.
Выпадающие меню
Выпадающие меню — один из наиболее часто используемых элементов пользовательского интерфейса в Интернете. От навигационных панелей до систем фильтрации, они облегчают представление нескольких вариантов в чистом и компактном виде. Но хотя выпадающие меню могут выглядеть просто, они часто построены таким образом, что многие пользователи не могут эффективно с ними взаимодействовать.
Проблема
Проблема многих выпадающих элементов заключается в том, что они построены с использованием общих элементов, таких как <div> или <span>, а взаимодействие обычно осуществляется с помощью JavaScript. Это может подойти пользователю с мышью, но тот, кто использует клавиатуру, программу чтения с экрана или другие вспомогательные технологии, будет испытывать трудности. Если выпадающие элементы не размечены должным образом, пользователи могут даже не знать о существовании опций или не смогут в них ориентироваться.
Исправление
Чтобы сделать выпадающие меню более доступными, в первую очередь необходимо использовать семантический HTML. Это означает использование элементов, сообщающих браузеру и вспомогательным технологиям о своём назначении. В данном случае использование <button> для триггера выпадающего меню и <ul> для списка вариантов обеспечивает структуру, необходимую вспомогательным технологиям для правильной интерпретации меню.
Далее необходимо добавить атрибуты ARIA (Accessible Rich Internet Applications), такие, как aria-expanded и aria-controls. Эти атрибуты предоставляют программам чтения с экрана дополнительный контекст, например, открыто или закрыто меню и какой элемент управляет выпадающим меню.
<button aria-haspopup="true" aria-expanded="false" aria-controls="menu1">Options</button>
<ul id="menu1" role="menu" aria-hidden="true">
<li role="menuitem">Option 1</li>
<li role="menuitem">Option 2</li>
</ul>Давайте в этом разберёмся:
- Элемент
<button>сaria-haspopup="true"сообщает вспомогательным технологиям, что эта кнопка открывает выпадающий список. aria-expanded="false"сообщает пользователю, что меню в данный момент закрыто. Это значение будет динамически изменяться наtrue, когда меню будет открыто.- Тег
<ul>с егоrole="menu"гарантирует, что список будет распознан как меню программой чтения с экрана. - Каждый элемент
<li>имеетrole="menuitem", что позволяет программам чтения с экрана воспринимать эти элементы списка как пункты меню. aria-hidden="true"сохраняет меню скрытым до тех пор, пока пользователь не активирует его, после чего оно должно быть удалено.
Эти небольшие изменения означают, что пользователи могут не только взаимодействовать с вашим выпадающим меню с помощью клавиатуры, но и получать обратную связь о состоянии выпадающего меню через свои программы чтения с экрана.
Модальные окна
Модальные окна чрезвычайно полезны для отображения важной информации или сбора данных, вводимых пользователем, без необходимости перемещения по странице. Однако без правильного управления фокусом они могут быть невероятно раздражающими для пользователей, использующих программы чтения с экрана или клавиатуру.
Проблема
Распространённой ошибкой при работе с модальными окнами является неправильное управление фокусом. При открытии модального окна пользователь должен быть сфокусирован на взаимодействии с ним, но во многих случаях фокус не удерживается должным образом внутри модального окна. Это позволяет пользователям переходить по вкладкам к остальному содержимому страницы, что может дезориентировать. Хуже того, пользователи могут даже не осознавать, что находятся в модальном окне, что затрудняет понимание того, как его закрыть.
Исправление
Ключевым моментом в повышении доступности модальных окон является удержание фокуса в самом модальном окне. Это означает, что при открытии модального окна клавиатурная навигация должна осуществляться только по элементам внутри модального окна, пока оно не будет закрыто. Это предотвращает случайный переход пользователей к содержимому, находящемуся за модальным экраном, и позволяет им не отвлекаться на выполнение поставленной задачи.
Вы можете соответствующим образом управлять перехватом фокуса с помощью JavaScript, который определяет, когда модальное окно открывается, и обеспечивает сохранение фокуса внутри него. Кроме того, добавление таких атрибутов ARIA, как role="dialog" и aria-modal="true", обеспечивает программы чтения с экрана необходимым контекстом о роли и поведении модального окна. Вот пошаговое руководство, как это сделать.
<div role="dialog" aria-modal="true" aria-labelledby="modal-title">
<h1 id="modal-title">Sign Up</h1>
<button>Close</button>
<!-- Содержимое модального окна -->
</div>Давайте в этом разберёмся:
role="dialog"информирует вспомогательные технологии, что это диалоговое окно.aria-modal="true"гарантирует, что программы чтения с экрана понимают, что пользователи не должны взаимодействовать с содержимым вне модального окна, пока оно не будет закрыто.aria-labelledby="modal-title"помогает пользователям понять цель диалога, связывая её с заголовком модального окна.
Кроме того, для управления фокусом следует использовать JavaScript. При открытии модального окна фокус должен автоматически передаваться первому интерактивному элементу, например полю формы или кнопке закрытия. Когда пользователь нажимает клавишу Tab, фокус должен перемещаться по интерактивным элементам внутри модального окна, не покидая его. Наконец, нажатие клавиши Esc должно закрывать модальное окно.
Основные принципы JavaScript для управления фокусом должны гарантировать, что при открытии модального окна первый интерактивный элемент внутри него (например, кнопка или поле ввода) получает фокус, направляя пользователей клавиатуры непосредственно к содержимому. Когда пользователь перемещается по модальному окну с помощью клавиши Tab, фокус задерживается внутри модального окна, перемещаясь между первым и последним фокусируемыми элементами. Если пользователь попытается выйти из модального окна, скрипт должен предотвратить это, перенаправив фокус в противоположный конец, в зависимости от направления табуляции. Когда модальное окно закрывается, необходимо вернуть фокус на кнопку, которая его открыла, обеспечивая плавность и логичность работы пользователя.
Вкладки
Вкладки — отличный способ организовать контент, не перегружая пользователей, но только если они правильно структурированы. Если навигация по вкладкам построена неправильно, пользователям, использующим клавиатуру или программы чтения с экрана, бывает сложно понять, какая вкладка выбрана и как перемещаться между различными секциями.
Проблема
Во многих интерфейсах с вкладками для кнопок вкладок используются базовые теги <div> или <span>, которые не содержат контекста для вспомогательных технологий. Без ARIA-ролей программы чтения с экрана не могут сообщить пользователям, что вкладка является частью большого набора вкладок или какой контент соответствует выбранной вкладке. Кроме того, пользователи, использующие клавиатуру, могут столкнуться с невозможностью навигации между вкладками без функциональности клавиш со стрелками.
Исправление
Чтобы исправить это, используйте комбинацию ролей и свойств ARIA. В частности, role="tablist" определяет контейнер для всех вкладок, role="tab" идентифицирует каждую вкладку, а role="tabpanel" определяет содержимое для каждой вкладки. Кроме того, реализуйте клавиатурную навигацию, чтобы пользователи могли переключать вкладки с помощью клавиш со стрелками, что сделает работу с ними беспрепятственной.
<div role="tablist" aria-label="Sample Tabs">
<button role="tab" aria-selected="true" aria-controls="panel1" id="tab1">Tab 1</button>
<button role="tab" aria-selected="false" aria-controls="panel2" id="tab2">Tab 2</button>
</div>
<div id="panel1" role="tabpanel" aria-labelledby="tab1">
<p>Content for Tab 1.</p>
</div>
<div id="panel2" role="tabpanel" aria-labelledby="tab2">
<p>Content for Tab 2.</p>
</div>Давайте в этом разберёмся:
role="tablist"сообщает программе чтения с экрана, что контейнер содержит набор вкладок.- Каждая кнопка
role="tab"является частью списка вкладок и связана с содержимым соответствующей вкладки с помощьюaria-controls. aria-selected="true"обозначает, какая вкладка активна в данный момент. Только для одной вкладки этот атрибут должен иметь значениеtrueодновременно.role="tabpanel"гарантирует, что программы чтения с экрана смогут перемещаться по содержимому вкладки.aria-labelledbyсвязывает панель вкладок с соответствующей вкладкой для наглядного контекста.
Чтобы обеспечить доступность клавиатуры, пользователи должны иметь возможность переключаться между вкладками с помощью клавиш со стрелками, что имитирует поведение, которое они ожидают от других интерфейсов. Кроме того, при выборе новой вкладки фокус должен перемещаться на содержимое активной вкладки.
Чтобы узнать больше о том, как создавать доступные интерфейсы с вкладками, ознакомьтесь с замечательным ресурсом от Inclusive Components.
Подведение итогов
Создание доступных моделей пользовательского интерфейса не обязательно должно быть сложным, но оно требует внимания к деталям и стремления к эмпатии. Как вы уже убедились, несколько небольших изменений — например, использование семантического HTML, добавление ролей ARIA и правильное управление фокусом — могут сделать интерфейсы более инклюзивными. Если мы хотим создать веб, который будет работать для всех, необходимо уделять приоритетное внимание доступности в каждом своём решении.
Также рекомендую ознакомиться с руководством ARIA Authoring Practices Guide Patterns, в котором приведена масса примеров для целого ряда типов компонентов, помимо тех, что мы обсуждали, и, если вы собираетесь/необходимо использовать ARIA, как правильно их реализовать.