web-dev-qa-db-ja.com

angularjsのようなフレームワークを使用することのアクセシビリティの影響は何ですか？

私たちが立つところ

私たちは、公的/教育機関を管理する特定の法律に準拠するために、ウェブアクセシビリティの推進に取り組んでいます。これまでは、次のことを確認するだけで対応しています。

  1. 私たちのレイアウトは論理的に整理されました。
  2. 画像にalt=""タグ。しかし、ギアを入れてこれについて本当に考える必要があることをすぐに理解しています。

検討していること

私たちはAngularJSを動的Webアプリケーションのフレームワークと見なしてきましたが、それが私たちのアクセシビリティの立場にどのような意味があるのか​​心配しています。

JavaScriptを使用しないブラウザは、非常に動的なAngularアプリ（例：{{ item.something }}を使用してマークアップに埋め込み、ng-repeat単一のリストからリストを作成する<li>、空のタグなどのクライアント側部分ビューなど）。

質問

画面のようなものに意味不明なものとして認識される可能性のある動的マークアップとインラインタグ付けに大きく依存しているこれらの種類のフレームワークについて、よく理解されているベストプラクティスまたは情報リソースがあるかどうか疑問に思っています-readerまたはJavaScriptおよび[〜＃〜] css [〜＃〜]がオフになっています。

javascriptangularjsaccessibility
30
S Farron

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

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

NB：私はプログレッシブエンハンスメントを優れたアプローチと考えていますが、Angular.jsでは、そのアプローチを採用しないことを前もって決定しています。あなたがパフォーマンスとプログレッシブエンハンスメントについて知りたいのであれば、私は これが答えた だと思います。

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

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

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

30
AlastairC

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

たとえば、ngClickディレクティブはtabIndex="0"およびngKeypressを適用するため（これらのオプションが無効になっていない限り）、アクセスできないクリックイベントを簡単に作成することはできません。 ngAriaはまもなくrole="button"も追加して、クリック可能な要素の目的を伝えます。これは他のロールでオーバーライドできます。詳細については、このプルリクエストを参照してください。 https://github.com/angular/angular.js/pull/10318

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の問題を作成するか、プルリクエストを送信してください。これはコミュニティ主導の取り組みです。

7
Marcy Sutton

AngularJSとアクセシビリティに関する最大の問題は次のとおりです。

  1. フォーカス管理-ルートによってコンテンツのセクションが更新され、そのセクションにフォーカスが含まれるとすぐに、ブラウザーはドキュメントの上部にフォーカスを送信し、スクリーンリーダーとキーボードのみのユーザーは失われます。あなたは積極的にあなたの焦点を管理する必要があります
  2. 動的更新のお知らせ-データバインディングにより、JavaScriptを操作せずにDOMを更新できます。これらの更新が重要な場合、スクリーンリーダーユーザーは、aria-liveリージョンを使用してこれらの更新について通知を受ける必要があります。これらを適切に機能させる-特にiOSでは注意が必要です。
  3. フォームの検証-AngularJSの例ではすべて、フォームの検証が失敗したときに表示されるエラーメッセージの要素を使用しています。入力フィールドの関連付けは正しくありません。これらを自動的に表示する場合（特に、ぼかしを使用して行う場合）、＃2で述べたのと同じ問題に対処する必要があります。
  4. タイトル属性の更新-ルーターがURLを変更する場合、ドキュメントのタイトルを更新する必要があります

それ以外は、単なるHTMLアプリケーションです。

このGithubリポジトリには、これらの問題のいくつかに対処するためのいくつかのAngular.jsディレクティブとサービスがあります https://github.com/dequelabs/ngA11y

3
unobf