Toggle navigation
☰
HTML
CSS
Scripting
Database
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Proper Alt Text Examples</title> <style> body { font-family: sans-serif; margin: 20px; line-height: 1.6; max-width: 800px;} .example-block { margin-bottom: 30px; padding: 20px; border: 1px solid #ccc; border-radius: 8px; background: #fff;} .example-block img { max-width: 100%; height: auto; display: block; margin-bottom: 10px; border-radius: 4px; } .code-caption { background: #f4f4f4; padding: 10px; font-family: monospace; font-size: 0.9em; overflow-x: auto; color: #d63384; } h3 { margin-top: 0; color: #333; } </style> </head> <body> <div class="example-block"> <h3>1. Descriptive (Informational Image)</h3> <p>This image contains important context for the article. The alt text describes exactly what is happening so a visually impaired user understands the scene.</p> <!-- We use sample images for the demo --> <img src="/pix/samples/18s.jpg" alt="Three cats snuggled together sleeping, with one staring at the camera"> <div class="code-caption"><img src="/pix/samples/18s.jpg" alt="Three cats snuggled together sleeping, with one staring at the camera"></div> </div> <div class="example-block"> <h3>2. Functional (Image as a Link/Button)</h3> <p>When an image is wrapped in a link, the alt text shouldn't describe the image itself, it should describe what the button DOES.</p> <a href="/" target="_blank"> <img src="/pix/icons/popup_icon_2.png" alt="Open home page in a new window"> </a> <div class="code-caption"><img src="/pix/icons/popup_icon_2.png" alt="Open home page in a new window"></div> </div> <div class="example-block"> <h3>3. Decorative (Ignored by Screen Readers)</h3> <p>This bullet graphic is purely decorative and adds no meaning to the page. By leaving the alt text completely empty (<code>alt=""</code>), screen readers will intelligently skip right past it.</p> <img src="/pix/samples/bullet1.png" alt=""> <div class="code-caption"><img src="/pix/samples/bullet1.png" alt=""></div> </div> </body> </html>
