WAI-ARIA HTML。如何強制2個div被讀出爲一個？

我是ARIA的新手，我無法將兩個div（都是文本）合併爲一個讀數。佈局是一個像表格一樣的具有兩行文本標籤的表格。這個想法是將整行讀出來，而不是逐個標籤。我發現詠歎調標籤只適用於角色設置（如按鈕），但你會得到額外的單詞讀出。任何人有想法？WAI-ARIA HTML。如何強制2個div被讀出爲一個？

HTML例如：

<div id="block"> 
    <div id="foo" class="half" style="float:left">Date of birth</div> 
    <div id="bar" class="half" style="float:right">1/01/1970</div> 
</div>

標籤1將讀出：「出生1970年1月1日的日期」。

來源

2015-06-22 Alex

嘗試使用'span'代替，如果視覺表示需要，則爲屏幕添加'display：block'。 –

詳細闡述上述評論時，Web語義對於可訪問性非常重要。使用'div'標籤可以區分文檔的某個區域。爲了您的目的，您正在尋找* prasing *元素。所以'span'可能更適合你。 –

謝謝，似乎沒有區別。詠歎調標籤仍然被忽略。 – Alex

首先讓我說，你真的不需要這樣做。屏幕閱讀器用戶習慣於處理這樣的HTML結構，並且可以輕鬆解決這個問題。

不過，如果你想這樣做：

創建一個屏幕外的風格。

.offscreen { 
    border: 0; 
    clip: rect(0 0 0 0); 
    clip: rect(0, 0, 0, 0); 
    height: 1px; 
    margin: -1px; 
    overflow: hidden; 
    padding: 0; 
    width: 1px; 
    position: absolute; 
}

然後使用aria-hidden隱藏視覺內容並添加屏幕文字。

<div id="block"> 
    <div aria-hidden="true" id="foo" class="half" style="float:left">Date of birth</div> 
    <div aria-hidden="true" id="bar" class="half" style="float:right">1/01/1970</div> 
    <div class="offscreen">Date of birth: January 1, 1970</div> 
</div>

來源

2015-06-22 19:06:04 unobf

WAI-ARIA HTML。如何強制2個div被讀出爲一個？

回答

相關問題