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

Provide a valid label for form fields

    Details

    • 19 status:
      Verified
    • 12 status:
      Resolved
    • Previous Issue Keys:
      A11YTEST-240

      Description

      [New Defect]Enter chat message text area does not have any associated label.

      [User Impact]Screen reader users are not able to identify the form fields since screen reader does not render the label. Placeholders are not the alternative for the label and it does not render by every assistive technology.Additionally, speech recognition users also not able to access these form fields.

      [Code]

      <textarea id="topForm:controlPanel:message" value="" placeholder="Enter chat message" rows="3" cols="125"></textarea>

      [Expected behavior]Developers must ensure that all form field should have a proper label which helps assistive technologies users to identify the purpose of form filed can easily access it.Developers need to use <label> element and need to associate label and form field using "id" and "for" attribute.Alternatively, developers can use "floating label" which will be placed in the top left a corner of the form fields when users start typing and available all the time.

      [Sample code]

      <label for="topForm:controlPanel:message"...... >Enter Chat message</label><textarea id="topForm:controlPanel:message" value="" placeholder="Enter chat message" rows="3" cols="125"></textarea>

        Gliffy Diagrams

          Attachments

            Issue Links

              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