HTML Guide

The autocomplete attribute is used to control if the browser can provide assistance in filling out form field values, and it only makes sense for visible, not hidden, inputs.

It is available on <input> elements that take a text or numeric value as input, <textarea> elements, <select> elements, and <form> elements.

To fix this issue, you can remove the autocomplete attribute from the input element with type=hidden. Here is an example:

<!-- Wrong code -->

<input type="hidden" name="phone" value="12345" autcomplete="off">

<!-- Correct code -->

<input type="hidden" name="phone" value="12345">

The aria-* attributes are part of the WAI-ARIA (Web Accessibility Initiative-Accessible Rich Internet Applications) suite. They are used to improve the accessibility of web pages. However, when we use an input element with a type attribute whose value is hidden, we imply that the element is invisible and has no interaction with the user. Therefore, it doesn’t make sense to add aria-* attributes to it.

To fix this issue, you need to remove the aria-* attributes from the input element with type=hidden. Here is an example:

<!-- Wrong code -->

<input type="hidden" name="referer" value="https://example.com" aria-invalid="false">

<!-- Correct code -->

<input type="hidden" name="referer" value="https://example.com">

The itemscope attribute is a boolean attribute in HTML5, which means it does not take any values. Adding any value (such as true or false) will cause an error. When using boolean attributes, they should either be present or absent. If an attribute like itemscope is present, it is considered true.

Here’s how to correct the error:

Incorrect Usage:

<div itemscope="true">

Correct Usage:

<div itemscope>

Explanation:

• Simply including the itemscope attribute without any value is the correct way to use it.
• If you don’t want to use the itemscope attribute, just remove it from the tag.

Spaces are not permitted in the href value for phone links; the phone number must be a continuous string without spaces or slashes.

The href attribute of an anchor (<a>) element defines the link’s destination. For phone numbers, the proper URI scheme is tel:, not callto:. According to the HTML standard and the WHATWG Living Standard, the phone number should contain only digits and may use plus (+) or hyphen (-) characters for formatting, but it should not include spaces or slashes.

Incorrect HTML:

<a href="callto:07142/ 12 34 5">Call us</a>

Correct HTML:

<a href="tel:0714212345">Call us</a>

With country code and optional formatting:

<a href="tel:+49714212345">Call us</a>

For best compatibility and validation, always use the tel: scheme and ensure the phone number string contains only allowed characters.

The value contact is not a valid option for the autocomplete attribute on an <input> element.

The dialog element does not require or permit a role="dialog" attribute according to HTML standards.

The <dialog> element has an implicit ARIA role of dialog, so adding role="dialog" is redundant and not valid per the specification. Instead, simply use the <dialog> element without an explicit role attribute.

Details:

According to the WHATWG HTML standard and ARIA specification, native <dialog> elements automatically have the correct role. Adding role="dialog" can cause HTML validation errors, as the validator interprets this as a misuse or redundancy.

Correct usage:

<dialog>
  <p>This is a dialog box.</p>
  <button>Close</button>
</dialog>

Incorrect usage (causes validation error):

<dialog role="dialog">
  <p>This is a dialog box.</p>
  <button>Close</button>
</dialog>

Removing the role="dialog" attribute resolves the W3C validation issue while maintaining accessibility.

The type dob is not valid for an input. If you want to build a date picker field, you can use the native HTML input elements with type date, datetime-local, or a generic text input decorated with JavaScript and CSS.

In HTML, the type attribute for the <input> element specifies the type of input control that is to be displayed. The type attribute can have values like text, password, email, date, etc. Using an unsupported or invalid value like dob (which presumably stands for “date of birth”) will cause this validation error.

Here’s an example of how you can correct this issue by using a supported type attribute value for the date of birth input:

<label for="dob">Date of Birth:</label>
<input type="date" id="dob" name="dob">

In this corrected example, we’ve used the type="date" attribute value for the date of birth input. This is a valid type for handling dates in HTML forms. Replace the input type with a supported type according to the specific data you need to capture.

Alternatively you can use a JavaScript library to build a date picker on a generic text input. For example, the popular bootstrap-datepicker library will generate a date picker around a text input.

