跳轉到主要內容問題

我負責對網站進行一些輔助功能改進。我試圖做的第一件事是通過創建一個鏈接到href =「＃main-content」來添加一個「跳轉到主要內容」的鏈接，其中「main-content」是包含主要內容的div的id 。添加鏈接本身沒有問題，並且主容器的容器上有合適的id。跳轉到主要內容問題

問題是主菜單。它位於頁面的頂部。隨着用戶向下滾動菜單停留在頁面的頂部和滾動內容的頂部，即菜單具有固定位置並具有高Z指數。

當用戶按照「跳到主內容」鏈接時，頁面會滾動，以便主內容位於瀏覽器的頂部，這正是我期望的。問題是，它的第一部分被漂浮在頁面上方的主菜單所遮擋...

有沒有一種方法可以解決這個問題，而無需使用「always always top」主菜單刪除功能？

2016-11-11 haagel

這確實缺少相當多的背景下，以供讀者解讀。我_ _ _ _ _ _ _ _ _ _ _，但請將[編輯]到您的問題中，您正在使用一個已命名的錨並通過'＃link'跳轉到該錨？ – CodeCaster

@CodeCaster。我編輯了我的問題來澄清。確實，我使用#link，但是使用id的元素（div）。我相信使用標記不再具有HTML5中的名稱屬性。 – haagel

是的，所以，你看過重複嗎？ – CodeCaster

這個問題其實不是offsetting an html anchor to adjust for fixed header的重複，因爲它提到了「可訪問性」。

當屏幕閱讀器讀取您的頁面時，您將遇到與單擊「轉到主內容」鏈接時相同的問題：屏幕閱讀器閱讀的文本可能不會在視覺上出現並被固定位置菜單遮擋。

這將是一個可訪問性問題。

你應該避免「總在最前面」當被屏幕閱讀

來源

2016-11-11 16:27:44 Adam

我有一個hackish的建議（可能會或可能不會取決於具體的環境工作，我不能看）讀這應該覆蓋其他文本菜單：

main:target { 
    padding-top: 3em; 
}

該填充的大小需要根據菜單的高度而改變。不管它是否能滿足你需要的功能，在未看到佈局/設計的情況下都是未知的，但它很快且簡單。它也不（似乎）提出任何可訪問性問題。

我把我的鍵盤友好跳過鏈接Codepen和調整它這樣做（跳過鏈接並不理想，但它的存在表明的想法）：http://codepen.io/aardrian/pen/GNjZQZ

2016-11-16 00:07:36 aardrian

回答