48 lines
2.0 KiB
HTML
48 lines
2.0 KiB
HTML
<!DOCTYPE html>
|
||
<html lang="de">
|
||
<head>
|
||
<meta charset="UTF-8">
|
||
<title>Testseite – Alt-Text Checker</title>
|
||
<style>
|
||
body { font-family: sans-serif; padding: 20px; }
|
||
img { width: 100px; height: 80px; background: #ddd; display: block; margin: 10px 0; }
|
||
figure { margin: 0; }
|
||
</style>
|
||
</head>
|
||
<body>
|
||
<h1>Testseite für Alt-Text Checker</h1>
|
||
|
||
<p>1. Bild ohne alt-Attribut (Fehler erwartet):</p>
|
||
<img src="https://via.placeholder.com/100x80/ff0000/ffffff?text=1">
|
||
|
||
<p>2. Bild mit leerem alt (Warnung, dekorativ):</p>
|
||
<img src="https://via.placeholder.com/100x80/ffa500/ffffff?text=2" alt="">
|
||
|
||
<p>3. Bild mit Alt-Text (OK):</p>
|
||
<img src="https://via.placeholder.com/100x80/00ff00/000000?text=3" alt="Ein grünes Testbild mit der Zahl drei">
|
||
|
||
<p>4. Bild mit aria-label statt alt (Warnung):</p>
|
||
<img src="https://via.placeholder.com/100x80/0000ff/ffffff?text=4" aria-label="Blaues Testbild via ARIA">
|
||
|
||
<p>5. Bild in einem Link:</p>
|
||
<a href="#test"><img src="https://via.placeholder.com/100x80/purple/ffffff?text=5"></a>
|
||
|
||
<p>6. Bild mit aria-describedby:</p>
|
||
<img src="https://via.placeholder.com/100x80/808080/ffffff?text=6" aria-describedby="desc6">
|
||
<p id="desc6">Diese Beschreibung wird per aria-describedby referenziert.</p>
|
||
|
||
<p>7. Falsche Verwendung: alt auf einem Link statt auf dem Bild:</p>
|
||
<a href="#test2" alt="Sollte hier nicht stehen">Link mit falschem alt-Attribut</a>
|
||
|
||
<p>8. Bild mit potenziell gefährlichem alt-Text (XSS-Test):</p>
|
||
<img src="https://via.placeholder.com/100x80/000000/ffffff?text=8" alt="<img src=x onerror=alert('XSS')>">
|
||
|
||
<p>9a. Dasselbe Bild dreimal ohne alt (Duplikat-Test – nur dieses eine ausschließen):</p>
|
||
<img src="https://via.placeholder.com/100x80/999999/ffffff?text=9">
|
||
<p>9b. Zweites Vorkommen desselben Bildes:</p>
|
||
<img src="https://via.placeholder.com/100x80/999999/ffffff?text=9">
|
||
<p>9c. Drittes Vorkommen desselben Bildes:</p>
|
||
<img src="https://via.placeholder.com/100x80/999999/ffffff?text=9">
|
||
</body>
|
||
</html>
|