アクセシビリティこの記事は2015年12月11日に書かれたものです。情報が古い可能性がありますのでご注意ください。多くのコンテンツをコンパクトに表示するために、よく用いられるタブ切り替えUIですが、スクリーンリーダーでの利用やキーボド操作を考慮した場合に、アクセシブルではないと思えるものが少なくありません。スクリーンリーダー利用者はタブ切り替えUIであると認識することが難しいと思われます。タブ切り替えUIは一種のページ内リンクと考えられますので、一つのタブを選択したらそのタブが示す先のコンテンツにフォーカスが移動しなければなりません。多くのタブ切り替えUIは、タブを選択した後に[tab]キーを押すと、リンク先のコンテンツ内、あるいはその次のリンクにジャンプすることはなく、選択したタブの次のタブにフォーカスが移動します。ページ内リンクとして機能していないということになります。要素に指定しています。オプションとして、タブの最後に「すべて表示」の選択肢を追加しています。スクリーンリーダー向けに先頭に注釈を、コンテンツの最後にタブ選択に戻るためのリンクを設置しています。class="scrText">タブ形式で表示を切り替えています。持つ要素の次の要素を表示します。「すべて表示」のタブを選択した場合はすべてのコンテンツを表示します。設定し、スクリーンリーダー用に「表示中のタブ:」というテキストを追加しています。要素に移動するため、画面のスクロールが発生します。記述されることが多いですが、それではリンクが機能しなくなるので、選択したコンテンツにフォーカスがジャンプしません。要素がないとキーボードで操作することができません。マウスでクリックすることができる要素は、キーボードでもフォーカスできるようにすべきです。持つ要素を非表示とすることで、画面スクロールを起こさず、選択したコンテンツにフォーカスがジャンプするようにします。要素に指定したのはこのためです。先頭のスクリーンリーダー用の注釈、選択したタブに追加した「表示中のタブ:」のテキスト、タブ選択に戻るリンクは画面上で非表示にします。画面から消されているのを見ますが、これはスクリーンリーダーにも認識されなくなりますので、スクリーンリーダー用のテキストの意味がありません。して画面から消しています。その上で、画面を見てキーボードで操作するユーザーのため、タブ選択に戻るリンクにフォーカスされると、そのリンクが画面に表示されるようにしています。タブ切り替えUIを使わないことが最もアクセシブルかもしれませんが、タブ切り替えUIがユーザービリティを向上させる場合もあります。これでも十分にアクセシブルとは言えないかもしれませんが、タブ切り替えUIのように視覚的なUIでも、スクリーンリーダーやキーボード操作で戸惑わない配慮が必要と考えます。コメントをキャンセルコメント名前(ニックネーム可)(必須)メールアドレス(公開されません)(必須)次回のコメントで使用するためブラウザーに自分の名前、メールアドレス、サイトを保存する。