HTML Guide for role

A button element is not allowed to contain other button elements, or other elements with role=button.

The button role identifies an element as a button to assistive technology such as screen readers. A button is a widget used to perform actions such as submitting a form, opening a dialog, canceling an action, or performing a command such as inserting a new record or displaying information. Adding role="button" tells assistive technology that the element is a button but provides no button functionality

A <form> element has already a form role, so specifying role="form" in it is redundant.

Instead of:

<form role="form">

You can simply write:

<form>

This W3C HTML Validator issue indicates that you have assigned a role="group" attribute to a <fieldset> element. In HTML, the <fieldset> element already has an implicit role of group so it’s redundant and unnecessary to explicitly specify it.

To resolve this issue, you simply need to remove the role="group" attribute from the <fieldset> element.

Example of the Issue

Here is an example of problematic HTML:

<form>
  <fieldset role="group">
      <legend>Personal Information</legend>
      <label for="name">Name:</label>
      <input type="text" id="name" name="name">
      <br>
      <label for="age">Age:</label>
      <input type="number" id="age" name="age">
  </fieldset>
</form>

Fixed HTML

To fix this issue, remove the role="group" attribute from the <fieldset> element:

<form>
  <fieldset>
      <legend>Personal Information</legend>
      <label for="name">Name:</label>
      <input type="text" id="name" name="name">
      <br>
      <label for="age">Age:</label>
      <input type="number" id="age" name="age">
  </fieldset>
</form>

The heading role defines this element as a heading to a page or section, and is implicit in tags <h1> to <h6>.

The heading role indicates to assistive technologies that this element should be treated like a heading. Screen readers would read the text and indicate that it is formatted like a heading.

This ARIA role is only needed to add that role to a generic element like <div>, for example:

<div role="heading" aria-level="1">This is a main page heading</div>

This defines the text in the <div> to be the main heading of the page, indicated by being level 1 via the aria-level attribute. Opt for using the <h1> (thru <h6>) element instead:

<h1>This is a main page heading</h1>

A single <img> element is used to embed an image, so adding the img role to it is redundant.

The ARIA img role can be used to identify multiple elements inside page content that should be considered as a single image. These elements could be images, code snippets, text, emojis, or other content that can be combined to deliver information in a visual manner, for example:

<div role="img" aria-label="Description of the overall image">
  <img src="graphic1.png" alt="">
  <img src="graphic2.png">
</div>

An a element with an href attribute provides a link to a resource, so adding the link role to it is redundant.

When not using semantic HTML for its intended purpose, interactive features must be re-implemented. For example, when role="link" is added to an element, the tab key should enable giving focus to the link and the enter key should execute the link when focused.

A <li> element is used to define an item of a list, so adding the listitem role to it is redundant.

The ARIA listitem role can be used to identify an item inside a list of items. It is normally used in conjunction with the list role, which is used to identify a list container.

<section role="list">
  <div role="listitem">List item 1</div>
  <div role="listitem">List item 2</div>
  <div role="listitem">List item 3</div>
</section>

When possible, you should use the appropriate semantic HTML elements to mark up a list and its list items — <ul> or <ol>, and <li>. For example:

<ul>
  <li>List item 1</li>
  <li>List item 2</li>
  <li>List item 3</li>
</ul>

The main landmark role is used to indicate the primary content of a document. It can be added to an element by using role="main", but instead it’s preferable to just use the <main> element. In that case, it’s unnecessary to make the main role explicit. Examples:

<div role="main">
  <!-- this is a valid way to define a main role -->
</div>

<main>
   <!-- but this is shorter and uses correct semantic HTML  -->
</main>

The navigation landmark role is used to identify major groups of links used for navigating through a website or page content. It can be added to an element that contains navigation links by using role="navigation", but instead it’s preferable to just use the <nav> element. In that case, it’s unnecessary to make the navigation role explicit.

Examples:

<div role="navigation">
  <!-- this is a valid way to define a navigation role -->
</div>

<nav>
   <!-- but this is shorter and uses correct semantic HTML  -->
</nav>

The textbox role, used to identify an element that allows the input of free-form text, is unnecessary for an <input> element of type text when it doesn’t have a list attribute.