Javascriptとアクセシビリティ

StackOverflow https://stackoverflow.com/questions/266777

質問

ウェブ開発者として、私が取り組んでいる多くのプロジェクトは政府の傘下にあるため、 508アクセシビリティ法律、および W3Cアクセシビリティガイドライン。これらの要件を満たしながらJavaScriptをどの程度使用できますか？

これらの行に沿って、JavaScript、具体的にはAJAXおよびjQueryなどのパッケージを使用して、JAWSやOrcaなどの最新のアクセシビリティソフトウェアでサポートされているモーダルダイアログやポップアップなどを表示しますか？過去には、このルールは「Lynxで機能しない場合、スクリーンリーダーでは機能しない」などのようなものでした。これはまだ真実ですか、またはこれらの分野でさらに進歩がありましたか？

編集：コンセンサスは、javascript以外のフォールバックがある限りjavascriptは問題ないようですが、スクリーンリーダーソフトウェアでのAJAXのサポートについてはまだ不明なようです。これについて特定の経験がある人は、それが最も役立つでしょう。

役に立ちましたか？

解決

アクセシビリティが第一の関心事である場合は、常に標準に準拠した（ドキュメントタイプ定義を選択し、それに準拠する）HTMLを使用してWebサイトを開始します。 Webアプリケーション（フォームの送信など）の場合は、HTTP GETとPOSTだけを使用してフォームが機能することを確認してください。完全なWebサイト/アプリケーションを作成したら、サイトが機能している限り、CSSとJavaScriptを追加できます。いずれかまたは両方をオフにしてください。

ここで最も重要な概念は、プログレッシブ拡張です。 CSS / JavaScriptを使用して付加機能を追加していますが、Webサイト/アプリケーションはなしでも完全に機能します。

508 、 WAI 、CSSオフ、JavaScriptオフ Firefox用のWeb開発者プラグイン。

他のヒント

答えは本当に物事をどのように構築するかにあると思います。 JQueryには目立たないため、アクセスできる機能があります。秘Theは、AJAX呼び出しの周りに冗長性を持たせ、JavaScriptのないブラウザーでもサービスを利用できるようにすることです。つまり、JavaScriptの応答、ダイアログなどがある場合はどこでも、同等の機能を低下させる必要があります。

アクセシビリティを念頭に置いて、両方のユースケース（JavaScriptと非JavaScript）を適切にテストしている場合、両方のオーディエンスに対応するアプリケーションを作成できるはずです。

例（わかりやすくするために、$（document）.ready呼び出しは省略しています：

<script>
  $("#hello").click(function(){
    alert("Hi");
  });
</script>
<a href="/say_hello.htm" id="hello">Say Hello</a>

簡単な例ですが、基本的には、JavaScriptがサポートされている場合にクリックJavaScriptイベントのみを評価します。それ以外の場合、通常のリンクのように実行され、say_hello.htmに移動します。開発者としての仕事は、両方の結果が適切に処理されるようにすることです。

役立つことを願っています！

プログレッシブエンハンスメントは確かに1つのルートですが、スクリーンリーダーは作業の基盤としてブラウザーを使用する傾向があるため、控えめさがJavaScriptアクセシビリティのすべてではありません。これらのブラウザーはJavaScriptをサポートしているため、ページ上のスクリプトは引き続き実行されます。これは、ページの一部をクリックすると、スクリーンリーダーが認識していないページの別の部分が変更される可能性があるため、AJAXの特定の問題です。

ただし、AJAXが成熟するにつれて、AJAXをアクセス可能にする方法が登場しています。 AJAXをアクセス可能にする最新の方法については、 WAI-ARIA を調べ、 GoogleのAxsJAX を使用して実装するのが良い方法です。

参照

FlashAidをご覧になることもできますが、完璧なソリューションとはほど遠いものです。 （ただし、プログレッシブエンハンスメントを使用し、Flashが存在し、ユーザーがアクセシビリティAPIを使用していないときにのみAJAXを使用した場合、Windowsの場合は合理的なソリューションがあります。）

長期的には、WAI-ARIAが解決策です。 JAWS 10（ベータ版）およびFirevoxで多少サポートされていますが、今日のすべてのユーザーには十分ではありません。

  

JQueryには目立たないため、アクセスできる機能があります。秘Theは、AJAX呼び出しの周りに冗長性を持たせ、JavaScriptのないブラウザーでもサービスを利用できるようにすることです。つまり、JavaScriptの応答やダイアログなどがある場合はどこでも、同等の機能を低下させる必要があります。

これを実行してコードを再利用する1つの方法は、「シンプル」にすることです。 「関数」を呼び出すページ（またはサーバー側のロジックに使用するものは何でも）呼び出すことができ、JSONまたはXMLを返します。

例： /static/myform.asp（サーバー側では、/ ajax / myform.aspと同じロジックが「含まれます」） そうすれば、aspをdjangoのテンプレートとして使用できます。

もちろん、フル機能のベルとホイッスルのフレームワークを使用すると、これをはるかに簡単にできます（djangoの同じビューにhtmlとxmlの「テンプレート」があると考えてください）が、同じ考えが当てはまります。

これを行うと、jQueryを使用してドキュメントのすべてのアンカーを繰り返し処理し、アンカーの独自のリンクを使用してonclickイベントを追加し、/ static / ajax /を再実装することで作業が楽になります。

誰もがこれが重荷である理由を考えることができますか？この「デザインアイデア」に重大な欠陥があるかどうかを知りたい。

受け入れられた答えは、当時は問題ありませんが、時代遅れになっていると思います。 （文字通り、この回答を書いた時点で10年。WCAG2.1は数週間前に完成しました...）

W3C WAI-Authoring Design Patterns Practices ドキュメントには適切なセマンティクス、状態、および役割を支援技術に伝えるために必須 javaScriptである一般的なウィジェットのさまざまな例。

AJAXは、ユーザーがアクティブにする前にページ内更新が何であるかについてスクリーンリーダーに意味的な手がかりを与えるよう注意する限り、アクセス可能にすることができます。また、実際にその後何が変更されたかについてスクリーンリーダーに通知する必要がある場合があります。 aria-liveリージョンが「20個の新しいアイテムがロードされました」とアナウンスする場合があります。または何でも。これはjavaScriptで実現されます。

アクセシビリティの知識が「プログレッシブエンハンスメント」で停止し、上記の受け入れられた答えがそのポジションの根拠として表示される場合、更新が必要になる可能性があります。最近、物事は急速に進んでいます。

ライセンス： CC-BY-SA と 帰属
所属していません StackOverflow
scroll top