ウェブアクセシビリティ - タブオーダー？

Question

私はa11yプロジェクトのチェックリストを通過することを任されています。それが何であるかわからない人のために （http://a11yproject.com/checklist.html）

私たちのウェブサイト（www.adn.com）では、ウェブサイトのタブをタップすると、記事の内容にする前に左のメニュー全体が表示されていました。

私たちのサイトがキーボードのみのユーザーのために「タブで表示」される順序を操作する方法はありますか？

現在、ジュニア開発者です。これが簡単な質問であればお詫び申し上げます。あなたが探しているもの

Answer 1

は

<a href="https://www.w3schools.com/" tabindex="2">W3Schools</a> 
<a href="http://www.google.com/" tabindex="1">Google</a> 
<a href="http://www.microsoft.com/" tabindex="3">Microsoft</a> 

tabindex

W3Schoolsの例であるリファレンス：tabindex属性があるとしてw3schools.com/tags/att_global_tabindex.asp

Answer 2

あなたが抱えている問題は、tabindex属性の問題ではありませんDOM内のメニューの位置を修正します。 （また、tabindexesを0または-1を超える値に変更すると、インターフェイスの予想されるタブ順序が狂ってしまうことがあります）。

ここで起こっているのは、メニューが視覚的に隠されていて画面外に配置されていますが、キーボードユーザーやスクリーンリーダーから適切に隠されていないことです。

メニューのCSSを更新する必要があります。メニューが画面外に配置されている場合は、id="slider-menu-nav-list"はdisplay: noneに設定されています。メニューボタンが起動されると次に、#slider-menu-nav-listは、それが現在のようにアクセスできないキーボードだとしてソースコードをいくつかのより多くのを見て、あなたは、実際の<button>要素にあなたのメニューボタンを変更することもありますdisplay: block;

に設定する必要があります<div><span>コンボですので、現在キーボードのユーザーが実際にメニューを開く方法はありません。 （すべてのキーボードユーザーが視覚障害を持っているわけではなく、現在のキーボードフォーカスがどこにあるのかわからないのは難しいかもしれません）。

希望すると便利です。