Rocket Validator automatically scans your sites for accessibility issues using the W3C Validator,
hosted on our own servers and integrated into our web crawler.
<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>
Related W3C validator issues
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 role="tablist" aria-label="Sample Tabs">
<button role="tab" aria-selected="true" aria-controls="panel-1" id="tab-1" tabindex="0">
<button role="tab" aria-selected="false" aria-controls="panel-2" id="tab-2" tabindex="-1">
<div id="panel-1" role="tabpanel" tabindex="0" aria-labelledby="tab-1">
<p>Content for the first panel</p>
<div id="panel-2" role="tabpanel" tabindex="0" aria-labelledby="tab-2" hidden>
<p>Content for the second panel</p>
Learn more at:
<img> tags, used to include images on a document, require an alt attribute to describe the contents of the image. This is essential for users that cannot see the image (like screen reader users), or as an alternate text when the image cannot be displayed. Example:
<img src="photo.jpg" alt="Person holding a cat" />
A start tag for <img> has been found inside a <noscript> section within the <head>, where it’s not allowed. Consider moving it to the <body> section.
The HTML <noscript> element defines a section of HTML to be inserted if a script type on the page is unsupported or if scripting is currently turned off in the browser.
This issue is often related to 3rd party tracking pixels like the Facebook or LinkedIn conversion tracking pixels. For example, the Facebook pixel instructions tell you to insert it like this:
<img src="..." />
Instead, consider moving the <noscript> part inside the <body>, where the <img> makes sense to be inserted:
<img src="..." />
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.
Learn more about the alert ARIA role:
The src attribute for <img> tags is required, to define the source of the image, like in this example:
<img src="photo.jpg" alt="wombat" />
<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:
<label for="search-input">Search this site</label>
<input type="search" id="search-input" name="search">
<input value="Submit" type="submit">
Space characters are not allowed in src attributes. Instead, they should be converted to %20. In this example, the first line is invalid and the second is valid:
<img src="https://example.com/?s=some term" alt="description" />
<img src="https://example.com/?s=some%20term" alt="description" />
The src attribute on an <img> tag is not allowed to contain space characters. You should replace them with “%20“.
<img> elements accept a width attribute to specify the size in pixels. This value can only be an integer, it should not contain units or %. If you need to specify a percentage width, you can do that with CSS:
<img src="photo.jpg" alt="red car" style="width:100%;">
The width attribute on <img> elements expects a digit to indicate the number of pixels. Ensure that this attribute contains only digits.
<!-- This is invalid because width is not a digit -->
<img width="225px" alt="cat" src="cat.jpg" />
<!-- This is valid -->
<img width="225" alt="cat" src="cat.jpg" />
A <div> 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. -->
<!-- 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. -->
Read about Using ARIA: Roles, states and properties.
<img> tags used to display images require the attribute src to indicate the source of the image, for example <img src="/img/photo.jpg" />.
The 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>
. . .
The 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.
<img> tags no longer accept a border attribute. This can be defined using CSS instead, for example:
<img src="..." alt="..." style="border:0;" />
Using the <aside> element will automatically communicate a section has a role of complementary, so specifying the role="complementary" is redundant.
The 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. Examples:
<!-- this is a valid way to define a navigation role -->
<!-- but this is shorter and uses correct semantic HTML -->
Check the HTMLImageElement.srcset guide to learn about the correct usage of the srcset and sizes attributes.