The following content can only be created with additional HTML code in OPAL. It can't be created in ILIAS.

Form Fields

The following entry describes the implementation of accessible form fields in general, in relation to labels and error messages.

General Criteria for Form Fields

The following criteria are taken from the checklist:
  • For input fields that capture user data, a semantically unambiguous, language-independent determination of their purpose is possible.
  • Entries on forms do not lead to unexpected context changes.
  • Data entries can be undone or checked and corrected before sending. Successful entries are confirmed.

Input fields of forms should have labels that are linked to the input fields using the for attribute. In addition, related input fields should be grouped using <fieldset> or meaningful headings. This allows screen readers to display forms correctly regardless of the visible display.

Content changes on the page (for example, the display of additional fields) should always be clearly understandable, otherwise they can be distracting or confusing. They should also appear below the corresponding element so that screen readers can read this out next. If, for example, buttons change the language of the entire page or show additional content, there should be a note about this behavior beforehand.

In many cases, users with disabilities have a higher risk of making incorrect entries. It is therefore particularly important for ordering processes and mandatory transactions to offer mechanisms for undoing, checking or correcting entries. To implement this, all entries should be displayed again before submitting and only sent after confirmation. Alternatively, it must be possible to undo the process immediately after saving.

Code example for a form with multiple input fields 

                      
                        <fieldset>
                          <legend>Example form</legend>
                          <div>
                            <input type="radio" name="format" id="txt" value="txt" checked>
                            <label for="txt">Radio Button</label>
                          </div>
                          <div>
                            <input type="checkbox" name="newsletter" id="check_1">
                            <label for="check_1">Checkbox</label>
                          </div>
                        </fieldset>
  • Provide Clear Labels: Each form field should have an associated <label> element. This labelling not only helps sighted users to understand what the field is for, but can also be read by screen readers so that blind or visually impaired users also understand the purpose of the field. 
                          
                          <input type="checkbox" id="notification" name="notify" value="delays">
                          <label for="notification">Notify me of delays</label>

    BITV-Guidelines

    • Error Messages from Form Fields

    The following criteria are taken from the checklist:
    • The form generates error messages if incorrect entries are made.
    • Incorrectly completed fields are identified and the error is described in text form.
    • Error messages are easy to understand and provide information on how to correct errors.

    Incorrectly completed fields should be highlighted and labels with the specific errors should be displayed. This makes it easier for users to correct errors. To ensure that error messages are also accessible to screen readers, they should be provided via live regions (aria-live) or notifications (alertdialog).

    The errors are recognized. Mandatory fields can be labeled with aria-required=“true”. Error messages that are not a label of an input field are linked to the corresponding input field via aria-describedby.

    Error messages provide specific instructions on how to correct errors. If an incorrect format is specified for email addresses or data, an example format should be provided. However, for security reasons, error messages for passwords and login fields must not contain any specific information.

    Code example of a mandatory field with reference to the expected format 

              
          <label for="date">Date (dd-mm-yyyy)</label >
          <input type="text" name="date" id="date" aria-required="true">

    BITV-Guidelines