JAWS + IE11 + ария жить не работает, когда

Мы добавляем поддержку ARIA на наш сайт SPA.

В приложении у нас есть одна область активности, где мы показываем динамические сообщения с сервера на основе проверок.

Мы добавили role='alert' и aria-live='assertive' для чтения этих сообщений об активности.

В FF и Chrome он работает нормально, однако в IE его код чтения, например, "левая скобка левая скобка txtErrorMessage правая скобка правая скобка", даже если сообщение на экране

<div role="alert" aria-live="assertive">
    <p class="scan-complete-text-auto">
        {{model.txtErrorMessage}}
    </p>
</div>

здесь txtErrorMessage получит заполненное время выполнения из результатов API.

мы используем угловой JS.

Как решить эту проблему?

Источник

2 ответа

Решение

Попробуйте использовать ng-show или ng-hide, чтобы скрыть div, пока сообщение не будет готово. Длина сообщения может быть проверена, чтобы показать или скрыть сам div. Это решит проблему.

Также не нужно использовать role="alert" и aria-live="assertive". Вы можете удалить role="alert". JAWS + IE склонны читать более одного раза для этой комбинации.

Источник

Попробуйте использовать ng-bind="model.txtErrorMessage" вместо {{model.txtErrorMessage}}

Источник

Angular предоставляет встроенные API CDK для обработки этого сценария. https://material.angular.io/cdk/a11y/overview

@Component({...}) 
export class MyComponent {
constructor(liveAnnouncer: LiveAnnouncer) {
  liveAnnouncer.announce("Hey Google");
 }
}

Или вы можете сохранить простой диапазон или div и программно обновить свое сообщение.

<span
    aria-live="polite"
    class="ada-visuallyhidden"
    [innerHTML]="yourCustomADAMessage"
  ></span>
Источник
Другие вопросы по тегам