2016-10-12 5 views
2

ウェブのアクセシビリティについて質問があります。 SPA(シングルページアプリ)の場合、クリック時のナビゲーションリンクがぼやけているかどうかクリックとウェブアクセシビリティでナビゲーションリンクがぼやけて表示

適切: がSPAでAJAXを経由してコンテンツを交換するには、従来のWebページでページを移動すると同じです。つまり、ページのコンテキストが変更されるため、クリックするとナビゲーションリンクがぼやけてしまうべきです(SHOULD)。

不適切: あなたは理由を知っています。 W3CとWHATWGによると、フォーカスリングを削除すると、キーボードを使用してインタラクティブなコンテンツをナビゲートして操作するユーザーにとって、アクセシビリティの問題が深刻化します。

次に、あなたはどう思いますか? どちらが適切ですか?

もう1つ、これはフォーカスリングまたは視覚効果に関するものではありません。私が心配しているのは「意味」だけです。

+0

そしてGNBリンクがあるの他の部分に焦点を当てたように任意のJavaScriptの代替を使用することができます。 ..? –

+0

ここでぼかしは何を意味しますか?なぜ/どのようにリンクがぼやけますか? – unor

答えて

1

状況によって異なります。

  • あなたが「次のページ」リンクを持っていると、リンクがままの場合、あなただけのメインの内容が変更されているaria-live領域とをユーザに通知することができます。ユーザーは同じリンクにスクロールしなくても、もう1つのクリックが再び「次のページ」に移動することを期待しています。

  • リンク自体が消えて、古いコンテンツに含まれていた場合は、もちろん、ページが通常変更されたかのように、必要ならばthis.blur()となります。

  • これは特定のページに移動するためのナビゲーションリンクの場合、ユーザーは再度クリックする必要はなく、通常のページ変更を誘発してthis.blur()このリンクを誘導することができます。

注:「ぼかし」は本当に私の心をぼかしたので、私はthis.blur()動詞を使用していますが、ページ

+0

this.blur()を使用することをお勧めしますか?ユーザーはリンクを選択しました。どこかに行くと予想されます。リンクからユーザーを起動するだけで、ランダムな場所やページの一番上に着陸する可能性があります。あなたはこれをテストしましたか? – AlastairC

+0

@AlastairCユーザはクリックの後ろにある技術を無視しなければなりません。クリックが自分の視点からページの変更を誘発した場合、技術はページの変更がページ自体からフォーカス()を取り除く(そして上に移動する)ようなことをすべてエミュレートすることがあります。ページの下のリンクをクリックして変更を見ないことは非常に邪魔になります(例えば、画面の拡大鏡を使用しても、同じ選択リンクが表示される可能性があります)。 – Adam

+0

まさに、新しい/変更されたコンテンツにフォーカスを移してはいけませんか? (それがボタンの場合は、ページ上の何かが変更されることを期待しています) – AlastairC

0

質問は明確ではないので、私が理解した内容に基づいて回答しています。

ユーザーにページの変更について通知する場合は、live regionsなどのARIAタグを使用する必要があります。CSS効果を使用すると、スクリーンリーダーには影響しません。したがって、ページの特定の部分が更新されたことをスクリーンリーダーに通知するメソッドが必要です。

3

この文脈では、ぼかしの意味が明確ではありませんが、SPAキーボードではフォーカス管理が必要です。

クリックしたときにオンブラを適用するだけで、スクリーンリーダーがリンクを選択するときにonclick JSイベントを送信する可能性があります。

ビジュアルキーボードユーザーとスクリーンリーダーユーザーの両方にとって、リンクが選択され、JSによってコンテンツが更新されると、フォーカスが(JS のように)新しいコンテンツの先頭に移動されます。そのコンテンツ要素には、フォーカス可能にするためにtabindex="-1"が必要な場合があります。

たとえば、リンクが選択されたときに新しいコンテンツで更新されるメインのコンテンツ領域がある場合は、新しいコンテンツがロードされたときにその先頭にフォーカスを移動します。

フォーカスアウトラインonclickに問題がある場合は、:focusのためにアウトラインを変更するCSSを削除することをお勧めします。私の記事Fixing outlines on clickとその別のオプションを参照してください。

この回答もgeneral issues for SPAsもご覧ください。

関連する問題