Нужно объявить ярлык арии при выполнении функции

Question

<div class="accordion-header" (click)="toggleExpandCollapse()" tabindex="0" (keyup.enter)="toggleExpandCollapse()">

   <span class="accordion-title" role="button" [attr.aria-label]="toggled ? menuItemHeader.label + 'expanded' : menuItemHeader.label + 'collapsed'">`{{ menuItemHeader.label }}</span>`

У меня сейчас есть этот аккордеонный элемент, который можно свернуть или развернуть.Когда он свернут, программа чтения с экрана объявит его свернутым и таким же, если он развернут.Все, что мне сейчас нужно для пользователей специальных возможностей, - когда они нажимают клавишу ввода, чтобы развернуть аккордеон, программа чтения с экрана должна объявить «развернуто».Поэтому мне нужно, чтобы (keyup.enter) = "toggleExpandCollapse ()", чтобы объявить aria-label = "extended".Как я могу это сделать?

Answer 1

aria-* атрибуты подразделяются на две группы: состояния и свойства.

A состояние - это то, что может измениться, обычно из-за взаимодействия с пользователем, например aria-checked.

A свойство - это то, что определяет «природу» объекта, и его значение редко изменяется, например aria-required.

Когда свойство изменяется, пользователь не уведомляется о том, что что-то изменилось.

При изменении состояния программа чтения с экрана сообщит об этом изменении.

aria-label является свойством .Его значение будет , а не , когда будет внесено изменение.

aria-expanded - это состояние .Его значение будет объявлено при внесении изменения.

Я бы порекомендовал вам не изменять aria-label вашего объекта, а вместо этого установить aria-expanded и переключать его значение между true иложь.

Answer 2

Программа чтения с экрана будет читать «Развернуто» или «Свернуто» автоматически в зависимости от статуса атрибута aria-extended .Это атрибут, который вы хотите переключить.