HTML Guides

URLs follow strict syntax rules defined by RFC 3986, which does not permit literal space characters anywhere in a URI. When the W3C validator encounters a space in the href attribute of an <a> element — particularly within the query string (the part after the ?) — it flags it as an illegal character.

While most modern browsers will silently fix malformed URLs by encoding spaces for you, relying on this behavior is problematic for several reasons:

Standards compliance: The HTML specification requires that href values contain valid URLs. A space makes the URL syntactically invalid.
Interoperability: Not all user agents, crawlers, or HTTP clients handle malformed URLs the same way. Some may truncate the URL at the first space or reject it entirely.
Accessibility: Screen readers and assistive technologies may struggle to interpret or announce links with invalid URLs.
Link sharing and copy-pasting: If a user copies the link from the source or if the URL is used in an API or redirect, the unencoded space can cause breakage.

To fix this issue, replace every literal space character in the URL with %20. Within query string values, you can also use + as a space encoding (this is the application/x-www-form-urlencoded format commonly used in form submissions). If you're generating URLs dynamically, use your programming language's URL encoding function (e.g., encodeURIComponent() in JavaScript, urlencode() in PHP, or urllib.parse.quote() in Python).

Examples

Incorrect — spaces in the query string

<ahref="https://example.com/search?query=hello world&lang=en">Search</a>

The space between hello and world is an illegal character in the URL.

Correct — space encoded as `%20`

<ahref="https://example.com/search?query=hello%20world&lang=en">Search</a>

Correct — space encoded as `+` in query string

<ahref="https://example.com/search?query=hello+world&lang=en">Search</a>

Using + to represent a space is valid within query strings and is commonly seen in URLs generated by HTML forms.

Incorrect — spaces in the path and query

<ahref="https://example.com/my folder/page?name=John Doe">Profile</a>

Correct — all spaces properly encoded

<ahref="https://example.com/my%20folder/page?name=John%20Doe">Profile</a>

Generating safe URLs in JavaScript

If you're building URLs dynamically, use encodeURIComponent() for individual parameter values:

constquery="hello world";

consturl="https://example.com/search?query="+encodeURIComponent(query);

// Result: "https://example.com/search?query=hello%20world"

</script>

Note that encodeURIComponent() encodes spaces as %20, which is safe for use in any part of a URL. Avoid using encodeURI() for query values, as it does not encode certain characters like & and = that may conflict with query string syntax.

An element with “role=cell” must be contained in, or owned by, an element with “role=row”.

role
cell

The ARIA specification defines a strict ownership hierarchy for table-related roles. A role="cell" element must be "owned by" an element with role="row", meaning it must either be a direct child of that element or be associated with it via the aria-owns attribute. This mirrors how native HTML tables work: a <td> element must live inside a <tr> element. When you use ARIA roles to build custom table structures from non-table elements like <div> or <span>, you are responsible for maintaining this same hierarchy manually.

The expected nesting order for an ARIA table is:

role="table" — the outermost container
role="rowgroup" (optional) — groups rows together, like <thead>, <tbody>, or <tfoot>
role="row" — a single row of cells
role="cell" or role="columnheader" / role="rowheader" — individual cells

When a role="cell" element is placed directly inside a role="table" or any other container that isn't role="row", screen readers lose the ability to announce row and column positions. Users who rely on table navigation shortcuts (such as moving between cells with arrow keys) will find the table unusable. This is not just a validation concern — it directly impacts whether people can access your content.

This issue commonly arises when developers add intermediate wrapper elements for styling purposes and accidentally break the required parent-child relationship, or when they forget to assign role="row" to a container element.

How to Fix

Ensure every element with role="cell" is a direct child of an element with role="row". If you have wrapper elements between the row and cell for layout or styling, either remove them, move the role assignments, or use aria-owns on the row element to explicitly claim ownership of the cells.

Examples

Incorrect — Cell Without a Row Parent

This triggers the validation error because role="cell" elements are direct children of the role="table" container, with no role="row" in between.

<divrole="table">

<divrole="cell">Name</div>

<divrole="cell">Email</div>

</div>

Incorrect — Intermediate Wrapper Breaking Ownership

Here, a styling wrapper sits between the row and its cells. Since the <div> without a role is not a role="row", the cells are not properly owned.

