Rocket Validator automatically checks your pages on the W3C Validator.
An element with
role=button can’t have an
input element as descendant.
The ARIA role
button can be added to an element to make it behave like a
<button> – just like a
<button> is not allowed to contain other
<input> elements as descendants, any element with this role is not allowed to contain them either.
All these examples in the following code will raise a similar issue:
<div role="button"> <input type="checkbox" /> </div> <button> <input type="checkbox" /> </button> <a> <input type="checkbox" /> </a>
Related W3C validator issues
button element, or an element with the
role=button attribute, is not allowed to be nested inside an
button element cannot contain a descendant element with the attribute
maxlength attribute can be used on an
This attribute is only allowed on elements of type
pattern attribute is only allowed on input whose
url. Check the
type used, and consider changing to one of the allowed types to enable pattern client-side validation.
aria-expanded attribute can only be
This attribute indicates whether a grouping element is expanded or collapsed.
<li> element, used to define a list item, does not accept the
This HTML code is invalid because the
<li> elements can’t have
<ul> <li role="button">One</li> <li role="button">Two</li> </ul>
max attribute on an
<input> element does not accept an empty string.
max attribute defines the maximum value that is acceptable and valid for the input containing the attribute.
<input> elements can’t have a
search role. Instead, try with
<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.
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
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>
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>
Read more about the autocomplete attribute.
tel-national cannot be used on the attribute
autocomplete of an
<input> element of type
tel. Either change to
type="text", or use
<!-- 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" />
Read more about the autocomplete attribute.
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' />
input elements can be of different types but
zip is not one of the allowed. Consider using a generic type like
aria-hidden attribute is redundat on an input of type
hidden, so it should be removed.
<!-- Instead of this... --> <input type="hidden" aria-hidden="true" id="month" value="10" /> <!-- You can just use this --> <input type="hidden" id="month" value="10" />
button role is used to make an element appear as a button control to a screen reader and can be applied to otherwise non-interactive elements like
<div>. If you’re already using a
<button> element, then it’s redundant to apply it the role
button, as that’s implicit.
<!-- Instead of this --> <button role="button">Buy</button> <!-- Do this --> <button>Buy</button>
25,000 HTML checks per month. Is that enough for your site?
Save time using our automated web checker. Let our crawler check your web pages on the W3C Validator.