HTML Guide for tabpanel

Bad value “tabpanel” for attribute “role” on element “article”.

The role="tabpanel" attribute is not permitted on the article element according to W3C and WHATWG HTML specifications.

The role attribute helps describe the purpose of an element for assistive technologies. The value tabpanel indicates a section of a tab interface and should be used only with elements suited to that role—typically generic containers like div or section, not article. The article element has its own landmark meaning and should not be used for widgets such as tab panels.

Correct usage:

Use role="tabpanel" on a div or section element.
Use role="tablist" on the container of the tabs.
Use role="tab" on each tab.

Incorrect:

<article role="tabpanel" id="panel1">
  Tab panel content here.
</article>

Correct:

<div role="tabpanel" id="panel1">
  Tab panel content here.
</div>

Full example:

<!DOCTYPE html>
<html lang="en">
<head>
  <title>Tabpanel Example</title>
</head>
<body>
  <div role="tablist">
    <button role="tab" aria-controls="panel1" aria-selected="true">Tab 1</button>
    <button role="tab" aria-controls="panel2" aria-selected="false">Tab 2</button>
  </div>
  <div role="tabpanel" id="panel1">
    Tab panel content here.
  </div>
  <div role="tabpanel" id="panel2" hidden>
    Tab panel 2 content here.
  </div>
</body>
</html>

Replace the article element with a div or section when assigning the tabpanel role to ensure your markup is valid and accessible.