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

Provide a valid label for form fields - Membership tool

    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

          Zeplin

            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 Integration