HTML Guide

Article lacks heading. Consider using “h2”-“h6” elements to add identifying headings to all articles.

The <article> element can be used to define complete, self-contained compositions of a document, for example blog posts. Consider using a heading element (any of <h2> to </h6>) to present each article.

Example:

<h1>Our blog</h1>
<article>
  <h2>How to validate accessibility</h2>
  <p>Use Rocket Validator for a in-depth scan</p>
</article>
<article>
  <h2>How to monitor sites for accessibility</h2>
  <p>Define schedules in Rocket Validator</p>
</article>

Related W3C validator issues

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

Using role="article" on a <section> element is invalid because article is not a permitted value for the role attribute.

The role attribute in HTML is used to define ARIA roles that describe the purpose of an element for assistive technologies. Only specific, predefined ARIA roles are valid per the WAI-ARIA specification. article is not a recognized ARIA role—use document or other appropriate roles instead, or omit the role attribute entirely. The <article> and <section> elements already have implicit roles, so manual role assignment is rarely necessary or useful for these elements.

Valid uses:

Use <article> without a role attribute for content that is self-contained and intended to be independently distributable or reusable.
Use <section> for grouping related content and omit the role attribute unless a specific ARIA landmark role is needed (such as region).

Example: use <article> for standalone content

<article>
  <h2>News headline</h2>
  <p>News content goes here.</p>
</article>

Example: use <section> without a role attribute for generic grouping

<section>
  <h2>Introduction</h2>
  <p>Section content.</p>
</section>

Consider using the “h1” element as a top-level heading only (all “h1” elements are treated as top-level headings by many screen readers and other tools).

h1
headings

The HTML <h1> to <h6> elements represent headings for the different sections of a document, where <h1> is the highest section and <h6> is the lowest. Headings are specially important on screen readers as they give a quick overview of the contents of the different sections in the web page, so although it’s technically correct (not an error) to use a <h1> in this way:

<section class="about">
  <article>
    <h1>Article heading</h1>
    <p>Lorem</p>
  </article>
</section>

this will raise a warning as it would be preferrable for example to leave the <h1> for the heading of the <section>, and <h2> for the heading of the article, like this:

<section class="about">
  <h1>About heading</h1>
  <article>
    <h2>Article heading</h2>
	<p>Lorem</p>
  </article>
</section>

Section lacks heading. Consider using “h2”-“h6” elements to add identifying headings to all sections.

The <section> element can be used to define sections of a document, like chapters, tabbed content, etc. Consider using a heading element (any of <h2> to </h6>) to present each section. Example:

<h1>All about guitars</h1>
<section>
  <h2>Guitar types</h2>
  <p>Acoustic, electric, classical... we have them all!</p>
</section>
<section>
  <h2>Amplifiers</h2>
  <p>Analog, digital, portable...</p>
</section>

The “article” role is unnecessary for element “article”.

The article role indicates a section of a page that could easily stand on its own on a page, in a document, or on a website, is implicit when using the <article> tag.

This role indicates a section of a page that could easily stand on its own on a page, in a document, or on a website. It is usually set on related content items such as comments, forum posts, newspaper articles or other items grouped together on one page. It can be added to generic elements like <div> to convey this role, for example:

<div role="article">
  <h2>Heading</h2>
  <p>Content...</p>
</div>

Instead of using this role, it’s preferrable to use the native <article> element like this:

<article>
  <h2>Heading</h2>
  <p>Content...</p>
</article>