Loading Developer Playground

Loading ...

Skip to main content
ARIA ROLE•Landmark 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.