<divrole="table">

<divrole="row">

<divclass="cell-wrapper">

<divrole="cell">Row 1, Cell 1</div>

<divrole="cell">Row 1, Cell 2</div>

</div>

Correct — Cells Directly Inside Rows

Each role="cell" is a direct child of a role="row" element, forming a valid ARIA table structure.

<divrole="table"aria-label="Team members">

<divrole="row">

<divrole="columnheader">Name</div>

<divrole="columnheader">Email</div>

</div>

<divrole="row">

<divrole="cell">Alice</div>

<divrole="cell">alice@example.com</div>

</div>

<divrole="row">

<divrole="cell">Bob</div>

<divrole="cell">bob@example.com</div>

</div>

Correct — Using Rowgroups

You can optionally group rows with role="rowgroup", similar to <thead> and <tbody>. The cells still must be direct children of their rows.

<divrole="table"aria-label="Quarterly results">

<divrole="rowgroup">

<divrole="row">

<divrole="columnheader">Quarter</div>

<divrole="columnheader">Revenue</div>

</div>

<divrole="rowgroup">

<divrole="row">

<divrole="cell">Q1</div>

<divrole="cell">$10,000</div>

</div>

<divrole="row">

<divrole="cell">Q2</div>

<divrole="cell">$12,500</div>

</div>

Correct — Using Native HTML Instead

If your content is genuinely tabular data, consider using native HTML table elements instead of ARIA roles. Native tables have built-in semantics and require no additional role attributes.

<table>

<tr>

<th>Email</th>

</tr>

<tr>

<td>Alice</td>

<td>alice@example.com</td>

</tr>

</table>

Native HTML tables are always preferable when they suit your use case. The first rule of ARIA is: if you can use a native HTML element that already has the semantics you need, use it instead of adding ARIA roles to a generic element.

Bad value X for attribute “href” on element “a”: Percentage ("%") is not followed by two hexadecimal digits.

url encoding

Percent-encoding (also called URL encoding) is the mechanism defined by RFC 3986 for representing special or reserved characters in URLs. It works by replacing a character with a % sign followed by two hexadecimal digits that correspond to the character's byte value. For example, a space becomes %20, an ampersand becomes %26, and a literal percent sign becomes %25. When a browser or parser encounters % in a URL, it expects the next two characters to be valid hexadecimal digits so it can decode them back to the original character.

If the parser finds a % that is not followed by two hexadecimal digits, it cannot decode the sequence, and the URL is considered invalid. The W3C validator flags this as a bad value for the href attribute.

Common causes

A literal % that wasn't encoded. This is the most frequent cause. For instance, a URL containing a percentage value like 50% in a query string — the % must be written as %25.
Truncated percent-encoded sequences. A sequence like %2 is incomplete because it only has one hex digit instead of two.
Invalid hex characters after %. A sequence like %GZ is invalid because G and Z are not hexadecimal digits (valid hex digits are 0–9 and A–F).
Copy-pasting URLs from non-web sources. URLs pasted from documents, emails, or spreadsheets may contain unencoded special characters.

Why this matters

Broken links. Browsers may interpret the malformed URL differently than intended, leading users to the wrong page or a 404 error.
Standards compliance. The WHATWG URL Standard and the HTML specification require that href values contain valid URLs. Malformed URLs violate these standards.
Accessibility. Screen readers and assistive technologies rely on well-formed URLs to provide accurate navigation information to users.
Interoperability. While some browsers attempt error recovery on malformed URLs, behavior is not guaranteed to be consistent across all browsers and tools.

How to fix it

Encode literal % as %25. If the % is meant to appear as part of the URL's content (e.g., in a query parameter value), replace it with %25.
Complete any truncated sequences. If you intended a percent-encoded character like %20, make sure both hex digits are present.
Use proper URL encoding functions. In JavaScript, use encodeURIComponent() for query parameter values. In server-side languages, use the equivalent encoding function (e.g., urllib.parse.quote() in Python, urlencode() in PHP).

Examples

Literal `%` not encoded

<ahref="https://example.com?width=48%">48% width</a>

<ahref="https://example.com?width=48%25">48% width</a>

Truncated percent-encoded sequence

