ozenero | Mobile & Web Programming Tutorials

Accessibility in Angular example

Here’s an example of how to implement accessibility in an Angular application:

1. Use appropriate ARIA roles and attributes: Use ARIA roles and attributes to provide additional information to assistive technologies. For example, use the role=”button” attribute on a button element, and the aria-label attribute to provide a text description of the button’s purpose

2. Provide alternative text for images: Use the alt attribute to provide alternative text for images. This text is read by assistive technologies to describe the image to users who are visually impaired.

3. Use semantic elements: Use semantic elements such as

and

to provide clear structure and hierarchy to the page.

<header>
  <h1>Page Title</h1>
</header>
<nav>
  <ul>
    <li><a href="#">Home</a></li>
    <li><a href="#">About</a></li>
    <li><a href="#">Contact</a></li>
  </ul>
</nav>
<main>
  <p>Main content goes here</p>
</main>
<footer>
  <p>Copyright ©2022</p>
</footer

Angular Accessibility attributes example

Here are a few examples of accessibility attributes that can be used in an Angular application:

1. aria-label: This attribute provides a text description of an element’s purpose for assistive technologies. It can be used on any element to provide additional context.

2. aria-labelledby: This attribute references an element that provides a text description of another element. It can be used to associate a label with a form input, for example.

Username:

3. role: This attribute defines the role of an element within the page, such as a button, checkbox, or heading. It can be used to provide additional information to assistive technologies.

<nav role="navigation">
  <ul>
    <li><a href="#">Home</a></li>
    <li><a href="#">About</a></li>
    <li><a href="#">Contact</a></li>
  </ul>
</nav>

4. tabindex: This attribute controls the tab order of an element within the page. Elements with a positive tabindex value are included in the tab order and can be navigated to using the keyboard.

5. aria-describedby: This attribute references an element that provides additional information or instructions for an element. It can be used to associate a helper text with a form input, for example.

<label for="

Accessibility in Angular UI components

Accessibility is an important consideration when building UI components in Angular. Here are a few best practices for ensuring that your UI components are accessible:

3. Use semantic elements: Use semantic elements such as

and

to provide clear structure and hierarchy to the page.

4. Ensure proper keyboard navigation: Ensure that your UI components can be accessed and navigated using the keyboard. Use the tabindex attribute to control the tab order of elements, and provide appropriate aria-* attributes to indicate the current focus state.

5. Provide clear and accurate labels: Provide clear and accurate labels for all interactive elements, such as buttons, checkboxes, and form inputs. Use the aria-labelledby and aria-describedby attributes to associate labels and help text with interactive elements.

6. Provide feedback for user actions: Provide appropriate visual and auditory feedback for user actions, such as button presses or form submissions.

7. Test your components with assistive technologies: Test your UI components with assistive technologies such as screen readers to ensure that they work as expected for users with disabilities.

It’s worth noting that Angular has some built-in features that can help you to implement accessibility in your application, such as the @angular/cdk library which provide some accessibility directives and services, it also has an ng-a11y linter that checks your code for accessibility issues.

Angular Accessibility with Augmenting native elements example

