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

Question

SPA（AngularJS）にアクセシブルにする最良の方法は何ですか（スクリーンリーダーなどの場合）？

私はaria仕様の経験はほとんどありませんし、1ページアプリケーションで動作するかどうかは疑問です。

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

開発時にどのようにアクセシビリティをデバッグしてテストしますか？

Answer 1

ここにはさまざまな問題が含まれています。だから私はあなたの道を歩むことを希望し、基本的な落とし穴の基本をいくつか見ていきます。

コメント者が言ったように、はい、あなたは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に慣れていないんだけど、私の簡単なビューは、私はそれがViewModelにコントローラのより多くのだと思いますJQueryのようなUI特有のものとは対照的ですが、私が間違っていれば私を修正してください。

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

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

後にはJQueryで（文書をロードし、あなたはそれを持っているときに、それをフェージングあなたの一例を取って）：：

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

このだから、簡単な例では、このようになります文書が読み込まれ、画面上で読む準備が整ったことをスクリーンリーダーに知らせる。ライブリージョンはややこしいかもしれませんが、マスターすることができれば強力なビーストです。

最後に、アクセシビリティテストでは、いくつかのオプションがあります。私が最近遭遇したのはWaveで、これはオンラインテストツールのようです。一見して見えますが、試してみることもできます。もう1つの選択肢は、スクリーンリーダーを自分でつかんで行きなさい。私はNVDAをお勧めします。これはオープンソース（したがって無料）スクリーンリーダーです。それは私のスクリーンリーダーの選択であり、かなり良いです。バンドルされたシンセサイザーには一番いい声はありませんが、他にもオプションがあります。また、音声出力をオフにして、スピーチビューアーを使ってテキスト表示を表示することもできます。最終的な選択肢は、アクセシビリティテスト担当者にテストドライブのためのアプリを頼むことです。消費者製品やそれらの括弧内のものについては、目の不自由な人や他のアクセス可能な技術者が、尋ねられればそれを実行するようボランティアできるかもしれません。あなたがパブリックフォーラムで欲しくないかもしれないよりビジネス指向のアプリケーションのために、Webアプリケーションをアクセス可能にする問題に関して相談することができるいくつかの組織があります。

これは決してアクセシビリティについての包括的なマニュアルではありませんが、私は本当にあなたを正しい方向にキックスタートさせることを望んでいました。より深いところを見るには、ARIA rolesのドキュメントを参照してください（そのすべてが助けになりますが、コードは定義の見出しの下にあります）。それ以降はARIA States and Properties documentationです。彼らはどちらも少し乾いただけでなく、あなたがアリを賢明に使うことができるすべてのリストを持っています。 Googleはいくつかのチュートリアルを手に入れることができるはずです。

私はこれがあなたを始めるのに役立つことを願っています。がんばろう！