<ahref="https://example.com/path%2file">Download</a>

<ahref="https://example.com/path%2Ffile">Download</a>

Invalid hexadecimal characters

<ahref="https://example.com/search?q=%XYdata">Search</a>

<ahref="https://example.com/search?q=%25XYdata">Search</a>

Multiple unencoded `%` in a URL

<ahref="https://example.com?min=10%&max=90%">Range</a>

<ahref="https://example.com?min=10%25&max=90%25">Range</a>

Bad value X for attribute “srcset” on element “img”: Must contain one or more image candidate strings.

srcset
img

The srcset attribute allows you to specify multiple image sources so the browser can choose the most appropriate one based on the user's device characteristics, such as screen resolution or viewport width. When you include a srcset attribute on an <img> element, the HTML specification requires it to contain one or more comma-separated image candidate strings. Each string consists of a URL followed by an optional descriptor — either a width descriptor (e.g., 200w) or a pixel density descriptor (e.g., 2x).

This validation error typically appears when:

The srcset attribute is empty (srcset="")
The srcset attribute contains only whitespace (srcset=" ")
The value contains syntax errors such as missing URLs, invalid descriptors, or incorrect formatting
A templating engine or CMS outputs the attribute with no value

This matters because browsers rely on the srcset value to select the best image to load. An empty or malformed srcset means the browser must fall back entirely to the src attribute, making the srcset attribute pointless. Additionally, invalid markup can cause unexpected behavior across different browsers and undermines standards compliance.

How to fix it

Provide valid image candidate strings. Each entry needs a URL and optionally a width or pixel density descriptor, with entries separated by commas.
Remove the attribute entirely if you don't have multiple image sources to offer. A plain src attribute is perfectly fine on its own.
Check dynamic output. If a CMS or templating system generates the srcset, ensure it conditionally omits the attribute when no responsive image candidates are available, rather than outputting an empty attribute.

Examples

❌ Empty `srcset` attribute

<imgsrc="/img/photo.jpg"alt="A sunset over the ocean"srcset="">

This triggers the error because srcset is present but contains no image candidate strings.

❌ Malformed `srcset` value

<imgsrc="/img/photo.jpg"alt="A sunset over the ocean"srcset="1x, 2x">

This is invalid because each candidate string must include a URL. Descriptors alone are not valid entries.

✅ Using pixel density descriptors

<img

src="/img/photo-400.jpg"

alt="A sunset over the ocean"

srcset=" /img/photo-400.jpg 1x, /img/photo-800.jpg 2x ">

/img/photo-400.jpg 1x,

/img/photo-800.jpg 2x

Each candidate string contains a URL followed by a pixel density descriptor (1x, 2x). The browser picks the best match for the user's display.

✅ Using width descriptors with `sizes`

<img

src="/img/photo-400.jpg"

alt="A sunset over the ocean"

srcset=" /img/photo-400.jpg 400w, /img/photo-800.jpg 800w, /img/photo-1200.jpg 1200w "

/img/photo-400.jpg 400w,

/img/photo-800.jpg 800w,

/img/photo-1200.jpg 1200w

sizes="(max-width: 600px) 400px, (max-width: 1000px) 800px, 1200px">

Width descriptors (e.g., 400w) tell the browser the intrinsic width of each image. The sizes attribute then tells the browser how large the image will be displayed at various viewport sizes, allowing it to calculate the best source to download.

✅ Removing `srcset` when not needed

<imgsrc="/img/photo.jpg"alt="A sunset over the ocean">

If you only have a single image source, simply omit srcset altogether. The src attribute alone is valid and sufficient.

✅ Single candidate in `srcset`

<img

src="/img/photo.jpg"

alt="A sunset over the ocean"

srcset="/img/photo-highres.jpg 2x">

Even a single image candidate string is valid. Here, the browser will use the high-resolution image on 2x displays and fall back to src otherwise.

The “tabs” element is a completely-unknown element that is not allowed anywhere in any HTML content.

tabs

This document appears to be written in Arabic. Consider adding “dir="rtl"” to the “html” start tag.

