HTML Guide
The value rocketlazyloadscript used in a <script> tag is not a valid one according to the HTML specification. It is introduced by the WP Rocket Wordpress extension.
An element with role="rowgroup" is a group of rows within a tabular structure. A rowgroup contains one or more rows of cells, grid cells, column headers, or row headers within a grid, table or treegrid, as in this example:
<div
role="table"
aria-label="Populations"
aria-describedby="country_population_desc">
<div id="country_population_desc">World Populations by Country</div>
<div role="rowgroup">
<div role="row">
<span role="columnheader" aria-sort="descending">Country</span>
<span role="columnheader" aria-sort="none">Population</span>
</div>
</div>
<div role="rowgroup">
<div role="row">
<span role="cell">Finland</span>
<span role="cell">5.5 million</span>
</div>
<div role="row">
<span role="cell">France</span>
<span role="cell">67 million</span>
</div>
</div>
</div>The projection media type was deprecated in Media Queries 4.
Media types describe the general category of a device, for example screen, print and speech.
CSS 2.1 and Media Queries 3 defined several additional media types (tty, tv, projection, handheld, braille, embossed, and aural), but they were deprecated in Media Queries 4 and shouldn’t be used.
<input> elements can’t have a search role. Instead, try with <input type="search">.
<input> elements of type search are text fields designed for the user to enter search queries into. These are functionally identical to text inputs, but may be styled differently depending on the user agent.
The search role is a landmark. Landmarks can be used by assistive technology to quickly identify and navigate to large sections of the document. The search role is added to the container element that encompasses the items and objects that, as a whole, combine to create search functionality. When a <form> is a search form, use the search role on the form.
Example of a search form:
<form role="search">
<label for="search-input">Search this site</label>
<input type="search" id="search-input" name="search">
<input value="Submit" type="submit">
</form>Using role="section" on a <section> element is unnecessary and not recommended.
The <section> element is a semantic HTML5 element that is used to define sections within a document. A <section> inherently carries the semantics of a structural region, so you don’t need to explicitly declare a role attribute for it. The role attribute in HTML is mainly used to enhance accessibility by explicitly defining the purpose of an element when the element’s native HTML semantics are missing or insufficient. However, in this case, since <section> is already semantically meaningful, assigning a role="section" results in redundancy and can cause validation warnings or errors.
HTML5 and ARIA (Accessible Rich Internet Applications) guidelines suggest only using roles when absolutely necessary. Misusing roles can lead to confusion for assistive technologies, potentially impacting user accessibility.
Here’s a correct use of the <section> element without the role attribute:
<!DOCTYPE html>
<html lang="en">
<head>
<title>Document Title</title>
</head>
<body>
<header>
<h1>Website Header</h1>
</header>
<section>
<h2>Section Heading</h2>
<p>This is a paragraph within the section.</p>
</section>
<footer>
<p>Website Footer</p>
</footer>
</body>
</html>By removing role="section", you leverage the semantic meaning that the <section> element already provides, ensuring cleaner, more accessible, and standards-compliant HTML.
The value street-address cannot be used for attribute autocomplete on an <input> element. As this kind of autofill is oriented for multi-line inputs (as in the expected format for addresses), consider using a <textarea> element instead, like in this example:
<textarea name="address" autocomplete="street-address"></textarea>The role attribute in HTML is used to define the accessibility role of an element, which helps assistive technologies understand the purpose or type of the element. The value tabpanel is not appropriate for a <ul> element, which is used for unordered lists.
The role of tabpanel is intended to be used with elements that represent a tab panel, which is part of a tabbed interface. A tabbed interface consists of elements with roles like tablist, tab, and tabpanel. Typically, tabpanel is used with containers that house the content associated with a tab, such as a <div>.
To fix this error, ensure that the tabpanel role is applied to the correct element. Here’s a simple example of how a tab interface can be structured correctly:
<div role="tablist" aria-label="Sample Tabs">
<button role="tab" aria-controls="panel-1" id="tab-1">Tab 1</button>
<button role="tab" aria-controls="panel-2" id="tab-2">Tab 2</button>
</div>
<div role="tabpanel" id="panel-1" aria-labelledby="tab-1" hidden>
<p>Content for Tab 1.</p>
</div>
<div role="tabpanel" id="panel-2" aria-labelledby="tab-2" hidden>
<p>Content for Tab 2.</p>
</div>In this example:
- The role tablist is applied to the container element that directly contains the tab elements.
- Each button serving as a tab has the role of tab.
- Each tab panel, which contains the content for a tab, has the role of tabpanel.
Avoid using tabpanel on non-semantic or incorrectly associated elements like <ul>. Instead, use elements like <div> or <section> for tab panels, ensuring the roles align with the intended roles in a tabbed interface.
The value tel-national cannot be used on the attribute autocomplete of an <input> element of type tel. Either change to type="text", or use autocomplete="tel". Examples:
<!-- Using autocomplete "tel-national" on type "tel" is invalid -->
<input name="phone1" type="tel" autocomplete="tel-national" />
<!--Using autocomplete "tel-national" on type "text" is valid -->
<input name="phone2" type="text" autocomplete="tel-national" />
<!--Using autocomplete "tel" on type "tel" is valid -->
<input name="phone3" type="tel" autocomplete="tel" />The href attribute on an <a> link contains an invalid character. If you’re trying to link to a phone URL, review the href attribute to remove unallowed characters, as in this example:
<!-- Invalid as it contains a space character -->
<a href="tel: +123456789">call me</a>
<!-- Valid -->
<a href="tel:+123456789">call me</a>A <meta> tag has been found in the document stating that the charset is windows-1251, but it actually is utf-8. You should update the tag to reflect the actual encoding of the document, for example:
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">A <meta> tag has been found in the document stating that the charset is windows-1252, but it actually is utf-8. You should update the tag to reflect the actual encoding of the document, for example:
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">A textbox role is not valid for a li (list item) element. If the intention is to create a textual input area, a different approach, such as using the input element or the textarea element, is recommended.
The textbox role is used to identify an element that allows the input of free-form text. Whenever possible, rather than using this role, use an <input> element with type="text", for single-line input, or a <textarea> element for multi-line input.
Here’s an example of how to use the textbox role on a <div> element:
<!-- Simple text input field -->
<div id="txtboxLabel">Enter your five-digit zipcode</div>
<div
role="textbox"
contenteditable="true"
aria-placeholder="5-digit zipcode"
aria-labelledby="txtboxLabel"></div>The allowfullscreen attribute is used to allow an iframe to activate fullscreen mode. As a boolean attribute, it should only be declared without any value.
Here is an example of correct usage:
<iframe src="https://example.com" allowfullscreen></iframe>However, this is now a legacy attribute, and has been redefined as allow="fullscreen", as part of the more general Permissions Policy:
<iframe src="https://example.com" allow="fullscreen"></iframe>checked is a boolean attribute and should not have a value; it must be written as just checked.
The checked attribute is used with <input> elements of type checkbox or radio. As a boolean attribute, it is either present (interpreted as true) or omitted (false). Adding any value, like checked="true", is not valid and causes a validation error. The correct usage is simply checked, not checked="true" or checked="checked".
Incorrect example:
<input type="checkbox" checked="true">Correct example:
<input type="checkbox" checked>Example in context:
<!DOCTYPE html>
<html lang="en">
<head>
<title>Checkbox Example</title>
</head>
<body>
<label>
<input type="checkbox" checked>
Subscribe to newsletter
</label>
</body>
</html>The multiple attribute is used to indicate that multiple options can be selected in a <select> element. As a boolean attribute, it should only be declared without any value.
Instead of:
<select multiple="true">You should use:
<select multiple>Here is an example of the correct usage of the multiple attribute:
<label for="colors">Select your favorite colors:</label>
<select id="colors" name="colors" multiple>
<option value="red">Red</option>
<option value="green">Green</option>
<option value="blue">Blue</option>
<option value="yellow">Yellow</option>
</select>The selected attribute on option elements is boolean, so it should not have any value associated.
To fix this issue, simply remove the value assigned to the selected attribute.
Instead of this:
<select>
<option selected="true">Option 1</option>
<option>Option 2</option>
<option>Option 3</option>
</select>Use this:
<select>
<option selected>Option 1</option>
<option>Option 2</option>
<option>Option 3</option>
</select>In the example above, we’ve removed the value assigned to the selected attribute on the first option element. This will specify that “Option 1” is the default option to be selected in the dropdown list.
The value of the maxlength attribute contains invalid characters because it is incorrectly combined with another attribute.
In HTML, the maxlength attribute for an input element should contain only a non-negative integer value, which specifies the maximum number of characters allowed in the input. The aria-required attribute must be a separate attribute in the tag.
Correct usage separates each attribute and assigns the appropriate value using quotation marks for each. For example, maxlength="200" and aria-required="true" must be distinct and not combined.
Incorrect:
<input type="text" name="nome" id="nome" maxlength="200 aria-required="true">Correct:
<input type="text" name="nome" id="nome" maxlength="200" aria-required="true">This valid example uses maxlength="200" for character limit and adds aria-required="true" to improve accessibility for assistive technologies.
To query for the size of the viewport (or the page box on page media), the width, height and aspect-ratio media features should be used, rather than device-width, device-height and device-aspect-ratio, which refer to the physical size of the device regardless of how much space is available for the document being laid out. The device-* media features are also sometimes used as a proxy to detect mobile devices. Instead, authors should use media features that better represent the aspect of the device that they are attempting to style against.
The width media feature describes the width of the targeted display area of the output device. For continuous media, this is the width of the viewport including the size of a rendered scroll bar (if any).
In the following example, this media query expresses that the style sheet is only linked if the width of the viewport 768px maximum:
<link rel="stylesheet" media="only screen and (max-width: 768px)" href="styles.css">To query for the size of the viewport (or the page box on page media), the width, height and aspect-ratio media features should be used, rather than device-width, device-height and device-aspect-ratio, which refer to the physical size of the device regardless of how much space is available for the document being laid out. The device-* media features are also sometimes used as a proxy to detect mobile devices. Instead, authors should use media features that better represent the aspect of the device that they are attempting to style against.
The width media feature describes the width of the targeted display area of the output device. For continuous media, this is the width of the viewport including the size of a rendered scroll bar (if any).
In the following example, this media query expresses that the style sheet is only linked if the width of the viewport is greater than 768px:
<link rel="stylesheet" media="only screen and (min-width: 768px)" href="styles.css">The accept attribute may be specified to provide browsers with a hint of what file types will be accepted on an <input> element. It expects a comma-separated list of allowed file types. Refer to the list of media types to check the accepted tokens. In this example, the first line is invalid while the second is valid:
<input name='file' type='file' accept='doc, docx, pdf' />
<input name='file' type='file' accept='text/doc, text/docx, application/pdf' />The only accepted values for the aria-current property are page, step, location, date, time, true and false.
A non-null aria-current state on an element indicates that this element represents the current item within a container or set of related elements.
When you have a group of related elements, such as several links in a breadcrumb or steps in a multi-step flow, with one element in the group styled differently from the others to indicate to the sighted user that this is the current element within its group, the aria-current should be used to inform the assistive technology user what has been indicated via styling.
In its simplest form, you only need to add aria-current="true" to the element that you wish to mark as the current element of a group, for example:
<nav>
<ol>
<li>
<a href="/page1">Page 1</a>
</li>
<li>
<a href="/page2" aria-current="true">Page 2</a>
</li>
<li>
<a href="/page3">Page 3</a>
</li>
</ol>
</nav>If you can, use the values page, step, location, date or time instead of true to indicate the nature of the current element:
- page
- Represents the current page within a set of pages such as the link to the current document in a breadcrumb.
- step
- Represents the current step within a process such as the current step in an enumerated multi step checkout flow.
- location
- Represents the current location within an environment or context such as the image that is visually highlighted as the current component of a flow chart.
- date
- Represents the current date within a collection of dates such as the current date within a calendar.
- time
- Represents the current time within a set of times such as the current time within a timetable.
For example, here we use page instead of true.
<nav>
<ol>
<li>
<a href="/page1">Page 1</a>
</li>
<li>
<a href="/page2" aria-current="page">Page 2</a>
</li>
<li>
<a href="/page3">Page 3</a>
</li>
</ol>
</nav>If you want to indicate that an element is not the current element, you can use the false value or just skip the aria-current property entirely on the element.
Using a blank string is not a valid value for this property, so instead of this:
<a href="/page3" aria-current="">Page 3</a>you can use false:
<a href="/page3" aria-current="false">Page 3</a>or, better yet, skip the property entirely:
<a href="/page3">Page 3</a>The only accepted value for the aria-required property is true.
The aria-required attribute indicates that user input is required on the element before a form may be submitted.
When a semantic HTML <input>, <select>, or <textarea> must have a value, it should have the required attribute applied to it. When form controls are created using non-semantic elements, such as a <div> with a role of checkbox, the aria-required attribute should be included, with a value of true, to indicate to assistive technologies that user input is required on the element for the form to be submittable.
Example:
<div id="email_label">Email Address *</div>
<div
role="textbox"
contenteditable
aria-labelledby="email_label"
aria-required="true"
id="email"></div>The async attribute is boolean: the presence of a boolean attribute on an element represents the true value, and the absence of the attribute represents the false value. As a boolean attribute, it does not need to be passed any value such as true or 1 to activate the async property.
For classic scripts, if the async attribute is present, then the classic script will be fetched in parallel to parsing and evaluated as soon as it is available.
For module scripts, if the async attribute is present then the scripts and all their dependencies will be executed in the defer queue, therefore they will get fetched in parallel to parsing and evaluated as soon as they are available.
<script async src="app.js"></script>
<script async type="module">
/* JavaScript module code here */
</script>The value used in the datetime attribute is not in a valid format.
The <time> HTML element represents a specific period in time. It may include the datetime attribute to translate dates into machine-readable format, allowing for better search engine results or custom features such as reminders.
The disabled attribute is a boolean attribute and must not have a value or should simply be present (disabled or disabled=""). Boolean attributes like disabled indicate presence by their occurrence alone and should not include explicit values.
Incorrect usage:
<input type="text" disabled="yes">
<input type="text" disabled="true">
<input type="text" disabled="false">Correct usage:
<input type="text" disabled>
<input type="text" disabled="">Only the presence of the disabled attribute disables the input. The value, if given, is ignored by the browser but causes validation problems if specified incorrectly. For W3C compliance, simply include the disabled attribute without specifying a value.
Although using <input type="text" disabled="disabled"> might still be marked as valid by the W3C Validator, the general recommendation for boolean attributes is to not pass any value.