Here’s an example of how to augment a native ` }) export class AccessibleButtonComponent { @Input() label: string; @Input() ariaLabel: string; constructor(private el: ElementRef, private renderer: Renderer2) { renderer.setAttribute(el.nativeElement, 'role', 'button'); } }

This component is a simple button that has label and ariaLabel as input property. The label input is used to display the text on the button, and ariaLabel is used to provide a text description of the button’s purpose for assistive technologies.
In the constructor, we are using Renderer2 to set the role of the native button element to button, to make it accessible for assistive technology.

You can use this component in your HTML template as follows:

<app-accessible-button label="Submit" ariaLabel="Submit Form"></app-accessible-button>

It’s also worth noting that, this is a simple example, but in real-world scenarios, you may need to add more accessibility features such as keyboard navigation, providing feedback for user actions and testing with assistive technologies.

It’s also worth mentioning that, Angular provides some built-in directives that can help you to implement accessibility in your application, such as [attr.aria-label] which is used in this example, [attr.aria-labelledby], [attr.aria-describedby] and [attr.tabindex] among others.

Angular Accessibility Using containers for native elements

In Angular, it’s also possible to use containers to wrap native elements in order to add additional functionality and accessibility features. Here’s an example of how to create an accessible container for a native element:

import { Component, ElementRef, Input, Renderer2 } from '@angular/core';

@Component({
  selector: 'app-accessible-input',
  template: `
    
      {{label}}
      
    
  `,
  styles: [`
    .input-container {
      display: flex;
      flex-direction: column;
    }
  `]
})
export class AccessibleInputComponent {
  @Input() label: string;
  @Input() ariaLabel: string;
  @Input() type: string;
  @Input() value: string;
  id = `input-${Math.random().toString(36).substring(2, 15)}`;

  constructor(private el: ElementRef, private renderer: Renderer2) {
    renderer.setAttribute(el.nativeElement, 'role', 'group');
  }

  onInput(value: string) {
    console.log(value);
  }
}

This component is a simple accessible container that wraps a native element. The label input is used to display the text of the label, and ariaLabel is used to provide a text description of the container’s purpose for assistive technologies. The id is generated randomly to be unique for each input.
In the constructor, we are using Renderer2 to set the role of the native container element to group, to make it accessible for assistive technology.

You can use this component in your HTML template as follows:

This is a simple example, but in real-world scenarios, you may need to add more accessibility features such as keyboard navigation, providing feedback for user actions and testing with assistive technologies.
It’s also worth noting that, this example uses a div element as container and CSS to style it, you can use other elements such as fieldset to create the container.

Angular Accessibility with routing: Focus management after navigation example code

In Angular, it’s important to manage focus after navigation to ensure that users can easily access and interact with the newly-loaded content. Here’s an example of how to manage focus after navigation using the Angular Router:

import { Component, ElementRef, Input, Renderer2, AfterViewInit } from '@angular/core';
import { Router, NavigationEnd } from '@angular/router';
import { filter } from 'rxjs/operators';

@Component({
  selector: 'app-root',
  template: ``
})
export class AppComponent implements AfterViewInit {
  private initialUrl: string;

  constructor(private router: Router, private el: ElementRef, private renderer: Renderer2) {
    this.initialUrl = this.router.url;
  }

  ngAfterViewInit() {
    this.router.events
      .pipe(filter(event => event instanceof NavigationEnd))
      .subscribe(() => {
        this.setInitialFocus();
      });
  }

  private setInitialFocus() {
    if (this.router.url === this.initialUrl) {
      this.renderer.selectRootElement("app-root").focus();
    }
  }
}

In this example, we are using the Router and Renderer2 services to manage focus after navigation. The ngAfterViewInit lifecycle hook is used to subscribe to router events, and the setInitialFocus method is called after each navigation event.
The setInitialFocus method checks if the current route is the initial route, if so, it sets the focus on the root element using the renderer.selectRootElement(“app-root”).focus() method.

Angular Accessibility with routing: Active links identification

In Angular, it’s important to identify the currently active links to help users understand the current location and make it easier for them to navigate. Here’s an example of how to identify active links using the Angular Router:

import { Component } from '@angular/core';
import { Router } from '@angular/router';

@Component({
  selector: 'app-navbar',
  template: `
    
      Home
      About
      Contact
    
    
  `,
  styles: [`
    .active {
      color: blue;
    }
  `]
})
export class NavbarComponent {
  constructor(private router: Router) { }
}

In this example, we are using the routerLink and routerLinkActive directives to identify active links. The routerLink directive is used to set the link’s destination and the routerLinkActive directive is used to add the “active” class to the link when it is active.
Also, the routerLinkActiveOptions directive is used to set options for the routerLinkActive directive, in this case, the exact: true option is used to match only when the path is completely the same as the path in the routerLink.

It’s also worth noting that, this example uses CSS to style the active links, but in real-world scenarios, you may need to handle it differently, for example, you could use ngClass directive to apply different