What does this accessibility issue mean?
Accessibility issue summary: <object> element missing alt text
HTML <object> elements are used to define containers for embedded external resources on a web page — for example, images, videos, or audio files. Alt text should be included for all <object> elements to provide context for screen readers and assistive technology users.
This alt text should provide information about the purpose and content of the embedded object.
Solution:
Ensure <object> elements have alternate text.
Example HTML violation: Object element missing alt text (WCAG Level A Issue)
<div>
<object data="product.jpg" width="300" height="150"></object>
</div>Explanation: The above HTML code violates the 'object-alt' rule because the <object width="300" height="150"> tag doesn't have any alternate text use for screen readers. Assistive technologies rely on this text to provide context or understanding of the object to users who have visual impairments.
Without alt text, these users have no way of knowing or understanding what the object represents.
Here is HTML code correcting the issue:
How to fix "Object element missing alt text (WCAG Level A Issue)" issue
<div>
<object data="product.jpg" width="300" height="150" aria-label="Product image"></object>
</div>Correction Explanation: In the corrected HTML code, the <object width="300" height="150"> tag includes the aria-label attribute used as an alternative text.
The aria-label attribute is used to define a string that labels the current element which is helpful for Assistive technologies.
