web-dev-qa-db-ja.com

シングルページアプリケーション（ARIAなど）でのアクセシビリティ

SPA（AngularJS）をアクセシブルにするための最良のアプローチは何ですか（スクリーンリーダーなど）？

私はaria仕様の経験がほとんどないか、まったくありません。単一ページのアプリケーションでまったく機能するのではないかと思います。

開発時の一般的な落とし穴は何ですか？

開発時にアクセシビリティをデバッグおよびテストするにはどうすればよいですか？

angularjsaccessibilitysingle-page-application
42
Kenneth Lynne

これは、ここで幅広い問題をカバーする可能性があります。それで、私はそれがあなたの途中であなたを始めることを期待して、いわば一般的な落とし穴であるいくつかの基本を通り抜けます。

まず、コメント投稿者が言ったように、はい、ARIAタグが正しく使用されていることを確認する必要があります。たとえば、divをボタンとして公開したい場合は、次のようになります。

<div id="mysuperflashybutton" ... role="button" aria-label="Super flashy" tabindex="0"></div>

スクリーンリーダーでこのボタンを選択すると、「超派手なボタン」と呼ばれるため、aria-label属性にボタンを配置する必要はありません。もっと複雑な例がありますが、それはその基本をほぼ示しています。 Role、aria-label、tabindexは、最も一般的なARIA属性になります。

これには、スクリーンリーダーのユーザーにクリックしてもらいたいタブインデックス要素が不可欠です。 tabindexを0に設定して、ドキュメントのデフォルトの場所に含めます。キーボードナビゲーションを使用しているユーザーが必ずしも通常どおりにアクセスしたくない場合は、-1に設定します。これは、通常のタブ順序から外れていることを意味しますが、javascript/jquery .focus（）を使用してユーザーのフォーカスを手動でそこに配置する場合は、引き続きナビゲートできます。

前述のように、キーボードナビゲーター/スクリーンリーダーのユーザーがフォーカスを移動することで、ユーザーを支援できる場合があります。たとえば、ボタンをクリックしてメニューが表示された場合です。このようなことをして、メニューの最初のリンクに配置することができます。

$('#linkmenuactivator').on("click", function () {
    $('#linkmenu').find('li:first a').focus();
});

私はそれがJQueryにあることを知っています、私はAngularJSに精通していませんが、私の簡単なビューでは、JQueryのようなUI固有のものではなく、ViewModelコントローラーに近いと思いますが、間違っている場合は修正してください。

スクリーンリーダーのユーザーにとって意味のないファンキーなことを画面上で行っている場合は、ライブリージョンを使用できます。これらの領域の要素にテキストを書き込んで、情報をテキストで出力できます。これを行う最も簡単な方法は、重要なメッセージまたは一般的なステータスの更新にそれぞれアラートまたはステータスの役割を使用することです。これらの役割により、要素はデフォルトでライブリージョンになり、そこでのテキストの変更はスクリーンリーダーに報告されます。したがって、簡単な例は次のようになります。

<p id="ariastatusbox" ... role="status"></p>

その後、JQueryで（ドキュメントをロードし、取得したときにフェードインする例を取り上げます）：

$('#maincontent').fadeIn(function () {
    $('#ariastatusbox').text('Document loaded');
});

これにより、ドキュメントが読み込まれ、画面で読む準備ができていることがスクリーンリーダーに通知されます。ライブリージョンは少し注意が必要ですが、マスターできれば強力な野獣です。

最後に、アクセシビリティテストに関しては、いくつかのオプションがあります。私が最近偶然見つけたものは Wave で、これはオンラインテストツールのようです。一見良さそうですが、ぜひお試しください。もう1つのオプションは、スクリーンリーダーを自分で取得して、試してみることです。私は [〜＃〜] nvda [〜＃〜] をお勧めします。これはオープンソースの（したがって無料の）スクリーンリーダーです。それは私の選択したスクリーンリーダーであり、かなり良いです。付属のシンセサイザーには最高の音声はありませんが、他のオプションがあります。または、音声出力をオフにして、音声ビューアを使用して音声のテキスト表示を表示することもできます。最後のオプションは、アクセシビリティテスターに​​アプリを試乗してもらうことです。消費者向け製品やそれらの括弧内のものについては、視覚障害者やその他のアクセシブルな技術のユーザーは、求められればそれを自発的に行うかもしれません。公開フォーラムに掲載したくないビジネス指向のアプリについては、Webアプリケーションをアクセシブルにする問題について相談できる組織がいくつかあります。

これはアクセシビリティに関する包括的なマニュアルではありません。私はあなたを正しい方向にキックスタートすることを本当に望んでいました。もう少し詳しく調べるには、 ARIAの役割 のドキュメント（すべて役に立ちますが、コードは定義の見出しの下にあります）を見て、それ以降は ARIAの状態とプロパティドキュメント 。どちらも少し乾燥している可能性がありますが、ARIAを賢く使用できるすべてのリストもあります。グーグルもいくつかのチュートリアルを生み出すことができるはずです、私は願っています。

これがあなたが始めるのに役立つことを願っています。幸運を！

75
Craig Brett