Accessibility in Angular 17

Creating an accessible Angular application is crucial for ensuring that your app can be used by everyone, including people with disabilities. This tutorial will guide you through advanced accessibility practices in Angular 17, covering various aspects such as semantic HTML, ARIA roles, keyboard navigation, and more. By the end of this tutorial, you’ll have a comprehensive understanding of how to build an accessible Angular application.

Setting Up Your Angular Project

First, let’s create a new Angular project:

ng new accessibility-demo
cd accessibility-demo
ng serve

Creating a Component with Accessible Features

Let’s generate a component to demonstrate various accessibility features:

ng generate component accessible-component

Semantic HTML and ARIA Roles

Semantic HTML is the foundation of accessibility. It helps screen readers and other assistive technologies understand the structure and content of your application.

accessible-component.component.html

<main role="main">
  <h1>Accessibility Demo</h1>
  <section aria-labelledby="section1-header">
    <h2 id="section1-header">Keyboard Navigation</h2>
    <p>
      This section demonstrates how to make a component navigable using keyboard alone.
    </p>
    <button (click)="showAlert()">Click Me</button>
  </section>
  <section aria-labelledby="section2-header">
    <h2 id="section2-header">Form Accessibility</h2>
    <form (submit)="onSubmit()">
      <div>
        <label for="username">Username</label>
        <input id="username" type="text" required aria-required="true" />
      </div>
      <div>
        <label for="email">Email</label>
        <input id="email" type="email" required aria-required="true" />
      </div>
      <button type="submit">Submit</button>
    </form>
  </section>
  <section aria-labelledby="section3-header">
    <h2 id="section3-header">ARIA Roles and Properties</h2>
    <p role="alert" *ngIf="showingAlert">This is an important alert message!</p>
    <div role="button" tabindex="0" (click)="toggleAlert()" (keyup.enter)="toggleAlert()">
      Toggle Alert
    </div>
  </section>
</main>

accessible-component.component.ts

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

@Component({
  selector: 'app-accessible-component',
  templateUrl: './accessible-component.component.html',
  styleUrls: ['./accessible-component.component.css']
})
export class AccessibleComponentComponent {
  showingAlert = false;

  showAlert() {
    alert('Button clicked!');
  }

  toggleAlert() {
    this.showingAlert = !this.showingAlert;
  }

  onSubmit() {
    alert('Form submitted!');
  }
}

Styling for Focus and Visibility

CSS plays a crucial role in accessibility by ensuring elements are clearly visible when focused.

accessible-component.component.css

button, input[type="text"], input[type="email"], [role="button"] {
  padding: 8px;
  margin: 8px 0;
  font-size: 16px;
}

button:focus, input:focus, [role="button"]:focus {
  outline: 2px solid #005fcc;
  outline-offset: 2px;
}

[role="button"] {
  cursor: pointer;
  display: inline-block;
  padding: 10px 20px;
  background-color: #007bff;
  color: white;
  border-radius: 4px;
  text-align: center;
}

[role="button"]:hover, [role="button"]:focus {
  background-color: #005fcc;
}

Advanced Keyboard Navigation

Ensuring your application is fully navigable using a keyboard is critical for accessibility.

Handling Focus Management

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

@Component({
  selector: 'app-accessible-component',
  templateUrl: './accessible-component.component.html',
  styleUrls: ['./accessible-component.component.css']
})
export class AccessibleComponentComponent {
  @ViewChild('toggleButton') toggleButton: ElementRef;

  showingAlert = false;

  showAlert() {
    alert('Button clicked!');
  }

  toggleAlert() {
    this.showingAlert = !this.showingAlert;
    if (this.showingAlert) {
      setTimeout(() => this.toggleButton.nativeElement.focus(), 0);
    }
  }

  onSubmit() {
    alert('Form submitted!');
  }
}

Providing Text Alternatives

Text alternatives are crucial for non-text content, such as images and icons.

accessible-component.component.html

<section aria-labelledby="section4-header">
  <h2 id="section4-header">Text Alternatives</h2>
  <img src="example-image.jpg" alt="Descriptive text about the image" />
  <button aria-label="Save">💾</button>
</section>

Testing Accessibility

To ensure your application meets accessibility standards, you can use various tools and techniques:

1. Linting for Accessibility:

Use Angular’s built-in accessibility linting rules:

ng lint --fix

2. Automated Testing:

Integrate tools like axe-core with your testing framework.

npm install axe-core

Add axe-core to your tests:

import 'axe-core';

describe('Accessibility Tests', () => {
  it('should have no accessibility violations', () => {
    cy.visit('/');
    cy.injectAxe();
    cy.checkA11y();
  });
});

3. Manual Testing:

• Use screen readers like NVDA, JAWS, or VoiceOver.
• Test keyboard navigation.
• Use browser extensions like aXe or Lighthouse.

Summary

In this tutorial, we’ve covered advanced accessibility practices in Angular, including semantic HTML, ARIA roles, keyboard navigation, focus management, text alternatives, and testing. By implementing these practices, you can ensure your Angular application is accessible to all users, including those with disabilities.

Remember that accessibility is an ongoing process, and regular testing and updates are necessary to maintain compliance with accessibility standards.

The European Accessibility Act (EAA) mandates minimum accessibility requirements for consumer products, services, and information, to be enforced by all EU member states by June 28, 2025.

Get an email whenever Amir Saeed publishes.

Core modules for accessibility (a11y)

I Appreciate the time and attention, happy coding.

Amir Saeed

Full-stack front end developer