{"id":29701,"date":"2025-03-27T13:05:28","date_gmt":"2025-03-27T12:05:28","guid":{"rendered":"https:\/\/www.angulararchitects.io\/blog\/accessible-angular-routes\/"},"modified":"2025-04-07T20:06:03","modified_gmt":"2025-04-07T18:06:03","slug":"accessible-angular-routes","status":"publish","type":"post","link":"https:\/\/www.angulararchitects.io\/en\/blog\/accessible-angular-routes\/","title":{"rendered":"Accessible Angular Routes"},"content":{"rendered":"
\n\t\t\t\n\t\n\t\n\t\t

\n\t\t\tThis is post 3 of 6 in the series “Accessibility in Angular”<\/em>\t\t<\/p>\n\t\t\t<\/label>\n\n\t\t\t

\n\t\t\t
    \n\t\t\t\t\t\t\t\t\t
  1. Web Accessibility (A11y) in Angular \u2013 Introduction<\/a><\/li>\n\t\t\t\t\t\t\t\t\t
  2. Accessibility Testing Tools for Angular<\/a><\/li>\n\t\t\t\t\t\t\t\t\t
  3. Accessible Angular Routes<\/span><\/li>\n\t\t\t\t\t\t\t\t\t
  4. ARIA roles and attributes in Angular<\/a><\/li>\n\t\t\t\t\t\t\t\t\t
  5. Building Accessible Forms with Angular<\/a><\/li>\n\t\t\t\t\t\t\t\t\t
  6. Why Angular ARIA in v21 is pretty neat<\/a><\/li>\n\t\t\t\t\t\t\t<\/ol>\n\t\t<\/div>\n\t<\/div>\n

    This article explains how to use Angular Router<\/em> features to achieve quick wins in improving Accessibility (A11y)<\/strong>. It is the third edition of our A11y blog series<\/strong>. If you want to enhance your Angular A11y<\/em> skills, please make sure to read the other articles in this series as well.<\/p>\n

    Page Titles<\/h2>\n

    Does your Angular App<\/em> look like this if you open it in multiple tabs?<\/p>\n

    \"Angular<\/p>\n

    If it does, you should definitely consider adding unique page titles for each route. The very easy-to-use Route.title<\/code> feature shipped with Angular v14<\/a> in 2022, yet many Angular Developers<\/em> are still not using it \ud83d\ude31. Please take a look and adopt it in your Angular Apps<\/em>.<\/p>\n

    Route.title<\/h3>\n

    Use this built-in Router<\/code> feature to automatically update the page <title><\/code> after each successful navigation, enhancing both accessibility and UX for all of us. To enable it in your primary <router-outlet \/><\/code>, you only need to set the title<\/code> property in your routes configuration array:<\/p>\n

    export const routes: Routes = [\n  {\n    path: 'demo',\n    title: 'Look how easy it is to use',\n    component: DemoComponent,\n  },\n];<\/code><\/pre>\n
    This will update the page title in the browser tab and make it accessible to screen readers.<\/p>\n
    \"Page<\/p>\n
    In larger Angular Apps<\/em>, setting page titles can become inconsistent due to the lack of a common prefix or suffix for routes.<\/p>\n
    Global Page Title Strategy<\/h3>\n
    To address this, you can extend Angular's<\/em> abstract TitleStrategy<\/code> class and implement your custom page title strategy<\/strong>:<\/p>\n
    \/\/ [imports]\n\n@Injectable()\nexport class PageTitleStrategy extends TitleStrategy {\n  private readonly title = inject(Title);\n\n  updateTitle(routerState: RouterStateSnapshot): void {\n    const pageTitle = this.buildTitle(routerState);\n    if (pageTitle) {\n      this.title.setTitle(pageTitle + ' \u2013 Demo');\n    } else {\n      this.title.setTitle('Link to Demo below!');\n    }\n  }\n}<\/code><\/pre>\n
    Then add the custom title strategy to your app.config.ts<\/code>:<\/p>\n
    \/\/ [imports]\nimport { PageTitleStrategy } from ".\/page-tite-strategy";\n\nexport const appConfig: ApplicationConfig = {\n  providers: [\n    provideClientHydration(withIncrementalHydration()),\n    provideExperimentalZonelessChangeDetection(),\n    provideRouter(routes),\n    { provide: TitleStrategy, useClass: PageTitleStrategy }, \/\/ add this line\n  ],\n};<\/code><\/pre>\n
    Dynamic Page Titles using Angular Router Params<\/h3>\n
    To create dynamic page titles using Angular Router<\/em> parameters, follow these steps:<\/p>\n
      \n
    1. First, we set up the withComponentInputBinding()<\/code> function to bind the route parameters to your component inputs:<\/li>\n<\/ol>\n
      \/\/ [imports]\n\nexport const appConfig: ApplicationConfig = {\n  providers: [\n    provideClientHydration(withIncrementalHydration()),\n    provideExperimentalZonelessChangeDetection(),\n    provideRouter(routes, withComponentInputBinding()), \/\/ add feature to router\n    { provide: TitleStrategy, useClass: PageTitleStrategy },\n  ],\n};<\/code><\/pre>\n
        \n
      1. Then, we add the parameter to the route definition:<\/li>\n<\/ol>\n
        export const routes: Routes = [\n  \/\/ [...]\n  {\n    path: 'demo\/:id',\n    title: 'Demo #id', \/\/ note that this will be ignored and replaced by the dynamic title\n    loadComponent: () => import('.\/demo\/demo.component'),\n  },\n];<\/code><\/pre>\n
          \n
        1. Now, we can simply add a input<\/code> signal to the component that will automatically receive the route param (thanks to the withComponentInputBinding()<\/code> feature):<\/li>\n<\/ol>\n
          \/\/ [imports & decorator]\nexport class DemoComponent {\n  readonly id = input<number | undefined>();\n\n  \/\/ [...]\n}\n\nexport default DemoComponent;<\/code><\/pre>\n
            \n
          1. Finally, we can use an effect<\/code> on our id<\/code> input signal to display the dynamic page title:<\/li>\n<\/ol>\n
            \/\/ [imports & decorator]\nexport class DemoComponent {\n  readonly id = input<number | undefined>();\n  private readonly title = inject(Title);\n\n  constructor() {\n    effect(() => this.title.setTitle(this.id() !== undefined ? Page #${this.id()} - Demo<\/code> : 'Page - Demo'));\n  }\n}\n\nexport default DemoComponent;<\/code><\/pre>\n
            Now, when you navigate to \/demo\/1<\/code>, the page title will be set to Page #1 - Demo<\/code>.<\/p>\n
            All Together Now<\/h3>\n
            To bring it all together \u2013 with the global page title strategy \u2013 we add another method to the PageTitleStrategy<\/code> class and provide it in root<\/code>:<\/p>\n
            \/\/ page-title-strategy.ts\nimport { RouterStateSnapshot, TitleStrategy } from '@angular\/router';\nimport { inject, Injectable } from '@angular\/core';\nimport { Title } from '@angular\/platform-browser';\n\n@Injectable({\n  providedIn: 'root',\n})\nexport class PageTitleStrategy extends TitleStrategy {\n  private readonly title = inject(Title);\n\n  updateTitle(routerState: RouterStateSnapshot): void {\n    this.setTitle(this.buildTitle(routerState));\n  }\n\n  setTitle(pageTitle?: string): void {\n    if (pageTitle) {\n      this.title.setTitle(${pageTitle} \u2013 Demo<\/code>);\n    } else {\n      this.title.setTitle('Page title like a pro');\n    }\n  }\n}<\/code><\/pre>\n
            And here is the final version of the dynamic page title effect<\/code> in the DemoComponent<\/code> using our injected PageTitleStrategy<\/code>:<\/p>\n
            \/\/ demo.component.ts\n\/\/ [imports & decorator]\nexport class DemoComponent {\n  private readonly pageTitleStrategy = inject(PageTitleStrategy);\n\n  readonly id = input<number | undefined>();\n\n  constructor() {\n    effect(() => this.pageTitleStrategy.setTitle(this.id() !== undefined ? Page #${this.id()}<\/code> : 'Page'));\n  }\n}\n\nexport default DemoComponent;<\/code><\/pre>\n
            Now you can set the page title depending on the route params and have a consistent suffix for all routes in your Angular App<\/em>.<\/p>\n
            \"Dynamic<\/p>\n
            Pretty nice, huh? Check out the full source code in the title-strategy<\/code> branch of my GitHub repo<\/a>.<\/p>\n
            RouterLinkActive<\/h2>\n
            The RouterLinkActive<\/code> directive is another powerful and lightweight tool for indicating the active state of navigation links in your Angular App<\/em>. It allows you to apply CSS styles to navigation links based on their active state, making it easier to create appealing and accessible menus.<\/p>\n
            <!-- nav.component.html -->\n<nav>\n  <a [routerLink]="demo" routerLinkActive="active">Demo<\/a>\n  <!-- ... -->\n<\/nav><\/code><\/pre>\n
            <!-- nav.component.scss -->\nnav a.active {\n  color: var(--nav-link--active__color);\n  text-decoration: none;\n}<\/code><\/pre>\n
            Fine-tuned control with routerLinkActiveOptions<\/code><\/h3>\n
            Since Angular v14<\/em>, you can use the routerLinkActiveOptions<\/code> directive to fine-tune the active state of your links. Where options<\/code> will have either the shape of IsActiveMatchOptions<\/strong><\/a>:<\/p>\n
            export declare interface IsActiveMatchOptions {\n  fragment: 'exact' | 'ignored';\n  matrixParams: 'exact' | 'subset' | 'ignored';\n  paths: 'exact' | 'subset';\n  queryParams: 'exact' | 'subset' | 'ignored';\n}<\/code><\/pre>\n
            Or, just a boolean named exact<\/code>:<\/p>\n
            {\n  exact: boolean\n}<\/code><\/pre>\n
            To apply exact matching, add the routerLinkActiveOptions<\/code> directive to your link:<\/p>\n
            <!-- nav.component.html -->\n<nav>\n  <a\n    routerLink="\/demo"\n  routerLinkActive="active"\n  [routerLinkActiveOptions]="{ exact: true }"\n  >\n  Demo\n  <\/a>\n  <!-- ... -->\n<\/nav><\/code><\/pre>\n
            Indicate current page ariaCurrentWhenActive<\/code><\/h3>\n
            A final quick win in A11y in Angular<\/em> is to highlight the current page link<\/strong> in the nav for screen readers via aria-current<\/a>: We need to add the aria-current="page"<\/code> attribute. This can easily be done using the ariaCurrentWhenActive<\/strong><\/a> input on the routerLinkActive<\/code> directive by setting its value to "page":<\/p>\n
            <!-- nav.component.html -->\n<nav>\n  <a\n    routerLink="\/demo"\n    routerLinkActive="active"\n    [routerLinkActiveOptions]="{ exact: true }"\n    ariaCurrentWhenActive="page"\n  >\n    Demo\n  <\/a>\n  <!-- ... -->\n<\/nav><\/code><\/pre>\n
            Accessibility Workshop<\/h2>\n
            For those looking to deepen their Angular<\/em> expertise, we offer a range of workshops \u2013 both in English and German:<\/p>\n