The dir attribute specifies the base text direction for the content of an element. When a document is written in a right-to-left language like Arabic, Hebrew, Persian (Farsi), or Urdu, the browser needs to know that text should flow from right to left. Without this attribute, browsers default to left-to-right (ltr) rendering, which can cause a range of problems: text alignment may be incorrect, punctuation can appear in the wrong place, and the overall page layout may look broken or confusing to native readers.

This matters for several important reasons:

Accessibility: Screen readers and other assistive technologies rely on the dir attribute to correctly announce and navigate content. Without it, the reading experience for users relying on these tools may be disorienting or incorrect.
Visual correctness: Elements like lists, tables, form labels, and navigation menus will mirror their layout in RTL mode. Without dir="rtl", these elements default to LTR positioning, which feels unnatural for RTL language speakers.
Bidirectional text handling: Documents often contain mixed-direction content (e.g., Arabic text with embedded English words, numbers, or brand names). The Unicode Bidirectional Algorithm (BiDi) uses the base direction set by dir to correctly resolve the ordering of these mixed runs of text.
Standards compliance: The WHATWG HTML Living Standard recommends that authors set the dir attribute to match the language of the document, and the W3C Internationalization guidelines strongly encourage it for RTL languages.

How to fix it

Add dir="rtl" to your <html> start tag. If you haven't already, also include the appropriate lang attribute for the specific language you're using.

For Arabic:

<htmldir="rtl"lang="ar">

For Hebrew:

<htmldir="rtl"lang="he">

For Persian:

<htmldir="rtl"lang="fa">

Examples

❌ Missing `dir` attribute on an Arabic document

<!DOCTYPE html>

<htmllang="ar">

<head>

<metacharset="utf-8">

<title>مرحبا بالعالم</title>

</head>

<body>

<h1>مرحبا بالعالم</h1>

<p>هذه صفحة تجريبية باللغة العربية.</p>

</body>

</html>

The browser will render this page with a left-to-right base direction. The heading and paragraph text may appear left-aligned, and any mixed-direction content (like embedded numbers or English words) may be ordered incorrectly.

✅ Correct: `dir="rtl"` added to the `<html>` tag

<!DOCTYPE html>

<htmldir="rtl"lang="ar">

<head>

<metacharset="utf-8">

<title>مرحبا بالعالم</title>

</head>

<body>

<h1>مرحبا بالعالم</h1>

<p>هذه صفحة تجريبية باللغة العربية.</p>

</body>

</html>

Now the browser knows to render the page right-to-left. Text will be right-aligned by default, scroll bars will appear on the left, and the overall layout will feel natural for Arabic readers.

Handling mixed-direction content within a page

If your RTL document contains sections in a left-to-right language, use the dir attribute on individual elements to override the base direction locally:

<p>قام المستخدم بزيارة <spandir="ltr">www.example.com</span> اليوم.</p>

This ensures the URL renders in the correct left-to-right order while the surrounding Arabic text flows right-to-left. Setting dir="rtl" on the <html> element establishes the correct default, and you only need per-element overrides for embedded LTR content.

The “o:p” element is a completely-unknown element that is not allowed anywhere in any HTML content.

Bad value X for attribute “srcset” on element “source”: Must contain one or more image candidate strings.

The <source> element is used inside <picture>, <audio>, or <video> elements to specify alternative media resources. When used inside a <picture> element, the srcset attribute is required and must contain one or more comma-separated image candidate strings. Each image candidate string consists of a URL and an optional descriptor — either a width descriptor like 400w or a pixel density descriptor like 2x.

This validation error typically occurs when:

The srcset attribute is present but empty (srcset="").
The attribute value contains only whitespace.
The value is malformed or contains syntax errors (e.g., missing URLs, invalid descriptors).
A dynamic templating system or CMS outputs the attribute with no value.

Why this matters

Browsers rely on the srcset attribute to select the most appropriate image to display based on the user's device capabilities, viewport size, and network conditions. An empty or invalid srcset means the browser cannot perform this selection, potentially resulting in no image being displayed at all. This degrades the user experience, harms accessibility (screen readers and assistive technologies may encounter unexpected behavior), and violates the HTML specification as defined by the WHATWG living standard.

How to fix it

