Web可訪問性和h1-h6標題 - 所有內容都必須在這些標籤下？

Question

在我們的Web應用程序的許多頁面的頂部，我們有錯誤消息和通知，'保存'和其他按鈕，然後，然後我們的h1標籤與內容標題。在使Web應用程序可訪問時，是否可以接受像頂級結構標記一樣的內容，就像我們在這裏做的那樣？

Answer 1

是的（你可以把東西放在它們上面）。 H只是表示標題。這是一個題目與我猜想相關的問題。

我唯一需要注意的是，H2不應該高於H1，H3不應該高於H2。但我不認爲這是一個真正的規則。網站有菜單，警告，通知。將它們放在其他內容之上是可以接受的。只要您的內容按照邏輯順序排列，我不會看到它會如何影響輔助功能。看看CSS關閉的頁面。它看起來合乎邏輯嗎？這是可訪問性中最重要的部分。

儘管有些人確實多花了一些功夫，並將菜單作爲標記中的最後一項，並使用CSS將其重新置頂。就我個人而言，我發現該解決方案反制。菜單依然很重要，它屬於頁面的頂部。

Answer 2

是的，只要考慮它的順序是用戶將獲得的信息。所以，如果你只是做了一個操作，聽起來好像是一個好主意，首先得到與它有關的任何消息。如果這是一個通知出現在與你正在做的事情無關的任何頁面上，我不會把它放在上面，因爲它可能有點奇怪。 您也可以使用不使用樣式的文本瀏覽器，它應該看起來像帶有適當標題的文檔。

Answer 3

作爲屏幕閱讀器用戶，我不喜歡主標題上方的內容。通常我通過標題導航，所以會錯過錯誤信息。更好的解決方案是在錯誤消息上面輸出h1標題，然後讓其他標題保持完整，給你兩個h1標題。

Answer 4

標題標籤用於指示下方內容的層次結構。你應該只有一個h1標籤，它應該是第一個出現在你的頁面上的內容（這通常是網站的名稱）。另外，在向下瀏覽不同層次的內容時，您不應該跳過標題標籤。

就你的情況而言，只要它在html中的順序正確，你仍然可以使用CSS來定位h1標籤上方的項目。

Answer 5

我認爲標題上方的元素被JavaScript使用。在這種情況下，最好是由JavaScript創建，不包含在頁面的源代碼中。

要回到您的原始問題，最好的辦法是在頁面的底部。但是，如果它們使用CSS「display：none;」隱藏或「可見度：隱藏的」屬性，那麼他們不會被大多數（也許是所有的）屏幕閱讀器或許多其他輔助技術看到，所以不應該是一個問題。我寫了一個相當詳細的explanation of why accessibility technology ignores such elements。

當然，如果有人禁用CSS，事情看起來會非常混亂。如果頁面上的內容即使在CSS和/或JavaScript被禁用時也可以使用，那麼將這些元素放在頁面底部至少可以減少混亂。