form-landmark

Description

Forms must be placed within a <form> landmark to ensure they are properly identified and navigable by assistive technologies. If it is a search form, it can be part of the <search> landmark. Landmarks provide a clear structure to webpages, helping users locate and navigate to key sections, such as forms, more efficiently. This rule ensures that forms are semantically associated within an appropriate landmark, enhancing accessibility for users who rely on screen readers or other assistive tools.

The form-landmark rule aligns with WCAG Success Criterion 1.3.1 (Info and Relationships), which states that information, structure, and relationships conveyed through presentation must be programmatically determinable or available in text.

Examples

In the following example, a form is placed outside of the <form> landmark. This violates the form-landmark rule because the form is not programmatically associated within an appropriate landmark.

In the following corrected example, the form is placed within a <form> landmark, ensuring it is properly identified and navigable:

How to fix?

To fix violations of the form-landmark rule, follow these steps:

• Find the form fields on your page that you are testing in this assisted test. Enclose the fields in a wrapper element using the <form> tag to annotate it.
• Use role=”form” on an element that wraps the form fields you are testing via this assisted test.

Reference

WCAG Success Criterion 1.3.1: Info and Relationships