Provide at least one valid image URL in the srcset attribute.
Optionally add descriptors — use width descriptors (w) when combined with the sizes attribute, or pixel density descriptors (x) for fixed-size images.
If you have no image to provide, remove the <source> element entirely rather than leaving srcset empty.
Check dynamic output — if a CMS or templating engine generates the srcset value, add a conditional check to omit the <source> element when no images are available.

Examples

❌ Empty `srcset` attribute

<sourcesrcset=""type="image/webp">

<imgsrc="photo.jpg"alt="A sunset over the ocean">

</picture>

This triggers the error because srcset is present but contains no image candidate strings.

❌ Invalid descriptor syntax

<sourcesrcset="photo.webp 400"type="image/webp">

<imgsrc="photo.jpg"alt="A sunset over the ocean">

</picture>

This is invalid because 400 is not a recognized descriptor — it must be 400w or a density descriptor like 2x.

✅ Single image candidate

<sourcesrcset="photo.webp"type="image/webp">

<imgsrc="photo.jpg"alt="A sunset over the ocean">

</picture>

A single URL without a descriptor is valid and serves as the default 1x candidate.

✅ Multiple candidates with width descriptors

<source

srcset="photo-small.webp 400w, photo-medium.webp 800w, photo-large.webp 1200w"

sizes="(max-width: 600px) 400px, (max-width: 1000px) 800px, 1200px"

type="image/webp">

<imgsrc="photo.jpg"alt="A sunset over the ocean">

</picture>

This provides three image candidates with width descriptors, allowing the browser to choose the best match based on the viewport and display density.

✅ Multiple candidates with pixel density descriptors

<sourcesrcset="photo.webp 1x, photo-2x.webp 2x"type="image/webp">

<imgsrc="photo.jpg"alt="A sunset over the ocean">

</picture>

Pixel density descriptors tell the browser which image to use based on the device's pixel ratio — 1x for standard displays and 2x for high-DPI (Retina) screens.

✅ Removing the source element when no image is available

If your application dynamically generates the srcset value and sometimes has no image to provide, omit the <source> element entirely:

<imgsrc="photo.jpg"alt="A sunset over the ocean">

</picture>

This is valid because the <img> element inside <picture> serves as the required fallback and can stand alone.

Bad value X for attribute “href” on element “a”: Illegal character in path segment. Space is not allowed.

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

The URL standard (defined by WHATWG) specifies a strict set of characters allowed in each part of a URL. A space character is not among them. When the validator encounters a literal space in an href value, it reports the error "Illegal character in scheme data: space is not allowed." This applies to spaces anywhere in the URL — the path, query string, fragment, or even after the scheme (e.g., https:).

While most modern browsers are forgiving and will attempt to fix malformed URLs by encoding spaces automatically, relying on this behavior is problematic for several reasons:

Standards compliance: Invalid URLs violate the HTML specification, and markup that depends on browser error-correction is fragile and unpredictable.
Accessibility: Assistive technologies, such as screen readers, may not handle malformed URLs the same way browsers do. This can result in broken links for users relying on these tools.
Interoperability: Non-browser consumers of your HTML — search engine crawlers, link checkers, email clients, RSS readers, and APIs — may not perform the same auto-correction, leading to broken links or missed content.
Copy-paste and sharing: When users copy a malformed URL from the source, the space can cause the link to break when pasted into other applications.

How to fix it

The fix depends on where the space appears:

