HTML Checking for Large Sites

The alert role can be used to tell the user an element has been dynamically updated. Screen readers will instantly start reading out the updated content when the role is added. The element <ul> doesn’t accept this kind of role, consider using other element like <p> or <div>.

The alert role is used to communicate an important and usually time-sensitive message to the user. When this role is added to an element, the browser will send out an accessible alert event to assistive technology products which can then notify the user about it. The alert role is most useful for information that requires the user’s immediate attention.

Learn more about the alert ARIA role:

• W3C: WAI-ARIA - alert role
• MDN: ARIA alert role
• MDN: Using the alert role

A <div> element is using ARIA attributes, but its role has not been defined. ARIA defines semantics that can be applied to elements, with these divided into roles (defining a type of user interface element) and states and properties that are supported by a role. Authors must assign an ARIA role and the appropriate states and properties to an element during its life-cycle, unless the element already has appropriate ARIA semantics (via use of an appropriate HTML element). Examples:

<!-- This div uses ARIA but its role is not clear, so it's invalid. -->

<div aria-expanded="true">...</div>

<!-- This div defines clearly its role, so it's valid. -->

<div role="navigation" aria-expanded="true">...</div>

<!-- Nav elements have an implicit navigation role so we don't need the role attribute. -->

<nav aria-expanded="true">...</nav>

Read about Using ARIA: Roles, states and properties.

The element X is not allowed as a child element of Y. For example, a <ul> element cannot have a <div> child element.

An </a> end tag has been found to violate nesting rules. <a> tags can’t include other <a> tags inside. Most probable cause is an unclosed <a> tag, like in this example:

<a href="one.html">Page 1

<a href="two.html">Page 2</a>

An end tag </strong> has been found in an incorrect place within the document, violating nesting rules. A common case is closing it before closing other nested tags, for example:

<!-- This line is incorrect as the <strong> tag was closed before the nested <a> tag -->

<strong><a href="#">link</strong></a>

<!--- This line is OK as every end tag respects the nesting rules -->

<strong><a href="#">link</a></strong>

An <a> tag can’t include other <a> tags inside. Most probable cause is an unclosed <a> tag, like in this example:

<a href="one.html">Page 1

<a href="two.html">Page 2</a>

The <ul> element is used to define unordered lists, where each element must be contained within a <li> element, like in this example:

<ul>

<li>first element</li>

<li>second element</li>

<li>third element</li>

</ul>

Ensure that there’s no content inside the <ul> element that is not contained within a <li> element.

Sometimes this error comes when trying to give a title to the list, for example:

<ul>

Fruits

<li>Apple</li>

<li>Orange</li>

</ul>

Instead, that title text should be outside the list, like:

<span>Fruits</span>

<ul>

<li>Apple</li>

<li>Orange</li>

</ul>

Other times, this can come as the concatenation of <li> elements which results in something like:

<ul>

<li>First item</li>

&nbsp;

<li>Second item</li>

&nbsp;

<li>Third item</li>

</ul>

Note how in this case that &nbsp; used to join the <li> is causing the problem, as it’s content that is not contained by a <li> element, as required by the <ul> element.

Learn more:

• HTML Living Standard: the ul element
• HTML Living Standard: the li element

A <label> tag can’t be used inside an <a> tag. Consider using other tags like <span>.

A <label> element cannot contain other <label> as a descendant. Check for nested elements or closing tags that may have been misinterpreted, for example:

<label>name</label></label>

The <caption> element specifies the caption (or title) of a table. It’s not allowed for a <caption> to contain another table.