Rocket Validator integrates the W3C Validator HTML checker into an automated web crawler.
HTML issues tagged as aria.
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 tablist.
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>
labelledby is not a valid attribute for the <svg> element. Perhaps you meant aria-labelledby?
The 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.
Still checking your large sites one page at a time?
The 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 <p> or <div>.
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.
The aria-expanded attribute can only be true, false, or undefined.
This attribute indicates whether a grouping element is expanded or collapsed.
When was the last time you validated your whole site?
Keep your sites healthy checking for A11Y/HTML issues on an automated schedule.
There’s no role in ARIA named presentational, you probably mean presentation.
The presentation role and its synonym none remove an element’s implicit ARIA semantics from being exposed to the accessibility tree.
The content of the element will still be available to assistive technologies; it is only the semantics of the container — and in some instance, required associated descendants — which will no longer expose their mappings to the accessibility API.
<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>
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.
<div id="email_label">Email Address *</div> <div role="textbox" contenteditable aria-labelledby="email_label" aria-required="true" id="email"></div>
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>
6,250 HTML checks per week. Fully automated.