如何解决在 Angular 中导航时聚焦和阅读主页标题标签
目标:当从一个页面导航到另一个页面时,NVDA 屏幕阅读器应该读取标题标签或主要地标
观察到的行为:导航时屏幕阅读器不会读取标题标签。 但是每当发生重新加载/刷新时,屏幕阅读器都会读取标题标签
<h1 tabindex="-1">
Some heading
</h1>
constructor(private router: Router) {
this.readMainLandMark();
}
readMainLandMark() {
// console.log(document.getElementsByTagName('h1')[0]); // Results undefined because of HTMLCollection is []
this.router.events.pipe(filter(e => e instanceof NavigationEnd)).subscribe(() => {
const mainHeaders = document.getElementsByTagName('h1');
if(mainHeaders.length !== 0) {
mainHeaders[0].focus();
}
});
}
Here NavigationEnd
识别前一个实例页面标题上下文。因此,在再次加载/刷新后,屏幕阅读器读取当前页面标题,将上一页视为当前页面,这就是为什么在重新加载相同页面标题后会读取标签的原因。但不是在导航时...
解决方法
<h1 id="main-content-header" tabindex="-1">
Some Heading Name
</h1>
readMainLandMark() {
this._router.events.pipe(filter(e => e instanceof NavigationEnd)).subscribe(() => {
const mainHeader = <HTMLElement>document.querySelector('#main-content-header');
if (mainHeader) {
(mainHeader as HTMLElement)?.focus();
}
});
}
版权声明:本文内容由互联网用户自发贡献,该文观点与技术仅代表作者本人。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如发现本站有涉嫌侵权/违法违规的内容, 请发送邮件至 dio@foxmail.com 举报,一经查实,本站将立刻删除。