我想像這樣創建一個復選框組：
如何確保以正確的方式設定它以使其完全可訪問？
我現在有這樣的事情：
<div role="group" aria-labelledby="group_head" aria-describedby="group__description">
<h1 id="group_head">Heading 1</h1>
<div >Descriptive text about this checkbox group</div>
<ul>
<li>
<input type="checkbox" name="checkbox_1" id="checkbox_1" aria-describedby="description_1">
<label for="checkbox_1">Checkbox 1</label>
<p id="description_1">This is the descriptive text explaining the checkbox 1</p>
</li>
<li>
<input type="checkbox" name="checkbox_2" id="checkbox_1" aria-describedby="description_2">
<label for="checkbox_1">Checkbox 2</label>
<p id="description_2">This is the descriptive text explaining the checkbox 2</p>
</li>
<li>
<input type="checkbox" name="checkbox_1" id="checkbox_3" aria-describedby="description_3">
<label for="checkbox_1">Checkbox 3</label>
<p id="description_1">This is the descriptive text explaining the checkbox 3</p>
</li>
</ul>
</div>
或者在jsfiddle
uj5u.com熱心網友回復：
這看起來已經很不錯了。分組的優點是它的可訪問名稱僅在用戶進入組時才被宣布一次。
它的描述 ( aria-describedby) 不是可訪問名稱的一部分，因此當用戶導航到第一個復選框（通過選項卡）時，螢屏閱讀器不會宣布它。
我的建議是將它們組合在一起，在語意上正確<fieldset>和<legend>.
或者，您可能只想將描述的 ID 添加到組的 Labels:<div role="group" aria-labelledby="group_head group__description">中。
<fieldset>
<legend>
<h1>Heading 1</h1>
<p>Descriptive text about this checkbox group</p>
</legend>
<ul>
<li>
<input type="checkbox" name="checkbox_1" id="checkbox_1" aria-describedby="description_1">
<label for="checkbox_1">Checkbox 1</label>
<p id="description_1">This is the descriptive text explaining the checkbox 1</p>
</li>
<li>
<input type="checkbox" name="checkbox_2" id="checkbox_2" aria-describedby="description_2">
<label for="checkbox_2">Checkbox 2</label>
<p id="description_2">This is the descriptive text explaining the checkbox 2</p>
</li>
<li>
<input type="checkbox" name="checkbox_1" id="checkbox_3" aria-describedby="description_3">
<label for="checkbox_3">Checkbox 3</label>
<p id="description_1">This is the descriptive text explaining the checkbox 3</p>
</li>
</ul>
</fieldset>轉載請註明出處，本文鏈接：https://www.uj5u.com/qita/445782.html