假設你有一個表格:
<form action="/action_page.php"/span>>
<label for="fname">/span>名字。 </label><br>
< input type="text"/span> id="fname" name="fname" value="John"/span>> <br>>
<label for="lname">last name。 </label><br>
< input type="text"/span> id="lname" name="lname" value="Doe">> <br><br>
< input type="submit" value="submit">
</form>/span>
如何使其無障礙,使無障礙螢屏閱讀器在表格上出現時能讀出表格名稱 "這是我關于客戶的表格:"? 如果Bootstrap有其sr-only類,應該是
<form action="/action_page.php">
<legend class="sr-only">/span>這是我關于客戶的表單。 </legend>這是我關于客戶的表格:</legend>
<label for="fname">/span>名字。 </label><br>
< input type="text"/span> id="fname" name="fname" value="John"/span>> <br>>
<label for="lname">last name。 </label><br>
< input type="text"/span> id="lname" name="lname" value="Doe">> <br><br>
< input type="submit" value="submit">
</form>/span>
是否也應該添加<fieldet>?
謝謝你。
uj5u.com熱心網友回復:
對于像 "這是我的關于客戶的表單 "這樣一個相當籠統的描述,最有效的可能不是<legend>,而是簡單地在表單開始之前的標題或段落。
需要記住的<legend>的一個非常重要的特征是,它的文本在每個欄位的標簽之前都是重復的。
這一點非常強大,因此必須非常謹慎地使用。
這個重復的特征是在每個欄位的標簽之前重復的。
這種重復功能意味著legend的文本必須非常簡潔和精確,這意味著它只應該用于非常密切相關的欄位。
它通常用于單選按鈕選項,就像這樣: 在這里,作為一個螢屏閱讀器,當你導航到單選按鈕時,你會聽到 "性別為男性"、"性別為女性 "和 "性別為其他"。這很快速、高效,而且提醒 "性別 "是相當有用的。 如果 在這里,你有一個相當長的問題在每個答案之前重復,所以作為一個螢屏閱讀器用戶,你不能真正做到快速和高效,例如在有時間限制的考試中,可能會稍微增加一些障礙。這個問題最好放在一個標題中,在用箭頭鍵閱讀時只讀一次。
請注意,當只用tab鍵導航時,它將被完全跳過,但這通常不是一個大問題,因為大多數用戶并不只依賴tab鍵。
回到你的案例,你的文本 "這是我關于客戶的表單 "其實也不短,尤其是它非常籠統。這個欄位集可以覆寫很多欄位,甚至可能在整個表單中保留。
因此,在每個欄位前重復這段話可能會讓人厭煩而不是有用。
標籤:<fieldset>
<legend>Gender</legend>
<input id="m1" type="radio">/>。 <label for="m1"/span>> 男性</label>
<input id="m2" type="radio">/> <label for="m2"/span>> 女性</label>。
<input id="m3" type="radio">/>。 <label for="m3"/span>> Other</label>
</fieldset>/span>
<legend>的文本很長,或者不是真正的幾個欄位的區域,那么它在每個欄位前重復的事實可能很快就會變得更加令人討厭而不是真正有用。
例如,將它用于一個多選題是一個壞主意,因為它的長度:<!--不好的例子-->
<fieldset>
<legend>當第一個網路可及性指南第1版已經發布時?
<input id="m1" type="radio"/> <label for="m1"/span>> 1995年</label>
<input id="m2"/span> type="radio"/span>/> <label for="m2"> 1998年</label>
<input id="m3" type="radio">/> <label for="m3"/span>> 2001年</label>>
</fieldset>/span>
<fieldset>
<h1>當第一個網路可及性指南第1版已經發布時?</h1>/span>
<input id="m1" type="rocket"/> <label for="m1"/span>> 1995年</label>
<input id="m2"/span> type="radio"/> <label for="m2"> 1998年</label>
<input id="m3" type="radio">/> <label for="m3"/span>> 2001年</label>>
</fieldset>/span>
