屏幕閱讀器友好的方式來標記一個複選框/單選按鈕，這是已經使用標籤可點擊

Question

如果我想在用戶點擊相關文本時填充複選框/收音機，那麼我傾向於包裝它在一個標籤如

HTML

<fieldset class="inline"> 
     <label for="radio-inline-1" class="block-label"> 
      <input type="radio" value="Yes" name="radio-inline-group" id="radio-inline-1"> 
      Yes 
    </label> 
    <label for="radio-inline-2" class="block-label selected"> 
      <input type="radio" value="No" name="radio-inline-group" id="radio-inline-2"> 
      No 
    </label> 
</fieldset> 

所以...我怎麼現在標籤的複選框/收音機集的問題以合規的莊園？

這是「無論」的HTML + CSS的情況？例如

HTML

<p class="pretendLabel">Do you like compliant code?</p> 
<fieldset class="inline"> 
     <label for="radio-inline-1" class="block-label"> 
      <input type="radio" value="Yes" name="radio-inline-group" id="radio-inline-1"> 
      Yes 
    </label> 
    <label for="radio-inline-2" class="block-label selected"> 
      <input type="radio" value="No" name="radio-inline-group" id="radio-inline-2"> 
      No 
    </label> 
</fieldset> 

還是我使用一個額外的標籤有兩個「爲」 S，拆開包裝標籤或其他什麼東西？

我的擔心主要是屏幕閱讀器沒有正確地將問題和潛在答案關聯起來，而沒有「for」或假裝標籤上的其他直接關聯。

Answer 1

使用帶有圖例元素的字段集。

<fieldset class="inline"> 
    <legend>Do you like compliant code?</legend>