Angular单页应用无障碍访问优化：导航后焦点定位逻辑的按需调整需求

嘿，我太懂你这种“鱼与熊掌都想兼得”的需求了！你现在的问题核心就是：既想在站内路由跳转（比如点击页面里的导航链接、按钮切换视图）后自动把焦点定位到主内容顶部，又不想在首次通过外部链接/直接输入URL进入网站时触发这个焦点跳转，对吧？

我之前做Angular无障碍优化时也遇到过几乎一模一样的场景，给你分享两个简单好用的解决思路：

思路一：用标志变量区分首次加载与后续导航 #

这是最直接的方案，通过一个布尔变量记录是否是网站的首次加载状态，按需执行焦点定位逻辑：

1. 在你的组件（建议放在根组件，比如AppComponent里，这样全局生效）里定义一个初始为true的标志变量
2. 在路由导航结束的订阅逻辑里，先判断这个标志：
   • 如果是首次加载，就把标志置为false，跳过焦点定位
   • 如果不是首次加载，就执行你原来的焦点定位逻辑

代码实现如下：

import { Router, NavigationEnd } from '@angular/router';
import { filter } from 'rxjs/operators';

// 组件类内部
private isFirstLoad = true;

constructor(private router: Router) {
  this.router.events.pipe(
    filter((e) => e instanceof NavigationEnd)
  ).subscribe(() => {
    // 首次加载时跳过焦点定位，同时更新标志
    if (this.isFirstLoad) {
      this.isFirstLoad = false;
      return;
    }
    
    // 后续站内导航时执行焦点定位
    const topOfContent = document.querySelector('#topofcontent') as HTMLElement;
    if (topOfContent) {
      topOfContent.focus();
    }
  });
}

这个方案的优势就是简单直接，完全贴合你的需求：

• 首次通过外部链接/直接输URL进入时，不会触发焦点跳转，用户可以从页面顶部正常开始浏览
• 之后所有的站内路由跳转（比如点击导航栏链接、按钮触发的router.navigate），都会自动把焦点定位到主内容顶部，符合无障碍访问的要求

额外的无障碍优化小提示 #

别忘了确保你的#topofcontent元素是可被聚焦的！默认情况下，像div这类非交互元素是不能被focus()方法选中的，你需要给它加上tabindex="-1"属性，同时可以加个aria-label让屏幕阅读器用户清楚知道焦点位置：

<div id="topofcontent" tabindex="-1" aria-label="主内容区域起点"></div>

这样不仅你的焦点定位逻辑能正常工作，屏幕阅读器也会向用户播报当前进入了主内容区域，进一步提升无障碍体验。

关于跳过链接的兼容性 #

你不用担心这个改动会影响原来的跳过链接功能，跳过链接是通过用户主动点击触发的焦点定位，和路由导航的自动定位逻辑是完全独立的，两者可以完美共存。

备注：内容来源于stack exchange，提问作者Green Grasso Holm