如何修复颚式屏幕阅读器可访问性问题

如何解决如何修复颚式屏幕阅读器可访问性问题

在我的网页中，我设置了屏幕阅读器自动阅读一些内容。当屏幕阅读器读取最后一个内容（百分比）然后按下箭头键后，然后将焦点放在下一个元素（页脚）但屏幕阅读器移动到第一个元素（页眉）。 我需要关注下一个元素而不是第一个元素。为此，我使用 angular 11。

<app-header></app-header>
<div>
    <span role="alert">
      <span> Preparing environment...</span>
    </span>
</div>
<div>
<span  [attr.aria-label]="Your environment ready in {{minutes}} minutes {{second}} seconds">
    <span aria-hidden="true">
      <span>Your environment ready in </span>
      <countdown *ngIf="!min" [config]="minutes" (event)="handleCountDown($event)"></countdown>
      <span> {{ minutes }}</span>
    </span>
  </span>
  <div class="progress" >
    <div class="indeterminate"></div>
  </div>
  <div class="progress">
    <div class="progress-bar">
      {{ percentage }} %
    </div>
  </div>
</div>
<app-footer></app-footer>

header code

<div role="banner" class="navbar navbar-expand-lg py-0 headerBg" role="banner">
    <img class="logo" aria-label="company logo" src="./logo.jpg" />
</div>


footer code
<footer id="footer" role="contentinfo" aria-label="footer" class="footerBottom">
  <div class="row">
      <p class="mb-0">
       <span> footer...</span> 
      </p>
  </div>
</footer>