A landmark region that contains a collection of items and objects that, as a whole, combine to create a form.
Using the semantically correct HTML element <form>
implies default ARIA semantics, meaning role=form
is not required as you should not apply a contrasting role to an element that is already semantic, as adding a role overrides the native semantics of an element.
<form action="">
<fieldset>
<legend>Login form</legend>
<div>
<label for="username">Your username</label>
<input type="text" id="username" aria-describedby="username-tip" required />
<div role="tooltip" id="username-tip">Your username is your email address</div>
</div>
<div>
<label for="password">Your password</label>
<input type="text" id="password" aria-describedby="password-tip" required />
<div role="tooltip" id="password-tip">Was emailed to you when you signed up</div>
</div>
</fieldset>
</form>
You would use role=form
on non-semantic elements (not recommended, invalid)
<div role=form>
<input type="email" placeholder="Your email address">
<button>Sign up</button>
</div>