如何爲某些HTML頁面部分的屏幕閱讀器設置優先級？

目前，該頁面有3個主要部分：頭，側邊欄和內容：

enter image description here

屏幕閱讀器閱讀頭起初，然後欄最後搜索結果。

不幸的是，有視力問題的用戶等待很長時間，而程序將讀取所有側欄內容（導致側欄包含多個過濾器）。如何爲搜索結果設置更大的優先級？導致搜索結果應該在側邊欄內容之前閱讀。

這將是巨大的，如果有人提供給我約我能做些什麼來提高HTML頁面的訪問級別一個HTML教程：

2015-06-10 bmalets

這只是局部的答案，但使用HTML5元素，如頁眉，頁腳，導航，放在一邊，文章，部分將幫助你的事業。另外，請確保在適當的div元素上使用aria標誌性角色（role =「search」，role =「navigation」，role =「main」等）。 – cfnerd

請問你爲什麼試圖做這些事情？ – unobf

@unobf因爲我有搜索過濾器的大名單和用戶想聽到的第一 – bmalets

不要試圖隱藏屏幕閱讀器用戶的內容，他們會想要訪問該內容。相反，您可以將地標添加到您的內容區域。然後屏幕閱讀器將能夠直接跳轉到頁面的相關部分，包括結果，但仍然能夠在需要時進入其他控件。

如果你可以使用HTML5，分別使用<header>，<aside>或<nav>然後<main>元素爲你的頭，過濾器和側導航和搜索結果。

如果您不能使用HTML5，那麼將role =「banner」，role =「complementary」，role =「navigation」和role =「main」添加到這些區域的環繞元素。

正如你還應該添加標題結構文檔（屏幕閱讀器可以通過這些太導航）最佳實踐和跳過鏈接（近視，只有鍵盤用戶）

2015-06-10 19:17:31 unobf

一個常見的事情是有一個「跳過導航」鏈接，這是一個錨定參考，直到您的真實內容開始。這使屏幕閱讀器可以跳過。

<a href="#main" class="skip-navigation">Skip Navigation</a> 

... 

<h1 id="main">Search Results</h1>

如果你願意，你可以使用屏幕閱讀器仍然可以選擇的風格，但對普通瀏覽器不可見。

.skip-navigation { 
    position: absolute; 
    left: -5000px; 
    top: 0; 
    width: 1px; 
    height: 1px; 
    overflow: hidden; 
}

2015-06-10 16:55:39 Brad

感謝@Brad，但怎麼樣'div'標籤？如果包含'skip-navigation'類，它會作爲鏈接跳過嗎？ – bmalets

HTML5提供了標籤，比如'header'，'aside'和'article'，它爲網頁增加了語義。隨着跳過鏈接，這些也可以用於更好的可訪問頁面。 – Pratap

@bmalets這裏的'skip-navigation'類僅用於造型。你不需要使用它。整個行動在於你有一個鏈接到頁面參考。 – Brad

問題是固定"aria-live"屬性格式

屏幕閱讀器在每個內容更改後都會讀取「aria-live」標籤。因此，如果用戶改變搜索形式的文本 - 屏幕閱讀器將閱讀帶有Ajax加載搜索結果的「aria-live」標籤的內容。

2015-06-25 15:45:58 bmalets

回答