Есть еще много вещей, которые нужно учитывать, что ваш пример не охватывает, так что это не полный ответ, он просто указывает вам на соответствующую WAI-ARIA в зависимости от того, по какому маршруту вы идете.
Кнопка
Первое, что нужно рассмотреть, это кнопка. Вы должны сообщить пользователям программы чтения с экрана, в каком состоянии оно находится в данный момент. Для этого мы используем aria-expanded, чтобы указать, открыт ли элемент, которым он управляет, в данный момент: открыт или закрыт. (aria-expanded="true" для открытого, aria-expanded="false" для закрытого.)
В то же время мы хотим указать, каким элементом управляет эта кнопка (например, список уведомлений не «принадлежит» элементу - например, если бы это был <li> с вложенным <ul> в меню, тогда список был бы "принадлежит" ему).
Для этого мы будем использовать aria-controls или aria-owns и указывать на идентификатор элемента, которым он управляет. О разнице между ними см. этот пост переполнения стека в качестве хорошего объяснения, в этом примере я бы сказал, что это aria-controls, но опять же зависит от вашей реализации и позиционирования в DOM.
Что касается самой кнопки и того, где она находится в вашем меню, она все еще считается навигацией, поэтому она должна находиться внутри вашего элемента <nav>. Однако, если это находится за пределами вашей навигации, скажем, в разделах «Помощь» и «Учетная запись», вы можете считать эти элементы частью панели инструментов . (еще раз, я бы сказал, что это не применимо здесь, но на что-то посмотреть)
Также это не применимо здесь, но если вы включите какие-либо ссылки и т. д. c. в 'popup' / modal, который показывает список уведомлений (т. е. ссылку «просмотреть все уведомления»), вы должны рассмотреть aria-haspopup="true"
Список уведомлений
Прямо так, у нас есть кнопка, указывающая на контейнер (не забудьте дать контейнеру соответствующий идентификатор для aria-owns или aria-controls). Далее, как насчет самого контейнера?
Что ж, в этом примере кажется, что с контейнером следует обращаться как с модальным.
Так что по этой причине вы должны рассмотреть: -
- захват фокуса в модальном режиме,
- закрытие с Escape,
- возврат фокуса на кнопку, активировавшую его при закрытии,
- кнопка закрытия, доступная с клавиатуры,
- заголовок для модального окна (даже если он визуально скрыт )
Я бы порекомендовал добавить несколько Из описанных выше специальных возможностей, попробуйте его с помощью программы чтения с экрана и клавиатуры, и посмотрите, легко ли это использовать. После того, как вы определились со своим шаблоном, задайте еще несколько вопросов по конкретным c случаям использования, поскольку вышеприведенное является общим руководством.
Несколько вещей, которые следует учитывать на основе вашей разметки
Дополнительные вещи для Исходя из вашего примера: -
- используйте
aria-hidden="true" на своих значках, они ничего не добавляют для программ чтения с экрана (при условии, что ваш notification.title носит описательный характер). - Для в заголовке уведомления рекомендуется сделать его соответствующим заголовком (
<h2> - <h6> в зависимости от положения в документе. - Не забудьте добавить визуально скрытый текст, описывающий уровень предупреждения (я вижу, у вас есть какая-то форма окраски) /различие в
[ngClass]="{ 'notifications__warn': notification?.type }" - показать ту же информацию для программ чтения с экрана.) - В настоящее время у вас есть
<li> в пределах <div> - возможно, измените внешний <div> на <ul>, так что это семантически правильный (<div class="notifications__item"> в <ul class="notifications__item">)
Я надеюсь, что вышеизложенное полезно, чтобы вы выбрали правильный путь, много читали, но после прочтения связанных статей вы сможете чтобы лучше принять решение о том, какой шаблон вы используете (поскольку я даже не упомянул, что это подпункт в вашем меню), а затем можете задать еще несколько вопросов по конкретным c деталям, которые вы еще не понимаете.
Заключительные мысли / советы
тест с помощью программы чтения с экрана - это самый большой совет, который я могу дать при разработке того, как WAI-ARIA работает и взаимодействует с вещами.
Также, если вы когда-либо сомневаетесь в применимости атрибута WAI-ARIA, лучше , а не включать его.
Неправильное использование или WAI-ARIA на самом деле хуже, чем вообще его не включать, поэтому убедитесь, что вы понимаете, когда использовать атрибут достаточно разумно, прежде чем применять его. Если я когда-либо не уверен (как это все еще случается со мной!), Я склонен посмотреть на 2 или 3 примера его использования и посмотреть, соответствует ли мой шаблон тем, на которые я смотрел.