Accessibility testing basics in Angular - Mini Project: Build & Apply

Accessibility Testing Basics with Angular

📖 Scenario: You are building a simple Angular component for a website's contact form. The form must be accessible to all users, including those using screen readers or keyboard navigation.

🎯 Goal: Create an accessible Angular component with a form that includes labels, ARIA attributes, and keyboard-friendly elements.

📋 What You'll Learn

Use semantic HTML elements inside the Angular template

Add aria-label attributes where needed

Ensure all form inputs have associated labels

Make the form keyboard navigable

Use Angular standalone component with @Component and standalone: true

💡 Why This Matters

🌍 Real World

Accessible forms are essential for websites to be usable by people with disabilities, including those using screen readers or keyboard navigation.

💼 Career

Web developers must ensure their applications meet accessibility standards to reach a wider audience and comply with legal requirements.

1

Create the Angular component skeleton

Create a standalone Angular component called ContactFormComponent with a template containing a <form> element and two input fields: one for name and one for email. Use semantic HTML tags and include a submit button with the text Send.

Angular

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

@Component({
  selector: 'app-contact-form',
  standalone: true,
  template: `
    
      
    
  `
})
export class ContactFormComponent {}

Need a hint?

Use <label> tags with for attributes matching the id of inputs for accessibility.

2

Add ARIA labels for better screen reader support

Add aria-label attributes to the input elements for name and email fields with the values Enter your full name and Enter your email address respectively.

Angular

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

@Component({
  selector: 'app-contact-form',
  standalone: true,
  template: `
    
      Name
      

      Email
      

      Send
    
  `
})
export class ContactFormComponent {}

# Add aria-label attributes to the input elements

Need a hint?

Use aria-label inside the <input> tags to describe the input purpose for screen readers.

3

Make the form keyboard accessible

Add a tabindex="0" attribute to the button element to ensure it is focusable by keyboard users.

Angular

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

@Component({
  selector: 'app-contact-form',
  standalone: true,
  template: `
    
      Name
      

      Email
      

      Send
    
  `
})
export class ContactFormComponent {}

# Add tabindex="0" to the button element

Need a hint?

Use tabindex="0" on interactive elements to include them in the keyboard tab order.

4

Add role and aria-live for form submission feedback

Add a <div> below the form with role="alert" and aria-live="polite" attributes to announce submission messages to screen readers. The div should have an id="submissionMessage".

Angular

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

@Component({
  selector: 'app-contact-form',
  standalone: true,
  template: `
    
      Name
      

      Email
      

      Send
    
    
  `
})
export class ContactFormComponent {}

Need a hint?

Use a <div> with role="alert" and aria-live="polite" to notify screen readers of dynamic messages.