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

Provide a valid label for form fields - Membership tool

    XMLWordPrintable

    Details

    • 11 status:
      Verified

      Description

      The ""Membership"" page of the environment provides a table with several checkboxes that allow the user to make selections and then activate either the ""Unjoin"" or ""Clear Selections"" buttons at the bottom of the page. However, these checkboxes currently rely solely on the <title> attribute to provide their name, and do not utilize the <label> attribute. As such, screen reader users may have difficulty discerning the purpose of the checkboxes.

      <th id=""checkbox"" class=""screenOnly attach"">
      <input id=""selunselallid"" type=""checkbox"" name=""selunselall"" title=""Select all selectable"">
      </th>
      

      Developers must always provide valid labels for form fields in order to ensure that screen reader users will be able to discern the purpose of the form field. In this case, the HTML <label> attribute must be implemented with the ""for"" value matching the ""id"" of the input field. This <label> element can be positioned off-screen with CSS as long as it is not assigned the display:none property. The following code is provided as an example:

      <th id=""checkbox"" class=""screenOnly attach"">
      <label for=""selunselallid"">Select all Selectable</label>
      <input id=""selunselallid"" type=""checkbox"" name=""selunselall"" title=""Select all selectable"">
      </th>
      

      http://qa03-sakai.marist.edu:8080/portal/site/~ssbtest002/tool/5ed4bcf2-f17f-4816-a121-a25a472b7677#A34d1ce597072947ead189c20801911e-HTML

        Gliffy Diagrams

          Attachments

            Activity

              People

              • Assignee:
                ottenhoff Sam Ottenhoff
                Reporter:
                mclare Matt Clare
              • Votes:
                0 Vote for this issue
                Watchers:
                4 Start watching this issue

                Dates

                • Created:
                  Updated:
                  Resolved:

                  Git Source Code