1 example

Missing alt text

Image missing descriptive alternative text, hurting accessibility and SEO.

[ FAQ1 ]

What is missing alt text?

Missing alt text occurs when an HTML image (<img>) tag does not include the required alt attribute, or when the attribute is empty without justification. The alt attribute supplies descriptive text to represent images for users unable to view them, especially those using assistive technologies such as screen readers. Proper alt text ensures that images are understandable in contexts like accessibility, slow connections, or image-loading failures. Ignoring alt text significantly decreases accessibility, hindering compliance with web standards and reducing usability for visually impaired users.
[ FAQ2 ]

How to fix missing alt text issues

To fix missing alt text, ensure every meaningful image element in your HTML includes a descriptive and relevant alt attribute, for example: <img src="logo.png" alt="Company Logo">. If an image is purely decorative, explicitly set the alt attribute to an empty string (alt="") to inform assistive technologies to skip the image. Review existing pages with accessibility auditing tools or validators to detect images lacking alt attributes. Integrate best practices for accessibility into your development workflow, such as including descriptive alt text when adding new images, to enhance usability and comply with accessibility standards like ARIA and web content guidelines.
diff block
<div className="flex flex-col items-center max-w-2xl p-4 my-24 mx-auto text-center">
<img src={noAccessNopehog} className="w-64 h-64 bg-no-repeat bg-center" />
Greptile
greptile
logic: Missing alt text for accessibility on error image
suggested fix
+ <img src={noAccessNopehog} alt="Access denied illustration" className="w-64 h-64 bg-no-repeat bg-center" />