31

私たちが立っている場所

私たちは、公共/教育機関を管理する特定の法律に準拠するために、Web アクセシビリティを推進しています。これまでは、次のことを確認してきました。

  1. レイアウトは論理的に順序付けられていました。
  2. 画像にはalt=""タグがありました。しかし、私たちは準備を整えて、これについて真剣に考える必要があることをすぐに学び始めています。

検討していること

私たちはAngularJS動的 Web アプリケーションのフレームワークとして検討してきましたが、それが私たちのアクセシビリティの立場にどのような影響を与えるかについて懸念しています。

JavaScript を使用しないブラウザーは、非常に動的な Angular アプリを壊す可能性が高いことを理解しています (たとえば{{ item.something }}、マークアップに埋め込まれた式ng-repeat、単一の からリストを作成するために使用する式<li>、空のタグとしてのクライアント側の部分ビューなど)。

質問

動的マークアップやインライン タグ付けに大きく依存し、スクリーン リーダーやブラウザーでさえ意味不明と見なされる可能性のある、この種のフレームワークについて、よく理解されたベスト プラクティスや情報リソースがあるかどうか疑問に思っています。 JavaScriptとCSSがオフになっています。

4

3 に答える 3

31

画像に代替テキストを使用する、見出しを適切に使用する、コンテンツに適切な HTML(5) 構造を使用するなど、同じ原則がすべて適用されます。

あなたは JavaScript で作成しているかもしれませんが、過去 5 年間のスクリーン リーダーはそれを理解し、ブラウザーのアクセシビリティ API を使用して DOM にアクセスします。非 JavaScript の側面は、単にアクセシビリティの問題ではありません。JavaScript を使用しないスクリーン リーダー ユーザーの数は、一般人口と同じであるため、開発中に見られる生のマークアップではなく、完全に形成された HTML として認識されます。

注意:プログレッシブ エンハンスメントは良いアプローチだと思いますが、Angular.js では、そのアプローチをとらないことを前もって決めています。パフォーマンスとプログレッシブ エンハンスメントについて知りたい場合は、これで答えられると思います。

もちろん、標準のコンテンツ ページを作成するためだけに Angular.js を使用するわけではありません。そのため、WAI-ARIA 仕様と、HTML での ARIA の使用方法について理解する必要があります。は、タブ、ツリー、グリッドなど、従来の HTML プラクティスではカバーされていないものを動的にマークアップする方法を指定します。

実際の WAI ARIA テクニックの実用的な例については、Whatsock テクニカル スタイル ガイドを参照してください。

従来の Web サイトとの違いの 1 つは、ページを更新するのではなく、キーボード フォーカスを管理するため、ページの更新を管理する方法です。しかし、それとは別に、WAI-ARIA は読むべきものです。

于 2013-09-17T22:45:06.803 に答える
7

従来、Angular は、開発者がユーザー インターフェイスを「正しい方法」でコーディングすることを奨励していませんでした。アクセスできないカスタム要素ディレクティブ ( の ngClick などdiv) を作成するのはあまりにも簡単であり、アクセシビリティ サポートは提供されませんでした。ただし、Angular 1.3x と ngAria モジュールのリリースで改善されました。現在、アプリケーションに ngAria を含めることにより、特定の ARIA 属性が自動的に適用されるため、それらを管理する必要はありません。

たとえば、(これらのオプションが無効にされていない限り)ngClickディレクティブが適用されるようになったため、アクセスできないクリック イベントを簡単に作成できなくなりました。ngAria は、クリック可能な要素の目的を伝えるためにもすぐに追加します。これは、他のロールでオーバーライドできます。詳細については、このプル リクエストを参照してください: https://github.com/angular/angular.js/pull/10318tabIndex="0"ngKeypressrole="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 の問題を作成するか、プル リクエストを送信してください。これはコミュニティ主導の取り組みです。

于 2014-12-09T18:29:05.197 に答える