The validator error occurs when an element such as an a, button, or custom widget includes aria-controls="" (empty) or whitespace-only. The aria-controls attribute takes one or more space-separated id values (IDREFS). Each referenced id must exist exactly once in the same document. Leaving it empty violates the ARIA and HTML requirements and provides no usable relationship for assistive technologies.

Why this matters:

• Accessibility: Screen readers rely on aria-controls to announce relationships between controls and controlled regions (e.g., a toggle and its panel). An empty value misleads AT or adds noise.
• Standards compliance: HTML and ARIA require at least one non-whitespace id. Empty values cause validation failures.
• Robustness: Incorrect references can confuse scripts and future maintainers, and break behavior when IDs change.

How to fix it:

• Only add aria-controls when the element truly controls another region (show/hide, sort, update).
• Ensure the controlled element has a unique id.
• Set aria-controls to that id (or multiple space-separated IDs).
• Keep the reference in sync if IDs change.
• If nothing is controlled, remove aria-controls entirely.

Examples

Invalid: empty aria-controls (triggers the error)

<a href="#" aria-controls="">Toggle details</a>

Valid: control a single region

<div id="details-panel" hidden>
  Some details...
</div>
<a href="#details-panel" aria-controls="details-panel">Toggle details</a>

Valid: control multiple regions (space-separated IDs)

<section id="filters" hidden>...</section>
<section id="results" hidden>...</section>
<button type="button" aria-controls="filters results">Show filters and results</button>

Valid: remove when not needed

<a href="#">Toggle details</a>

Minimal complete document with proper usage

<!doctype html>
<html lang="en">
  <head>
    <meta charset="utf-8">
    <title>aria-controls Example</title>
  </head>
  <body>
    <button type="button" aria-controls="info" aria-expanded="false">Toggle info</button>
    <div id="info" hidden>
      Extra information.
    </div>
    <script>
      const btn = document.querySelector('button');
      const panel = document.getElementById(btn.getAttribute('aria-controls'));
      btn.addEventListener('click', () => {
        const expanded = btn.getAttribute('aria-expanded') === 'true';
        btn.setAttribute('aria-expanded', String(!expanded));
        panel.hidden = expanded;
      });
    </script>
  </body>
</html>

Tips:

• Use aria-controls for functional relationships (control affects content), not just visual proximity.
• Combine with aria-expanded when toggling visibility to convey state.
• Verify that every id in aria-controls exists and is unique; avoid dynamic mismatches created by templating or component reuse.

An <a> element has been found with an invalid href attribute, containing more than one # adjacent character.

The # is used to separate the fragment part of an URI (typically used to indicate a section within a document). For example, this is a valid link to a URI containing a fragment:

<a href="https://example.com/faqs#pricing">pricing</a>

The next example is invalid because it contains two adjacent # characters, so that the fragment part would be #pricing instead of pricing:

<a href="https://example.com/faqs##pricing">pricing</a>

Spaces in the URL fragment are invalid; encode them or remove them (e.g., use %20 or hyphens/underscores).

The href attribute must contain a valid URL. When using a fragment identifier (the part after #), it must follow URL syntax rules: no unescaped spaces. Fragments usually reference an element’s id. An element’s id must be unique and is case-sensitive; while spaces aren’t allowed in id values, many authors accidentally mirror text with spaces in the fragment. Use hyphens or underscores in ids and match the fragment, or percent-encode reserved characters. Prefer readable, dash-separated ids for accessibility and shareable links.

For example, instead of href=”#My Section”, use href=”#my-section” and set id=”my-section” on the target. If you must preserve spaces in a generated URL, encode them as %20, but it’s better to avoid spaces entirely in ids.

HTML Examples

Invalid: reproduces the validator error

<!doctype html>
<html lang="en">
  <head>
    <title>Fragment with space</title>
  </head>
  <body>
    <a href="#My Section">Go to section</a>

    <h2 id="My Section">My Section</h2>
  </body>
</html>

Fixed: use a valid fragment and id

<!doctype html>
<html lang="en">
  <head>
    <title>Valid fragment</title>
  </head>
  <body>
    <a href="#my-section">Go to section</a>

    <h2 id="my-section">My Section</h2>
  </body>
</html>

Alternatively, encoding the space also passes validation, though less ideal as the id would be invalid because it contains spaces:

<a href="#My%20Section">Go to section</a>
<h2 id="My Section">My Section</h2>