ARIA attributes in templates in Angular - Mini Project: Build & Apply

Adding ARIA Attributes in Angular Templates

📖 Scenario: You are building a simple Angular component that displays a navigation menu. To make the menu accessible for screen readers, you need to add ARIA attributes in the template.

🎯 Goal: Create an Angular standalone component with a navigation menu. Add appropriate ARIA attributes to the <nav> and <ul> elements to improve accessibility.

📋 What You'll Learn

Create a standalone Angular component named NavMenuComponent.

Add a <nav> element with an aria-label attribute describing the navigation.

Add a <ul> element inside the <nav> with role="menubar".

Add three <li> items inside the <ul> with text: Home, About, Contact.

💡 Why This Matters

🌍 Real World

Accessible navigation menus are essential for users who rely on screen readers or keyboard navigation. Adding ARIA attributes helps make web apps usable by everyone.

💼 Career

Front-end developers must know how to implement accessibility features in Angular templates to meet web standards and legal requirements.

1

Create the Angular standalone component skeleton

Create a standalone Angular component named NavMenuComponent with a selector app-nav-menu. The template should contain an empty <nav> element.

Angular

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

@Component({
  selector: 'app-nav-menu',
  standalone: true,
  template: `
    
      
    
  `
})
export class NavMenuComponent {
}

// Your code here

Need a hint?

Use @Component decorator with standalone: true and a template containing a <nav> element.

2

Add ARIA label to the <nav> element

Add an aria-label attribute with the value Primary navigation to the <nav> element inside the template.

Angular

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

@Component({
  selector: 'app-nav-menu',
  standalone: true,
  template: `
    
      
    
  `
})
export class NavMenuComponent {
}

// Your code here

Need a hint?

Add aria-label="Primary navigation" inside the <nav> tag.

3

Add a menubar list inside the navigation

Inside the <nav> element, add a <ul> element with role="menubar". Inside the <ul>, add three <li> items with text: Home, About, and Contact.

Angular

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

@Component({
  selector: 'app-nav-menu',
  standalone: true,
  template: `
    
      
        
      
    
  `
})
export class NavMenuComponent {
}

// Your code here

Need a hint?

Add <ul role="menubar"> with three <li> items inside the <nav>.

4

Complete the component with accessibility best practices

Ensure the component is properly closed and ready to use. Confirm the template includes the <nav> with aria-label="Primary navigation", the <ul> with role="menubar", and the three <li> items: Home, About, and Contact.

Angular

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

@Component({
  selector: 'app-nav-menu',
  standalone: true,
  template: `
    
      
        Home
        About
        Contact
      
    
  `
})
export class NavMenuComponent {
}

// Review and finalize your component

Need a hint?

Check that all tags are properly closed and ARIA attributes are present as required.