詠嘆調標簽與表格標簽

Question

這兩種屏幕閱讀器在表單上的技術之間是否有任何區別，並且比另一種更受鼓勵：

 <label for="titleInput">Title</label> <input type="text" id="titleInput" name="title" value=""> <div>Title</div> <input type="text" aria-label="Title" name="title" value=""> 

第一種方法始終是進行此設置的方法，但是自從引入WAI-ARIA以來，我一直在考慮使用帶有形式的aria-label是否比使用<label for="x">更好。

Answer 1

區域標簽用於輔助功能。 如果添加了Aria標簽，則在畫外音時（例如，MAC上的cmd + F5或Windows計算機上的JAWS將讀取HTML標簽的aria-label屬性中鍵入的任何內容。此功能對有視覺障礙的用戶非常有用。此處https://developer.mozilla.org/zh-CN/docs/Web/Accessibility/ARIA/ARIA_Techniques/Using_the_aria-label_attribute

Label是HTML標簽，就像<form> or <h1>..<h6>等標簽一樣，當使用標簽時，它會在UI上呈現Label。 例如： <Label>ENTER NAME</Label>

Answer 2

作為經驗法則：如果實際元素可以完成任務，則使用真實元素。 當沒有真正的元素表達語義時，或者當您做的事情很奇怪而無法使用常規元素時，ARIA就是您的后備。

（通常，當您做的事情很奇怪時 ，應該停止做這件事）。

在這種特殊情況下，兩者之間有兩個主要區別。

瀏覽器不會像使用label元素那樣將click目標擴展到div元素 。 單擊標簽將使輸入集中，單擊div則不會。

您現在有兩個標簽 。 div和屬性在兩個不同的位置提供相同的信息。 該屬性不會替換div，因此屏幕閱讀器會讀出div文本和與輸入關聯的標簽。

使用<label> 。 它專門用於將文本與表單控件相關聯。

aria-label旨在提供屏幕閱讀器無法讀取的某些內容的文本描述。 例如，當您使用背景圖像來傳達信息時，而不是使用帶有alt屬性的<img>時（請參閱我之前關於怪異的注釋）。