In the path or fragment: Replace each space with %20. For example, /my file.html becomes /my%20file.html.
In the query string: You can use %20 or, if the value is part of application/x-www-form-urlencoded data, + is also acceptable for spaces within query parameter values. However, %20 is universally safe.
Programmatically: Use encodeURI() in JavaScript to encode a full URL (it preserves structural characters like /, ?, and #). Use encodeURIComponent() to encode individual query parameter values. On the server side, use your language's equivalent URL-encoding function.

If you're writing URLs by hand in HTML, simply find every space and replace it with %20. If URLs are generated dynamically (from a database, CMS, or user input), ensure your templating or server-side code encodes them before inserting into the markup.

Examples

Invalid — space in the path

<ahref="https://example.com/docs/My Report.pdf">Download Report</a>

The literal space between "My" and "Report" triggers the validator error.

Fixed — space encoded as `%20`

<ahref="https://example.com/docs/My%20Report.pdf">Download Report</a>

Invalid — space in a query parameter

<ahref="https://example.com/search?q=hello world">Search</a>

Fixed — space encoded in the query string

<ahref="https://example.com/search?q=hello%20world">Search</a>

Invalid — multiple spaces in different URL parts

<ahref="https://example.com/my folder/page two.html?ref=some value#my section">Link</a>

Fixed — all spaces encoded

<ahref="https://example.com/my%20folder/page%20two.html?ref=some%20value#my%20section">Link</a>

Encoding URLs with JavaScript

If you're building URLs dynamically, use the built-in encoding functions rather than doing manual string replacement:

// encodeURI encodes a full URL but preserves :, /, ?, #, etc.

consturl=encodeURI("https://example.com/docs/My Report.pdf");

// Result: "https://example.com/docs/My%20Report.pdf"

// encodeURIComponent encodes a single value (for query params)

constquery=encodeURIComponent("hello world");

// Result: "hello%20world"

</script>

Note that encodeURI() is appropriate for encoding a complete URL, while encodeURIComponent() should be used for individual components like query parameter values — it encodes characters such as / and ? that have structural meaning in a URL.

Bad value X for attribute “datetime” on element “time”: The literal did not satisfy the time-datetime format.

The <time> HTML element represents a specific period in time or a duration. Its datetime attribute translates human-readable text into a machine-readable format, enabling browsers, search engines, and assistive technologies to reliably parse and understand temporal data. When the datetime value doesn't match one of the accepted formats, the machine-readable purpose of the element is defeated — tools cannot interpret the date or time, which undermines features like search engine rich results, calendar integration, and accessibility enhancements for screen readers.

The HTML specification defines several valid formats for the datetime attribute. Here are the most commonly used ones:

Format	Example	Description
Date	`2024-03-15`	Year, month, day
Month	`2024-03`	Year and month only
Year	`2024`	Valid year
Yearless date	`03-15`	Month and day without year
Time	`14:30` or `14:30:00`	Hours and minutes (seconds optional)
Date and time	`2024-03-15T14:30`	Date and time separated by `T`
Date and time with timezone	`2024-03-15T14:30Z` or `2024-03-15T14:30+05:30`	With UTC (`Z`) or offset
Duration (precise)	`PT1H30M`	ISO 8601 duration
Duration (approximate)	`P2Y6M`	Years, months, etc.
Week	`2024-W12`	ISO week number

Common mistakes that trigger this error include:

Using slashes instead of hyphens: 03/15/2024 instead of 2024-03-15
Using informal date formats: March 15, 2024 or 15-03-2024
Omitting the T separator between date and time: 2024-03-15 14:30
Using 12-hour time with AM/PM: 2:30 PM instead of 14:30
Providing incomplete values: 2024-3-5 instead of 2024-03-05 (months and days must be zero-padded)

Examples

Invalid: Slash-separated date

<timedatetime="03/15/2024">March 15, 2024</time>

Valid: ISO 8601 date format

<timedatetime="2024-03-15">March 15, 2024</time>

Invalid: Missing `T` separator and using AM/PM

<timedatetime="2024-03-15 2:30 PM">March 15 at 2:30 PM</time>

Valid: Date-time with `T` separator and 24-hour time

<timedatetime="2024-03-15T14:30">March 15 at 2:30 PM</time>

Invalid: Informal time string

<timedatetime="half past two">2:30 PM</time>

Valid: Simple time value

<timedatetime="14:30">2:30 PM</time>

Invalid: Non-standard duration

<timedatetime="1 hour 30 minutes">1.5 hours</time>

Valid: ISO 8601 duration

<timedatetime="PT1H30M">1.5 hours</time>

Valid: Date-time with timezone offset

<p>The event starts at <timedatetime="2024-03-15T14:30-05:00">2:30 PM ET on March 15</time>.</p>

Valid: Using only the month

<p>Published in <timedatetime="2024-03">March 2024</time>.</p>

Remember that the human-readable text content between the <time> tags can be in any format you like — it's only the datetime attribute value that must follow the specification. This lets you display dates in a user-friendly way while still providing a standardized machine-readable value.

Bad value “” for attribute “target” on element “area”: Browsing context name must be at least one character long.

target
area

Bad value “” for attribute “max” on element “input”: The empty string is not a valid floating point number.

max
input

Bad value X for attribute “src” on element “source”: Illegal character in path segment: space is not allowed.

Bad value X for attribute “src” on element “img”: Illegal character in path segment. Space is not allowed.

Bad value “mailto: X” for attribute “href” on element “a”: Illegal character after “ilto:”. Space is not allowed.

An “li” element that is a descendant of a “ul”, “ol”, or “menu” element with no explicit “role” value, or a descendant of a “role=list” element, must not have any “role” value other than “listitem”.

Examples

Invalid: unencoded characters in href

Valid: percent-encoded URL

Invalid: unresolved template syntax

Valid: resolved or corrected URL

HTML examples

Invalid: using the <icon> element

Valid: using a <link> element for a favicon

Valid: displaying an icon inline with <img>

Valid: displaying an icon inline with <span> and CSS

Invalid example

Valid examples

HTML examples

Invalid: square brackets in the URL

Valid: percent-encoded square brackets

Example with the issue

How to fix it

How to fix it

Examples

Invalid: square brackets in a mailto URL

Fixed: remove the brackets

Invalid: square brackets in a query string

Fixed: percent-encode the brackets

Invalid: unprocessed template syntax in rendered HTML

Fixed: ensure the template renders a valid URL

HTML examples

Invalid: space in the query string

Valid: space encoded as %20

Invalid example

Fixed example

Examples

Incorrect — spaces in the query string

Correct — space encoded as %20

Correct — space encoded as + in query string

Incorrect — spaces in the path and query

Correct — all spaces properly encoded

Generating safe URLs in JavaScript

How to Fix

Examples

Incorrect — Cell Without a Row Parent

Incorrect — Intermediate Wrapper Breaking Ownership

Correct — Cells Directly Inside Rows

Correct — Using Rowgroups

Correct — Using Native HTML Instead

Common causes

Why this matters

How to fix it

Examples

Literal % not encoded

Truncated percent-encoded sequence

Invalid hexadecimal characters

Multiple unencoded % in a URL

How to fix it

Examples

❌ Empty srcset attribute

❌ Malformed srcset value

✅ Using pixel density descriptors

✅ Using width descriptors with sizes

✅ Removing srcset when not needed

✅ Single candidate in srcset

HTML examples

Invalid: unknown <tabs> element

Valid: ARIA tabs pattern with standard elements

How to fix it

Examples

❌ Missing dir attribute on an Arabic document

✅ Correct: dir="rtl" added to the <html> tag

Handling mixed-direction content within a page

HTML examples

Invalid: Office namespace element in HTML

Valid: Office elements removed

Why this matters

How to fix it

Examples

❌ Empty srcset attribute

❌ Invalid descriptor syntax

✅ Single image candidate

✅ Multiple candidates with width descriptors

✅ Multiple candidates with pixel density descriptors

Invalid: using the `<icon>` element

Valid: using a `<link>` element for a favicon

Valid: displaying an icon inline with `<img>`

Valid: displaying an icon inline with `<span>` and CSS

Valid: space encoded as `%20`

Correct — space encoded as `%20`

Correct — space encoded as `+` in query string

Literal `%` not encoded

Multiple unencoded `%` in a URL

❌ Empty `srcset` attribute

❌ Malformed `srcset` value

✅ Using width descriptors with `sizes`

✅ Removing `srcset` when not needed

✅ Single candidate in `srcset`

Invalid: unknown `<tabs>` element

❌ Missing `dir` attribute on an Arabic document

✅ Correct: `dir="rtl"` added to the `<html>` tag

❌ Empty `srcset` attribute

Fixed — space encoded as `%20`

Invalid: Missing `T` separator and using AM/PM

Valid: Date-time with `T` separator and 24-hour time

Invalid: empty `target` attribute

Fixed: remove `target` for default behavior

Fixed: target a named `<iframe>`

Fixed: conditionally render `target` in templates

❌ Invalid: Empty `max` attribute

❌ Invalid: Empty `max` on a date input

✅ Fixed: Valid date value for `max`

Invalid: `li` with a non-listitem role inside a `ul`

Validate at scale.
Ship accessible websites, faster.