Атрибут aria-expanded — это свойство WAI-ARIA, используемое для указания того, управляет ли интерактивный элемент в данный момент развернутым или свернутым контейнером. Применяя этот атрибут к таким элементам, как кнопки или ссылки, которые вызывают меню, аккордеон или скрытую панель, вы информируете пользователей вспомогательных технологий о состоянии контента, с которым они взаимодействуют. Правильное использование гарантирует, что программа чтения с экрана объявит, открыт или закрыт раздел, что позволяет пользователям уверенно ориентироваться на вашем веб-сайте.
Какова цель aria-expanded в современном веб-дизайне?
Согласно спецификациям W3C WAI-ARIA, aria-expanded указывает, управляет ли интерактивный элемент развернутым или свернутым в данный момент контейнером. Когда пользователь нажимает кнопку, которая переключает скрытое меню навигации, программе чтения с экрана необходимо знать, видимым или скрытым является это меню в данный момент. Без этого атрибута браузер не предоставляет программного сигнала о состоянии переключения, из-за чего пользователям вспомогательных технологий приходится гадать, успешно ли их действие открыло нужный раздел. Это состояние должно динамически переключаться с помощью JavaScript всякий раз, когда пользователь взаимодействует с контроллером.
Как правильно реализовать aria-expanded
Реализация требует как статической разметки, так и динамических обновлений. Вы определяете начальное состояние компонента в своем HTML, обычно устанавливая его в значение ‘false’, если контент по умолчанию скрыт. Когда пользователь нажимает на триггер, ваш скрипт должен обновить значение атрибута до ‘true’, так как контент становится видимым. Это распространенный шаблон для компонентов аккордеона, переключателей мобильного меню и выпадающих фильтров на страницах товаров электронной коммерции. Всегда следите за тем, чтобы элемент триггера был доступен для фокуса и чтобы изменение состояния происходило немедленно.
Когда следует использовать aria-expanded по сравнению с другими атрибутами?
Выбор между aria-expanded и другими состояниями предполагает понимание того, чем управляет элемент. Используйте aria-expanded специально тогда, когда элемент является контроллером, который изменяет видимость контейнера. Не используйте его для элементов, которые не управляют видимостью отдельной области. Например, простая кнопка, открывающая новую страницу, не должна использовать этот атрибут. Вместо этого используйте его для паттернов пользовательского интерфейса, которые изменяют объектную модель документа в контексте одной страницы.
| Атрибут | Основной вариант использования | Целевой элемент |
|---|---|---|
| aria-expanded | Сворачиваемые разделы | Кнопки/Ссылки |
| aria-hidden | Скрытие контента | Контейнеры/Дивы |
| aria-haspopup | Триггеры меню | Кнопки/Дивы |
Как Alien Road применяет aria-expanded в наших рабочих процессах
В Alien Road мы интегрируем доступность в наш процесс проектирования и разработки с этапа первоначального каркаса (wireframe). Когда мы создаем пользовательский аккордеон или навигацию для клиента, мы документируем требования к изменению состояния в файлах спецификации нашего проекта. На этапе разработки наши инженеры пишут функции JavaScript, которые связывают событие клика элемента пользовательского интерфейса с обновлением значения aria-expanded этого же элемента. Мы проводим ручные проверки с помощью программ чтения с экрана, чтобы убедиться, что состояние объявляется правильно. Это гарантирует, что каждый интерактивный компонент соответствует базовым стандартам доступности до того, как сайт будет запущен для наших клиентов.
Распространенные ошибки при использовании aria-expanded
Частая ошибка — забыть обновить атрибут при взаимодействии пользователя с интерфейсом. Если на кнопке написано ‘expanded=true’, но контент визуально скрыт, пользовательский опыт становится запутанным. Другая ошибка — применение атрибута к статическим элементам, которые не вызывают никакого расширения. Убедитесь, что ваш скрипт обрабатывает краевые случаи, такие как закрытие открытого меню, когда пользователь кликает за пределами активной области. Это предотвращает рассинхронизацию состояния с визуальным представлением страницы.
- Всегда используйте правильные логические значения: ‘true’ или ‘false’.
- Убедитесь, что ваш JavaScript обновляет атрибут на элементе триггера, а не на контейнере.
- Убедитесь, что элемент управления изначально доступен для фокусировки, например тег button.
- Проверьте свою реализацию с помощью программы чтения с экрана, чтобы подтвердить объявление об изменении состояния.
Почему состояние контроллера важно?
Состояние контроллера предоставляет пользователю контекст относительно результата его взаимодействия. Если пользователь нажимает клавишу для открытия меню, атрибут aria-expanded информирует его о том, что действие было успешным и что теперь появился новый раздел контента для изучения. Без этого пользователь может предположить, что страница не отвечает или сломана. Поддерживая точность атрибута, вы создаете надежный опыт, который позволяет всем посетителям перемещаться по вашему контенту без необходимости визуального подтверждения перехода.
Какие паттерны пользовательского интерфейса требуют aria-expanded?
Несколько паттернов пользовательского интерфейса полагаются на этот атрибут для поддержания доступности. Аккордеоны являются наиболее распространенным примером, где несколько заголовков управляют видимостью своего соответствующего основного контента. Выпадающие меню на панели навигации также часто используют это для указания наличия подменю. Кроме того, панели фильтров на сайтах электронной коммерции часто используют это для управления видимостью критериев поиска. В типичном аккаунте, которым мы управляем, мы видим эти паттерны на страницах списка товаров, где пользователям необходимо уточнить свои поисковые запросы.
- Аккордеоны: Переключение видимости блоков контента.
- Меню навигации: Указывают, видны ли подменю.
- Фильтры: Управление отображением критериев поиска на боковой панели.
- Модальные окна: Управление состоянием расширения триггера.
С чего начать на этой неделе
Начните с аудита наиболее часто используемых интерактивных элементов на вашем веб-сайте. Определите все кнопки или ссылки, которые переключают видимость другого контента. Проверьте, правильно ли этим элементам назначен атрибут aria-expanded и обновляется ли он динамически. Если вы найдете элементы, у которых отсутствуют эти атрибуты, обновите свои скрипты для управления ими соответствующим образом. Для более крупных сайтов сосредоточьтесь сначала на основной навигации и любых фильтрах или виджетах аккордеона, так как они оказывают наибольшее влияние на навигацию пользователей и общую доступность сайта.
Часто задаваемые вопросы
Следует ли мне использовать aria-expanded для ссылки?
Да, вы можете использовать aria-expanded для ссылки, но обычно предпочтительнее использовать элемент кнопки, если действие представляет собой чистое переключение состояния пользовательского интерфейса. Ссылки обычно предназначены для навигации на новый URL-адрес. Если вы должны использовать ссылку для действия переключения, убедитесь, что она полностью доступна и что атрибут aria-expanded правильно отражает текущее состояние связанного контейнера.
Управляет ли aria-expanded скрытием контента автоматически?
Нет, aria-expanded не управляет фактической видимостью элемента. Он лишь сообщает состояние вспомогательной технологии. Вам все равно нужно использовать CSS, такой как display: none или visibility: hidden, чтобы физически скрыть контент с экрана. Атрибут просто действует как метка для описания текущего состояния этого контейнера пользователям, которые полагаются на программы чтения с экрана.
какое значение следует использовать, если расширенного состояния нет?
Если элемент не управляет сворачиваемой областью, вам вообще не следует использовать атрибут aria-expanded. Применяйте его только к элементам, которые служат триггерами для контента, который можно переключать между видимым и скрытым состояниями. Включение атрибута в несворачиваемые элементы может вызвать путаницу у пользователей программ чтения с экрана, предполагая наличие функциональности, которой на самом деле не существует.
Как протестировать реализацию aria-expanded?
Чтобы протестировать реализацию, используйте программу чтения с экрана, такую как NVDA или VoiceOver. Перейдите к элементу триггера и понаблюдайте, как программа чтения с экрана объявляет состояние. Когда вы активируете триггер, программа чтения с экрана должна обновить свой статус, чтобы указать, что раздел теперь развернут. Если объявление не меняется, ваш JavaScript, вероятно, не справляется с правильным обновлением значения атрибута во время взаимодействия.
Читать далее: Веб-дизайн и разработка · Веб-дизайн