Page 32 - HTML5

semantic, as adding a role overrides the native semantics of an element.

Setting an ARIA role and/or aria-* attribute that matches the default implicit ARIA
semantics is unnecessary and is not recommended as these properties are already set
by the browser.

<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>

role="grid"

A grid is an interactive control which contains cells of tabular data arranged in rows and columns,
like a table.

<table role="grid">
<thead>
<!-- etc -->
</thead>
<tbody>
<!-- etc -->
</tbody>
</table>

role="gridcell"

A cell in a grid or treegrid.

<table role="grid">
<thead>
<!-- etc -->
</thead>
<tbody>
<tr>
<td role="gridcell">17</td>

https://riptutorial.com/ 16