Best practices

• Only ask for essential information
• Place the easiest fields to complete first
• Make it clear to users why each question is asked
• Break longer forms into multiple steps
• Group related fields together as fieldsets and use titles for the groups
• Use the correct input type for the information required, for example, number, date,or email
• Use labels with every input group
• Use legend across a range of inputs, such as radios and checkboxes
• Stack radios and checkboxes vertically
• Do not use placeholder tex,t as it disappears when the user starts typing, which can cause problems for users with memory conditions or when reviewing answers
• Do not ask for the same information twice in the same session (WCAG 2.2 — Guideline 3.3 Input Assistance)
• Do not pre-select radio buttons and checkboxes

Accessibility

• Build forms using the correct HTML tag
• Forms must meet AA accessibility standards
• Forms must work with keyboard control
• Ensure that when an item gets keyboard focus, it is at least partially visible
• Use browser default functionality
• HTML tags display functionality based on the browse
• Use aria-label attribute to label interactive elements

                                                        
                                                        
                                                            <button aria-label="Close" onclick="myDialog.close()">
                                                          <svg>
                                                            ...
                                                          </svg>
                                                        </button>
                                                        
                                                            

Typography

1. Use heading styles, H1 to H6, inside forms to section off content if required
2. Pages with one field per page can style labels and legends as H1, but use the correct markup
3. Headings above groups of inputs, such as checkboxes and radios, are legends
4. Use body copy text style for labels, helper text and error messages
5. Use sentence case for labels, helper text and error messages

Labels

1. Associate labels with the respective field
2. Keep labels between one to four words
3. Place labels adjacent to the radio button
4. Use labels as a page heading if there is only one question per page
5. Do not place labels underneath a radio button as this may affect visually impaired users and the flow of the page

Label as a heading

A 'label' can be used if there's only one question per page.

Label as a heading example

                                                        
                                                        
                                                            <h1>
                                                          <label for="reference-number">Reference number</label>
                                                        </h1>
                                                        
                                                            

Legends

1. The legend has specific styling, for example font size, depending on its hierarchy on the page
2. Use legend as a page title if there is only one question on the page
3. If there is a page title (heading level-1 or H1), style the legend as the next level down, for example heading level-2 or H2

Resizable legends

Legend font sizes can vary depending on their hierarchy.

Legends as a heading example

                                                        
                                                        
                                                            <legend>
                                                            <h1>
                                                            Select an option
                                                            </h1>
                                                        </legend>
                                                        
                                                            

Helper Text

Add helper text below the legend or labels to provide supplemental information.

For visual consistency and readability, keep helper text to one or two lines. Concise helper text helps users with cognitive impairments.

Use aria-describedby to provide further instructions with form fields.

An example of helper text

Use helper text to provide supplemental information.

                                                        
                                                        
                                                            <label for="email-address">Your email address</label>
                                                        
                                                        <p id="helper-text">We'll only use this to reply to your message</p>
                                                        
                                                        <input aria-describedby="helper-text" id="email-address" name="email-address" type="text">
                                                        
                                                            

Optional text

Use the '(Optional)' suffix on a label if you require the user for optional information. Don't mark mandatory fields with an asterisk.

An example of how to use an '(Optional)' suffix