← Angular コース
35. Angular Aria — アクセシビリティを部品で担保する
v22で正式版になった Angular Aria は、タブ・メニュー・アコーディオンといった操作部品の「アクセシビリティの面倒な部分」をディレクティブとして提供する仕組みです。ARIA属性の付与、矢印キーでの移動、フォーカスの管理といった、自前で正しく実装するのが難しい部分をAngularが肩代わりしてくれます。
実務では、これまでアクセシブルなタブやメニューを作るのに、キーボード操作や aria-* 属性を手作業で書く必要があり、抜け漏れが起きがちでした。Angular Aria を使うと、開発者は見た目(CSS)と業務ロジックに集中でき、支援技術への対応は部品側が担保してくれます。スタイルは一切持たないため、見た目は自分のデザインに自由に合わせられます。
ポイントは「振る舞いとアクセシビリティ」だけを提供する設計で、Angular Material のような完成済みの見た目とは役割が違うことです。デザインは独自に作りたいが、キーボード操作やスクリーンリーダー対応は正しくしたい、という場面にぴったりはまります。
サンプルコード(フレームワーク環境が必要なため表示のみ)
// Angular Aria はアクセシビリティに必要な属性・キーボード操作・
// フォーカス管理を、見た目を持たないディレクティブとして提供する。
// (APIはv22時点のもの。詳細は公式ドキュメントを参照)
//
// 開発者がやること: CSSで見た目を作る + 業務ロジックを書く
// Angular Ariaがやること: role/aria-* の付与, 矢印キー移動, フォーカス制御
//
// 例: タブUIに必要な ARIA とキーボード操作を、
// ディレクティブを付けるだけで満たせる(自前実装が不要になる)。