SPA (AngularJS) をアクセシブル (スクリーン リーダーなど) にするための最良の方法は何ですか?
私は aria 仕様の経験がほとんどないため、単一ページのアプリケーションで機能するかどうか疑問に思っています。
開発時のよくある落とし穴は何ですか?
開発時にアクセシビリティをデバッグおよびテストするにはどうすればよいですか?
質問する
8581 次
1 に答える
75
これは、ここでの広範な問題をカバーする可能性があります。それで、いわば一般的な落とし穴であるあなたの道を歩み始めることを期待して、いくつかの基本について説明します.
まず、コメンターが言ったように、はい、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 を賢く使用できるすべてのリストも含まれています。Google もいくつかのチュートリアルを作成できるはずです。
これがあなたが始めるのに役立つことを願っています. 幸運を！
于 2013-03-22T20:49:33.930 に答える