Angular Aria で Tab を爆速実装

DRANK

これはAngular Advent Calendar 2025の8日目の記事です。昨日は @da1chi さんでした。はじめに毎年、Angular CDK の布教活動に勤しんでいる私ですが、今年は Angular v21 で新たに登場した Angular Aria について紹介したいと思います。Angular Aria は angular.dev にも掲載されてる v21 の目玉機能の一つです。開発は angular/components で行われており、Angular Material や Angular CDK と同じチームが手がけていて、非常に楽しみな新しいライブラリです。Angular Aria とは？公式ドキュメントには以下のように説明されています。アクセシブルなコンポーネントの構築は一見簡単そうですが、W3Cアクセシビリティガイドラインに従って実装するには、多大な労力とアクセシビリティの専門知識が必要です。Angular Ariaは、一般的なWAI-ARIAパターンを実装する、ヘッドレスでアクセシブルなディレクティブのコレクションです。ディレクティブはキーボードインタラクション、ARIA属性、フォーカス管理、スクリーンリーダーのサポートを処理します。あなたがすべきことは、HTML構造、CSSスタイリング、ビジネスロジックを提供することだけです！Angular Aria Overview より引…