在努力使網站更易于訪問時，我遇到了一個關于大多數網站上都可用的“回傳頂部”按鈕的問題。我必須找到一個解決方案來滾動到頂部，然后將鍵盤焦點設定到頁面的頂部，這樣用戶就可以從頂部開始再次使用 Tab 鍵和導航。
首先，我直接在正文之后（以及在可訪問的“跳轉到內容”鏈接之前）添加了一個鏈接，該鏈接使用以下代碼隱藏：
<body>
<a id="hidden-top-of-the-page-link" tabindex="-1"></a>
<a class="skip-to-content-link" tabindex="0" href="#main-content">Skip to content</a>
然后在我的“到頂部”按鈕功能中，我在呼叫滾動事件后使這個隱藏的鏈接成為焦點。
$("#to_top").on("click", function () {
$("html, body").animate({scrollTop: $("html").offset().top}, 500);
$("#hidden-top-of-the-page-link").focus();
});
這個解決方案似乎很好用，但感覺很hacky。我真正想做的是“重置”頁面上的鍵盤位置，并想知道是否有人知道這樣做的好方法/最佳實踐方法。
提前謝謝大家。
注意：首先查看如何將焦點設定在頁面頂部的問題，但所有答案都集中在滾動上，這不是我在這里需要幫助的。
uj5u.com熱心網友回復：
我不知道有什么方法可以使頁面表現得好像它是新加載的，鍵盤焦點位于頂部（除了強制實際頁面重繪 ，我不建議這樣做）。
但是，頂部已經有一個很好的元素可以將焦點移至“跳到內容”鏈接（WCAG 2.4.1）。“回傳頂部”元素可以是一個簡單的鏈接，href="#skipID"其中“skipID”是“跳轉到內容”鏈接上的 ID。
<body>
<a id="skipID" class="skip-to-content-link" tabindex="0" href="#main-content">Skip to content</a>
...
<a href="#skipID">Go to top</a>
這將使瀏覽器處理滾動并移動鍵盤焦點。您不必撰寫任何 javascript，它會洗掉您的“空”鏈接，其唯一目的是放置鍵盤焦點的地方。如果您保留了“空”鏈接，那么螢屏閱讀器用戶仍然可以導航到該鏈接（不是通過，TAB因為您擁有，tabindex="-1"而是使用螢屏閱讀器“下一個 DOM 元素”鍵，這通常是downArrow鍵）并且他們會聽到“鏈接”但沒有其他與之相關的文字。那將是一個令人困惑的情況。
順便說一句，作為鍵盤用戶，我從不使用頁面上提供的“轉到頂部”鏈接，主要是因為我必須導航到該元素，這通常是 DOM 中的最后一件事。如果我在 DOM 中那么低，我可以TAB再多做幾次，無論如何我都會回到頂端。或者我使用“將焦點放在地址欄上”快捷鍵（alt D代表 firefox 和 chrome）并TABBING從那里開始。
轉載請註明出處，本文鏈接：https://www.uj5u.com/shujuku/336854.html
標籤：javascript html 查询 用户界面 可达性
上一篇：將按鈕放置在容器底部顫動