従来、Angular は、開発者がユーザー インターフェイスを「正しい方法」でコーディングすることを奨励していませんでした。アクセスできないカスタム要素ディレクティブ ( の ngClick などdiv
) を作成するのはあまりにも簡単であり、アクセシビリティ サポートは提供されませんでした。ただし、Angular 1.3x と ngAria モジュールのリリースで改善されました。現在、アプリケーションに ngAria を含めることにより、特定の ARIA 属性が自動的に適用されるため、それらを管理する必要はありません。
たとえば、(これらのオプションが無効にされていない限り)ngClick
ディレクティブが適用されるようになったため、アクセスできないクリック イベントを簡単に作成できなくなりました。ngAria は、クリック可能な要素の目的を伝えるためにもすぐに追加します。これは、他のロールでオーバーライドできます。詳細については、このプル リクエストを参照してください: https://github.com/angular/angular.js/pull/10318tabIndex="0"
ngKeypress
role="button"
ngAria が役立つもう 1 つの方法はaria-disabled
、ng-disabled
. これにより、フレームワークによって無効にされているカスタム コントロールがデフォルトでアクセス可能になります。
<md-button ng-disabled="true">
ngAria では、これは次のようになります。
<md-button ng-disabled="true" aria-disabled="true">
サポートされている属性の全リストについては、ngAria API ドキュメントを参照してください: https://docs.angularjs.org/api/ngAria
ngAria は進化し続けます (そして、モジュールの代わりに焼き付けられていればよかったのにと思います) が、最終的にアクセシビリティがコア フレームワークによってサポートされるのを見るのは素晴らしいことです。
アクセシビリティを念頭に置いて責任を持ってコーディングすることは、依然として私たち一人一人の責任ですが、Angular が邪魔になることはもうありません。この質問に対する Alistair の回答には素晴らしいリソースがあります。キーボード フォーカス管理、HTML での ARIA の使用などに関するヒントについては、間違いなくそれらを参照します。ngAria の新しい Angular.js 開発者ガイドも参照できます: https://docs.angularjs.org/guide/accessibility
もう 1 つ: ngAria に関するアイデアがある場合は、ぜひ Github の問題を作成するか、プル リクエストを送信してください。これはコミュニティ主導の取り組みです。