Fieldset

Legend

• In most cases, this should be a statement, such as ‘Personal details’.
• In some cases, it could be a question, such as ‘What is your current address?’
• If using just 1 fieldset per page, set the content of the legend as the page heading. This means that users of screen readers will only hear the content once.

Labels

• Avoid using generic single-word labels, like Name or ID for field labels.
• The ambiguous nature of these labels can cause users to be confused about their meaning.
• Also, Name or ID fields from other sources might appear on the same screen, causing confusion.
• Instead, always add a modifier to generic single-word labels, like Name or ID. For example:
• Employee name
• Project ID
• Expense type

Hint text

Use hint text only if the field label does not provide enough context to help users interact with the field.

• Write hint text in full sentences with ending punctuation. This makes screen readers pause before reading out any error or warning message after the hint text.
• Do not use hint text that repeats the message in the field label.

Placeholder text

You can use placeholder text if it does not provide critical information for users but instead provides a small amount of additional context.

• Make sure to provide enough context in the field label and hint text so that users can easily interact with the field without the aid of the placeholder text.

Localization

If possible, present the user with an address form that's tailored to their specific country or region. This reduces confusion and the likelihood of errors. You can achieve this by doing one of the following:

• Automatically present a specific address form based on the user's region and language settings.
• Allow the user to select their country or region first, then update the field labels accordingly.

Requirements

Users should be able to: 

• Identify groups of related form fields.
• Understand the purpose of a set of related form fields.

Interactions

Keyboard Interactions

• Tab. Moves focus from the previous interactive element on the page to the first interactive element in the fieldset.
• Pressing tab again moves focus between interactive elements within the fieldset.
• Pressing tab from the last element in the fieldset moves focus to the next interactive element on the page.
• Arrow up and Arrow down. Move focus between radio buttons if the fieldset contains a radio button group.

Design considerations

• A fieldset should be used for a group of related form fields.
• It should be have a clear overall label, describing the purpose of the fieldset.
• All inputs should also have clear, visible labels.

Development considerations

Related form fields should be grouped using the fieldset element, with an overall label provided by a legend. This helps screen reader users to easily identify the purpose of the related form fields.