Bad value “X” for attribute “href” on element “a”: Illegal character in query: space is not allowed.

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 pipe character | is not permitted in the query component of a URL in the href attribute of an a element.

According to the WHATWG and W3C HTML specifications, URLs in attributes such as href must be valid and properly encoded. The pipe character | is not a valid character in the query string of a URL unless it is percent-encoded as %7C. Failing to encode it will cause validation errors. This is especially important for interoperability and security across browsers and user agents.

Incorrect example (invalid href with pipe):

<a href="https://example.com/search?q=test|demo">Invalid link</a>

Correct example (pipe character encoded):

<a href="https://example.com/search?q=test%7Cdemo">Valid link</a>

Always encode special characters such as | in URLs used within HTML attributes to ensure your documents validate and behave consistently.

Space characters are not permitted in the value of the href attribute; they must be properly percent-encoded.

The href attribute specifies a URL, and URLs must follow specific syntax rules defined by RFC 3986. Spaces and some other characters are considered illegal in URLs. To include a space in the URL, use the percent escape sequence %20 in place of the space character.

Incorrect example with an illegal space in the query string:

<a href="search.html?q=my search">Search for 'my search'</a>

Correct example using percent-encoding for the space:

<a href="search.html?q=my%20search">Search for 'my search'</a>

Replace all spaces in URLs within href attributes with %20 to ensure W3C validation and proper browser behavior.

The href attribute of the a element contains an invalid backslash character, which is not permitted in URLs.

According to the WHATWG HTML living standard, the href attribute must contain a valid URL. URLs use forward slashes (/) for path separators, and backslashes are not allowed as they can cause browsers and validators to misinterpret the address. Backslashes often arise when file paths are copied from Windows environments.

Correct Usage:

• Always use forward slashes / in your URLs.
• Remove any backslashes from href values.

Example of incorrect usage:

<a href="images\picture.jpg">View Picture</a>

Corrected example:

<a href="images/picture.jpg">View Picture</a>

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.