Uploaded image for project: 'Sakai'
  1. Sakai
  2. SAK-38385

Provide fieldsets for groups of form controls

    Details

    • 19 status:
      Verified
    • Previous Issue Keys:
      A11YTEST-291

      Description

      [New] - 3/13/2018

      [Issue]

      The Meeting Type radio buttons are no explicitly grouped with fieldset and legend elements. Same thing for the other groups of controls of the page:

      • Multiple slots details
      • * Single slot details

      [User Impact]
      Without proper grouping, a person using a screen reader might not be able to understand the relationship of the elements.

      [Code]

      HTML:

      <div class="form-group row ">   
        <label class="col-md-2 form-control-label form-required">   Meeting Type:</label>   
        <div class="col-md-10">      
          <span id="meeting:radios" class="rs">        
              <table id="meeting:meetingType" class="rs">            
                 <tbody>               
                  <tr>                  
                    <td>                     
                       <input name="meeting:meetingType" id="meeting:meetingType:0" value="announcement" onclick="switMeetingType(value);" type="radio">
                       <label for="meeting:meetingType:0"> Open meeting (no sign-up required)</label>                  
                   </td>               
                  </tr>               
                  <tr>                  
                    <td>                     
                       <input name="meeting:meetingType" id="meeting:meetingType:1" value="group" onclick="switMeetingType(value);" type="radio">
                        <label for="meeting:meetingType:1"> Single slot</label>                  
                        </td>               
                     </tr>

      ...

      [User Impact]

      Developers should:- utilize the fieldset element to group together related groups,- provide a legend,- provide a presentation role to the layout table.

      [Compliant code]

      HTML:

      <fieldset class="form-group row ">
        <legend class="col-md-2 form-control-label form-required">   Meeting Type:</legend>
        <div class="col-md-10">
          <span id="meeting:radios" class="rs">
            <table id="meeting:meetingType" class="rs" role="presentation">
              <tbody>
                <tr>
                  <td>
                    <input name="meeting:meetingType" id="meeting:meetingType:0" value="announcement" onclick="switMeetingType(value);" type="radio">
                      <label for="meeting:meetingType:0"> Open meeting (no sign-up required)</label>
                    </td>
                  </tr>
                  <tr>
                    <td>
                      <input name="meeting:meetingType" id="meeting:meetingType:1" value="group" onclick="switMeetingType(value);" type="radio">
                        <label for="meeting:meetingType:1"> Single slot</label>
                      </td>
                    </tr>

      ...

        Gliffy Diagrams

          Attachments

            Activity

              People

              • Assignee:
                kedwar1 Kendra Edwards
                Reporter:
                jonespm Matthew Jones
              • Votes:
                0 Vote for this issue
                Watchers:
                2 Start watching this issue

                Dates

                • Created:
                  Updated:
                  Resolved:

                  Git Source Code