3.1 Required fields are not marked programmatically (H)

FIGURE 3.1: Required fields highlighted on Generic page

3.1.1 WCAG 1.3.1 (A) - Desktop, Mobile, iPad

The form fields within the ‘Send a message’ form on the Faulty of Arts page use ‘Required’ text to visually let users know which fields are mandatory. This information is not however communicated programmatically for screen reader users. It is only when the user attempts to submit the form that an error message indicating that a required field has been missed appears on screen.

Users with disabilities might not enter all the information that is required as inline error messages do not appear, which could result in errors.

3.1.2 Code Snippet

<input data-val="true" data-val-required="The Name field is required." id="Name" name="Name" placeholder="Enter Name" role="textbox" type="text" value="" class="">

3.1.3 Recommendation

Ensure that required fields are marked both visually and programmatically.

Visually, consider including a statement at the start of the application which is repeated on each page and states that all the fields are mandatory apart from those marked as ‘Optional’ (or vice versa).

Use the HTML required attribute or aria-required=true attribute to communicate using a screen reader if a field is required.

Provide helpful and informative instructions to avoid input errors, including allowed values and expected format and ensure this information is presented to the user visually and announced by a screen reader.

For more information on best practices regarding forms and question

---