This example shows a button that toggles a menu. The button uses ARIA attributes:
aria-label to describe the button for screen readers.aria-expanded to indicate if the menu is open or closed.aria-controls to link the button to the menu.
The menu has role="menu" and each item has role="menuitem" to help assistive technologies understand the structure.
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1" />
<title>ARIA in Angular Template Example</title>
</head>
<body>
<app-root></app-root>
<script src="https://unpkg.com/@angular/core@17/bundles/core.umd.min.js"></script>
<script src="https://unpkg.com/@angular/common@17/bundles/common.umd.min.js"></script>
<script src="https://unpkg.com/@angular/platform-browser@17/bundles/platform-browser.umd.min.js"></script>
<script src="https://unpkg.com/@angular/platform-browser-dynamic@17/bundles/platform-browser-dynamic.umd.min.js"></script>
<script>
const { Component, NgModule, enableProdMode } = ng.core;
const { BrowserModule } = ng.platformBrowser;
const { platformBrowserDynamic } = ng.platformBrowserDynamic;
enableProdMode();
@Component({
selector: 'app-root',
template: `
<h1>ARIA Attributes in Angular Template</h1>
<button
[attr.aria-label]="buttonLabel"
(click)="toggleMenu()"
[attr.aria-expanded]="menuOpen"
aria-controls="menu"
>
Toggle Menu
</button>
<ul id="menu" *ngIf="menuOpen" role="menu">
<li role="menuitem">Item 1</li>
<li role="menuitem">Item 2</li>
<li role="menuitem">Item 3</li>
</ul>
`
})
class AppComponent {
buttonLabel = 'Toggle navigation menu';
menuOpen = false;
toggleMenu() {
this.menuOpen = !this.menuOpen;
}
}
@NgModule({
imports: [BrowserModule],
declarations: [AppComponent],
bootstrap: [AppComponent]
})
class AppModule {}
platformBrowserDynamic().bootstrapModule(AppModule);
</script>
</body>
</html>
Recommended