Rocket Validator automatically checks your pages on the W3C Validator.
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>
Related W3C validator issues
There can only be one visible
Example of 2
main elements, where only one is visible:
<main> <h1>Active main element</h1> <!-- content --> </main> <main hidden> <h1>Hidden main element</h1> <!-- content --> </main>
Elements with the role
tab must either be a child of an element with the
tablist role, or have their
id part of the
aria-owns property of a
An element with the tab role controls the visibility of an associated element with the tabpanel role. The common user experience pattern is a group of visual tabs above, or to the side of, a content area, and selecting a different tab changes the content and makes the selected tab more prominent than the other tabs.
<div class="tabs"> <div role="tablist" aria-label="Sample Tabs"> <button role="tab" aria-selected="true" aria-controls="panel-1" id="tab-1" tabindex="0"> First Tab </button> <button role="tab" aria-selected="false" aria-controls="panel-2" id="tab-2" tabindex="-1"> Second Tab </button> </div> <div id="panel-1" role="tabpanel" tabindex="0" aria-labelledby="tab-1"> <p>Content for the first panel</p> </div> <div id="panel-2" role="tabpanel" tabindex="0" aria-labelledby="tab-2" hidden> <p>Content for the second panel</p> </div> </div>
Learn more at:
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
labelledby is not a valid attribute for the
<svg> element. Perhaps you meant
aria-labelledby attribute establishes relationships between objects and their label(s), and its value should be one or more element IDs, which refer to elements that have the text needed for labeling.
<div id="myBillingId">Billing</div> <div> <div id="myNameId">Name</div> <input type="text" aria-labelledby="myBillingId myNameId"/> </div> <div> <div id="myAddressId">Address</div> <input type="text" aria-labelledby="myBillingId myAddressId"/> </div>
Due to an issue in the W3C validator, this is identified as an error but it’s not. This issue has been notified, and we’ll update our validator as soon as there’s a fix.
According to the WAI-ARIA 1.2 spec:
The aria-setsize property defines the number of items in the current set of listitems or treeitems. Not required if all elements in the set are present in the DOM.
Authors MUST set the value of aria-setsize to an integer equal to the number of items in the set. If the total number of items is unknown, authors SHOULD set the value of aria-setsize to -1.
alert role can be used to tell the user an element has been dynamically updated. Screen readers will instantly start reading out the updated content when the role is added. The element
<ul> doesn’t accept this kind of role, consider using other element like
The alert role is used to communicate an important and usually time-sensitive message to the user. When this role is added to an element, the browser will send out an accessible alert event to assistive technology products which can then notify the user about it. The alert role is most useful for information that requires the user’s immediate attention.
Learn more about the
alert ARIA role:
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>
<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>
<a> element requires either a
href attribute, or a
An element is using ARIA attributes, but its
role has not been defined. ARIA defines semantics that can be applied to elements, with these divided into roles (defining a type of user interface element) and states and properties that are supported by a role. Authors must assign an ARIA role and the appropriate states and properties to an element during its life-cycle, unless the element already has appropriate ARIA semantics (via use of an appropriate HTML element). Examples:
<!-- This div uses ARIA but its role is not clear, so it's invalid. --> <div aria-expanded="true">...</div> <!-- This div defines clearly its role, so it's valid. --> <div role="navigation" aria-expanded="true">...</div> <!-- Nav elements have an implicit navigation role so we don't need the role attribute. --> <nav aria-expanded="true">...</nav>
Read about Using ARIA: Roles, states and properties.
aria-controls attribute identifies an element or elements in the same document whose contents or presence are controlled by the current element. It must point to existing elements by their ID. Check that the IDs contained in that property exist within the same document.
ARIA can express semantic relationships between elements that extend the standard parent/child connection, such as a custom scrollbar that controls a specific region, for example:
<div role="scrollbar" aria-controls="main"></div> <div id="main"> . . . </div>
aria-describedby attribute is used to indicate the IDs of the elements that describe the object. It should reference an existing ID on the same document, but that
id was not found.
article role indicates a section of a page that could easily stand on its own on a page, in a document, or on a website, is implicit when using the
This role indicates a section of a page that could easily stand on its own on a page, in a document, or on a website. It is usually set on related content items such as comments, forum posts, newspaper articles or other items grouped together on one page. It can be added to generic elements like
<div> to convey this role, for example:
<div role="article"> <h2>Heading</h2> <p>Content...</p> </div>
Instead of using this role, it’s preferrable to use the native
<article> element like this:
<article> <h2>Heading</h2> <p>Content...</p> </article>
<header> HTML element represents introductory content, typically a group of introductory or navigational aids, and has an implicit role of
banner, so specifying this role is redundant.
The following example represents a banner using the
<div role="banner"> <img src="companylogo.svg" alt="my company name" /> <h1>Title</h1> <p>Subtitle</p> </div>
By default, the HTML5
<header> element has an identical meaning to the banner landmark, unless it is a descendant of
<section>, at which point
<header> is the heading for that section and not the equivalent of the site-wide banner.
This example uses the
<header> element instead of the
<header> <img src="companylogo.svg" alt="my company name" /> <h1>Title</h1> <p>Subtitle</p> </header>
<summary> HTML element specifies a clickable summary, caption, or legend for a
<details> element’s disclosure box. As the
<summary> element has an implicit
button role, it’s not needed to include it explicitly.
Here’s an example, clicking the <summary> element toggles the state of the parent <details> element open and closed.
<details> <summary>I have keys but no doors. I have space but no room. You can enter but can’t leave. What am I?</summary> A keyboard. </details>
<aside> element will automatically communicate a section has a role of
complementary, so specifying the
role="complementary" is redundant.
<footer> element represents a footer for its nearest sectioning content, and has an implicit role of
contentinfo, so specifying this role is redundant.
The following example marks a
<div> as a footer specifying its role:
<div role="contentinfo"> <h2>Footer</h2> <!-- footer content --> </div>
<footer> element instead is recommended:
<footer> <h2>Footer</h2> <!-- footer content --> </footer>
button element, or an element with the
role=button attribute, is not allowed to be nested inside an
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>
label element is not allowed as a descendant of a
label element represents a caption in a user interface. The caption can be associated with a specific form control, known as the label element’s labeled control, either using the
for attribute, or by putting the form control inside the label element itself.
<form> element has already a
form role, so specifying
role="form" in it is redundant.
You can simply write:
heading role defines this element as a heading to a page or section, and is implicit in tags
heading role indicates to assistive technologies that this element should be treated like a heading. Screen readers would read the text and indicate that it is formatted like a heading.
This ARIA role is only needed to add that role to a generic element like
<div>, for example:
<div role="heading" aria-level="1">This is a main page heading</div>
This defines the text in the
<div> to be the main heading of the page, indicated by being level 1 via the
aria-level attribute. Opt for using the
<h6>) element instead:
<h1>This is a main page heading</h1>
<img> element is used to embed an image, so adding the
img role to it is redundant.
The ARIA img role can be used to identify multiple elements inside page content that should be considered as a single image. These elements could be images, code snippets, text, emojis, or other content that can be combined to deliver information in a visual manner, for example:
<div role="img" aria-label="Description of the overall image"> <img src="graphic1.png" alt=""> <img src="graphic2.png"> </div>
<li> element is used to define an item of a list, so adding the
listitem role to it is redundant.
listitem role can be used to identify an item inside a list of items. It is normally used in conjunction with the
list role, which is used to identify a list container.
<section role="list"> <div role="listitem">List item 1</div> <div role="listitem">List item 2</div> <div role="listitem">List item 3</div> </section>
When possible, you should use the appropriate semantic HTML elements to mark up a list and its list items —
<li>. For example:
<ul> <li>List item 1</li> <li>List item 2</li> <li>List item 3</li> </ul>
main landmark role is used to indicate the primary content of a document. It can be added to an element by using
role="main", but instead it’s preferable to just use the
<main> element. In that case, it’s unnecessary to make the main role explicit. Examples:
<div role="main"> <!-- this is a valid way to define a main role --> </div> <main> <!-- but this is shorter and uses correct semantic HTML --> </main>
navigation landmark role is used to identify major groups of links used for navigating through a website or page content. It can be added to an element that contains navigation links by using
role="navigation", but instead it’s preferable to just use the
<nav> element. In that case, it’s unnecessary to make the navigation role explicit.
<div role="navigation"> <!-- this is a valid way to define a navigation role --> </div> <nav> <!-- but this is shorter and uses correct semantic HTML --> </nav>
textbox role, used to identify an element that allows the input of free-form text, is unnecessary for an
<input> element of type
text when it doesn’t have a
When was the last time you validated your whole site?
Keep your sites healthy checking for A11Y/HTML issues on an automated schedule.