Web輔助功能 - Tab鍵順序？

我的任務是通過a11y項目清單。（http://a11yproject.com/checklist.html）爲那些誰不知道是什麼。Web輔助功能 - Tab鍵順序？

我注意到，在我們的網站（www.adn.com）上，當您通過網站瀏覽時，它會在完成左欄菜單之後，纔會顯示文章內容。

有沒有一些方法來操縱我們的網站是「僅供鍵盤使用者」的「Tabbed through」的順序？

行業新手，目前是初級開發人員。道歉，如果這是一個簡單的問題。

2017-04-11 Josh Berry

你正在尋找的是tabindex

W3Schools的例子

<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>

參考：w3schools.com/tags/att_global_tabindex.asp

來源

2017-04-11 19:45:39

完美，謝謝！ –

歡迎您 –

您遇到的問題是不是在tabIndex問題，因爲tabindex屬性是糾正菜單在DOM中的位置。（也將tabindexes更改爲0或-1以外的值可能會使接口的預期標籤順序變得非常糟糕）。

這裏發生的事情是，通過將菜單定位在屏幕外面，該菜單在視覺上隱藏起來，但是它沒有被鍵盤用戶/屏幕閱讀器充分隱藏。

您需要更新菜單的CSS，以便當它位於屏幕外時，id="slider-menu-nav-list"設置爲display: none。然後，當菜單按鈕被激活，#slider-menu-nav-list應設置爲display: block;

通過源代碼的一些展望，你還必須改變你的菜單按鈕爲實際<button>元素，因爲它是目前鍵盤不能使用，因爲一<div><span>組合，所以目前沒有辦法讓鍵盤用戶實際打開菜單。（並非所有鍵盤用戶都是盲人，並且無法查看當前鍵盤焦點的位置可能令人沮喪）。

希望這會有所幫助！

來源

2017-04-14 12:29:29 scottohara

所有的信息，謝謝！看起來我們還有一些工作要做。謝謝。這個A11Y項目非常有趣。與屏幕閱讀器一起工作一直是壓倒性的概念，尊重那些頻繁使用/依靠他們的人。 –

Web輔助功能 - Tab鍵順序？

回答

相關問題