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

Provide visual labels or instructions for user input

    XMLWordPrintable

    Details

    • Previous Issue Keys:
      A11YTEST-341

      Description

      [New] - 3/16/2018

      [Issue]

      "Enter chat message" form field lacks visual label.

      [User Impact]

      Users who see pages without color, low vision users and cognitive disabilities users (for example, a user who do not remember things for a long time) not able to identify these form fields since there are following problems:1. When users start typing into form fields, placeholder goes away, hence, cognitive disabilities users might not understand the form field.2. poor color contrast ratio of placeholder hence, not visible clearly for low vision users.

      [Code]

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

      [Expected behavior]

      Developers must ensure that they provide the visible label on the page for the form fields and properly associate this label with the form field.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.

        Gliffy Diagrams

          Zeplin

            Attachments

              Issue Links

                Activity

                  People

                  Assignee:
                  Unassigned Unassigned
                  Reporter:
                  jonespm Matthew Jones
                  Votes:
                  0 Vote for this issue
                  Watchers:
                  1 Start watching this issue

                    Dates

                    Created:
                    Updated:

                      Git Integration