Loading Developer Playground

Loading ...

Skip to main content
ARIA ROLELandmark Roles

form

A landmark region that contains a collection of items and objects that, as a whole, combine to create a form. Use when the form is significant enough to be a page landmark (search, login, contact forms).

Landmark RoleConditional LandmarkWCAG 2.2
🎯

Purpose

Identifies significant forms that users need to find quickly (search, contact, login)

📱

HTML Equivalent

<form> becomes a landmark when it has an accessible name

Screen Reader

Announced as "form" landmark when labeled

💻Code Examples

Basic Form Landmark

Creating a search or contact form as a landmark

<!-- Search Form as Landmark -->
<form role="search">
  <label for="search-input">Search</label>
  <input type="search" id="search-input" name="q" />
  <button type="submit">Search</button>
</form>

<!-- Contact Form with Label -->
<form aria-labelledby="contact-heading">
  <h2 id="contact-heading">Contact Us</h2>
  
  <label for="name">Name</label>
  <input type="text" id="name" name="name" required />
  
  <label for="email">Email</label>
  <input type="email" id="email" name="email" required />
  
  <label for="message">Message</label>
  <textarea id="message" name="message" required></textarea>
  
  <button type="submit">Send</button>
</form>

Multiple Forms with Labels

Using aria-label to distinguish multiple forms

<!-- Newsletter Signup -->
<form aria-label="Newsletter signup">
  <label for="email-newsletter">Email Address</label>
  <input type="email" id="email-newsletter" required />
  <button type="submit">Subscribe</button>
</form>

<!-- Login Form -->
<form aria-label="Login">
  <label for="username">Username</label>
  <input type="text" id="username" required />
  
  <label for="password">Password</label>
  <input type="password" id="password" required />
  
  <button type="submit">Log In</button>
</form>

Best Practices

🏷️

Label Your Forms

Use aria-label or aria-labelledby to give the form a descriptive name, especially when multiple forms exist.

When to Use

Use form role for major forms like search, contact, login, or signup. Don't use it for every small form.

Accessible Inputs

All form inputs must have associated labels and proper error handling with aria-invalid and aria-describedby.