Question

我正在构建一个用户界面，向网站访问者提问并且必须选择答案。答案有时很复杂，我们决定使用多组单选按钮，带有嵌套复选框：每组复选框由其单选按钮控制。（已经付出了很多努力来降低复杂性等等。我们还考虑了其他选项，例如长篇大论，简陋的答案。这不是这个问题的关键所在。）

使用一些JavaScript，我们可以非常轻松地确保控件之间的关系在视觉上清晰。（请注意，以下屏幕截图是模型，图形设计尚未到来。问题和答案也是虚构的。）

enter image description here 我们需要确保我们也为使用辅助技术的人提供正确的体验，例如屏幕阅读器。我查看了可用于增强HTML以允许此操作的各种WAI-ARIA attributes。下面是我用来生成屏幕截图的HTML。

<html>
  <head>
    <script src="http://code.jquery.com/jquery-2.1.1.min.js"></script>
        <style>
            fieldset {width: 300px;}
            .pseudoDisabled {
            background-color: #f4f2f2;
            }
        </style>
    <script>
      $(function(){
        $("fieldset.question").each(function(){
        // if a radio is followed by a fieldset with the right owning-radio, the 
        // fieldset should join in with the radio-button logic 
        $(this).children("input").change(function(){
          if (this.checked){                    
           if($(this).nextAll("fieldset:first").attr("data-owning-radio") === this.id){
             $(this).siblings("fieldset").prop("readonly", false).removeClass("pseudoDisabled");
           } else {
             $(this).siblings("fieldset").prop("readonly", true).addClass("pseudoDisabled");
           }            
         }
       });
     });

     // Ensure that clicking on a nested checkbox activates the matching radio
     $("[data-owning-radio]").each(function(){
       var jThis = $(this);
       var owningRadio = jThis.attr("data-owning-radio");
       jThis.children("input").change(function(){
         $("#" + owningRadio).prop( "readonly", false ).removeClass("pseudoDisabled").prop("checked", true);
         });
         jThis.click(function(){
            $(this).prop("readonly", false).removeClass("pseudoDisabled");
          });
        });

        // We'd have liked to use 'disabled', but then you don't get click events, so 
        // instead we use readonly for the controls that we don't want to be successful
        // and switch to disabled as we submit.
        $("form").submit(function(e) {
        $("fieldset", this).filter(function(){
          return $(this).prop("readonly") == true
        }).prop("disabled", true);          
      });
    });
    </script>

  </head>
  <body>
    <form>
      <div>
        <fieldset name="question1" class="question">
          <legend>Do you pay tax?</legend>
          <input type="radio" name="oq1" id="oq1a1" value="no" />
          <label for="oq1a1">No</label><br />
          <input type="radio" name="oq1" id="oq1a2" value="yes" aria-controls="q1a2checkboxes"/>
          <label for="oq1a2">Yes</label><br />
          <fieldset id="q1a2checkboxes" name="q1a2checkboxes" data-owning-radio="oq1a2">
            <input type="checkbox" name="questiona2" id="oq2a2a" value="incomeTax" />      
            <label for="oq2a2a">I pay income tax</label><Br />
            <input type="checkbox" name="questiona2" id="oq2a2b" value="vat" />
            <label for="oq2a2b">I pay Value Added tax</label><Br />
            <input type="checkbox" name="questiona2" id="oq2a2c" value="local" />  
            <label for="oq2a2c">I pay local tax</label>
          </fieldset>       
        </fieldset>
      </div>
      <input type=submit>
    </form>
  </body>
</html>

正如您所看到的，我使用了aria-controls属性来指出radio和它控制的fieldset之间的关系。这是正确的方法吗？是否足够，还是还需要使用其他各种属性来描述更详细的关系？

到目前为止，我的网络搜索已经产生了大部分非常抽象的标准文档，并没有太多明确的建议，所以任何好的参考也会非常受欢迎。

我应该如何使用WAI-ARIA属性来描述嵌套在无线电中的复选框？

0 个答案: