HTML Validation

The “longdesc” attribute on the “iframe” element is obsolete. Use a regular “a” element to link to the description.

About This HTML Issue

The issue you’re encountering comes from using the longdesc attribute on an iframe element. The longdesc attribute was historically used to provide a URL to a long description of the content. However, it is now considered obsolete and should not be used. Instead, you should use a regular a (anchor) element to provide a link to the description.

Here’s a short guide on how to fix this issue:

Original Code with `longdesc`

<iframe src="video.html" longdesc="description.html" title="Video"></iframe>

Updated Code with Regular `a` Element

The recommended approach is to use a regular a element to provide a link to the description, like in the following example:

<iframe src="video.html" title="Video"></iframe>

<p>
  <a href="description.html">Long description of the video content</a>
</p>

Explanation

Original Code: The longdesc attribute is used on the iframe element, which is now obsolete.
Updated Code: We remove the longdesc attribute and provide an external link using the a element to guide users to the description.

Learn more:

→ MDN: iframe
→ MDN: iframe deprecated attributes
→ HTML Spec: obsolete, non-conforming features

Last reviewed: September 13, 2024

Was this guide helpful?

Find issues like this automatically

Rocket Validator scans thousands of pages in seconds, detecting HTML issues across your entire site.

Start Free Trial See Pricing

Ready to validate your site?

Find Accessibility and HTML issues in your large sites, in seconds. Get your site scanned by Axe Core and W3C Validator with just one click.

Pro Trial Free Trial

Reading time

1 min read

Category

HTML Validation

Engine

W3C Validator

Last reviewed

September 13, 2024

Resources

Related W3C Validator Issues (70)

The element “iframe” must not appear as a descendant of the “a” element.

An element with the attribute “role=button” must not appear as a descendant of the “a” element.

An element with the attribute “tabindex” must not appear as a descendant of the “a” element.

tabindex
a

Attribute “seamless” not allowed on element “iframe” at this point.

Bad start tag in “iframe” in “noscript” in “head”.

There is an iframe tag inside a noscript tag that is itself inside the head section of the HTML document. This is not allowed because an iframe cannot be nested inside the head section.

To fix this issue, you may move the noscript section that contains the iframe tag outside of the head section, and ensure that it is placed within the body section of the HTML document.

For example, this is invalid HTML because the head section cannot contain iframe elements:

<!DOCTYPE html>
<html lang="en">
  <head>
    <title>My webpage</title>
    <noscript>
      <p>Please enable JavaScript to view this website</p>
      <iframe src="https://example.com/"></iframe>
    </noscript>
<!-- Other meta tags and styles go here -->

  </head>
  <body>
<!-- Rest of your webpage content goes here -->

  </body>
</html>

Moving the noscript inside the body section fixes the issue, as that’s where iframe elements belong:

<!DOCTYPE html>
<html lang="en">
  <head>
    <title>My webpage</title>
<!-- Other meta tags and styles go here -->

  </head>
  <body>
    <noscript>
      <p>Please enable JavaScript to view this website</p>
      <iframe src="https://example.com/"></iframe>
    </noscript>
<!-- Rest of your webpage content goes here -->

  </body>
</html>

Bad value “allow-storage-access-by-user-activation” for attribute “sandbox” on element “iframe”: The string “allow-storage-access-by-user-activation” is not a valid keyword.

Bad value “callto:X” for attribute “href” on element “a”: Illegal character in scheme data: 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.

Bad value “” for attribute “aria-controls” on element “a”: An IDREFS value must contain at least one non-whitespace character.

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.

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

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>

Bad value X for attribute “href” on element “a”: Illegal character in path segment

Ready to validate your sites?
Start your free trial today.