Accessible forms and fields
Just like any other page or piece of content, forms should be written in plain English, should be structured logically with the correct heading markup and should use good colour contrast. However, there are a few guidelines specific to forms and fields that you should pay attention to.
Fields should be clearly labelled
Field labels and questions should be clearly written without internal jargon. For simple fields like name or date of birth, a simple label such as ‘First name’ or ‘Date of birth’ is fine. For more complex fields, framing the label as a question typically lets you add more detail. Instead of ‘Funding outcomes’, something like ‘Which of the following outcomes do you expect this funding will help you meet?’ is more useful and descriptive.
The input field and the field label should be clearly grouped together so that it’s obvious to users which label applies to which field. The question/label, help text and input field should all be left aligned.
Field labels must not disappear
If you’re using placeholder text within a field, make sure this isn’t the only label or source of help text. This is because it will disappear once a user enters the field to input information, making it difficult for some users to remember what information needs to go in which field.
Our input field component has a clear label above the field as well as space for help text below the label if needed.
Don't hide important information in a tooltip
If users need the information within help text to complete the field, don’t hide it in a tooltip. Our form components display help text directly underneath the field label or question.
Help text should be written clearly and concisely, only providing the information a user needs to complete the field. You can add a link to another location if necessary (avoid linking to additional pages just for general background information), but it must open in a new tab or window so the user doesn’t lose their progress.
Inform users about errors
When designing for Scottish Enterprise sites, validation should trigger when a user submits their form or continues to the next page. If validation returns an error, users should be taken to an error summary that lists all the errors on the page clearly and simply. This summary should provide jump links to the fields that contain errors.
If there are errors on the page, the page title should update to start ‘Error:’ so it’s the first thing someone using a screen reader will be told.