y-packages/accessibility-console
1
0 Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity
Files
v2.6.0
accessibility-console/demo/dynamic_preview.html
T

195 lines
8.9 KiB
HTML
Raw Permalink Normal View History

Major upgrade v2.0.0
2026-05-13 09:10:43 +03:00
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>YakNet Dynamic Demo</title>
<style>
body {
font-family: sans-serif;
margin: 0;
padding: 0;
line-height: 1.6;
}
header {
background: #333;
color: #fff;
padding: 1rem;
}
nav a {
color: #fff;
margin-right: 1rem;
text-decoration: none;
}
.container {
padding: 2rem;
max-width: 800px;
margin: 0 auto;
}
.card {
border: 1px solid #ddd;
padding: 1rem;
margin-bottom: 1rem;
border-radius: 4px;
}
.btn {
background: #007bff;
color: white;
padding: 0.5rem 1rem;
border: none;
cursor: pointer;
}
</style>
</head>
<body>
<header>
<div class="container" style="padding: 0;">
<h1>My Dynamic Site</h1>
<nav>
<a href="?page=home">Home</a>
<a href="?page=contact">Contact</a>
<a href="?page=about">About</a>
</nav>
</div>
</header>
<main class="container">
<h2>Latest Products</h2>
<p>Welcome to our dynamic product catalog. (Intentionally filled with errors)</p>
<div class="products">
<div class="card">
<!-- ERROR: Dynamic image without alt text -->
<img src="images/gadget.jpg" width="100">
<h3>Super Gadget</h3>
<p>$99</p>
<button class="btn">Buy Now</button>
<!-- Error: Button might need specific accessible name if icon-only, but text is okay here. -->
</div>
<div class="card">
<!-- ERROR: Dynamic image without alt text -->
<img src="images/widget.png" width="100">
<h3>Mega Widget</h3>
<p>$49</p>
<button class="btn">Buy Now</button>
<!-- Error: Button might need specific accessible name if icon-only, but text is okay here. -->
</div>
<div class="card">
<!-- ERROR: Dynamic image without alt text -->
<img src="images/thing.jpg" width="100">
<h3>Ultra Thing</h3>
<p>$199</p>
<button class="btn">Buy Now</button>
<!-- Error: Button might need specific accessible name if icon-only, but text is okay here. -->
</div>
</div>
<hr>
<h3>Sponsors</h3>
<div>
<!-- ERROR: Decorative image causing noise, missing alt="" -->
<img src="https://via.placeholder.com/150">
<img src="https://via.placeholder.com/150">
</div>
</main>
<footer style="text-align: center; padding: 2rem; background: #f4f4f4; margin-top: 2rem;">
&copy; 2026 YakNet Demo
</footer>
<div id='yaknet-a11y-console-toggle' onclick='document.getElementById("yaknet-a11y-console").style.display="block"'
style='position:fixed; bottom:10px; right:10px; background:#ff9900; color:white; padding:8px 15px; border-radius:4px; cursor:pointer; font-family:sans-serif; z-index:99999; font-weight:bold; font-size:14px; box-shadow: 0 2px 5px rgba(0,0,0,0.2); border: 1px solid #cc7a00;'>
⚠️ Accessibility: 5 Errors
</div>
<div id='yaknet-a11y-console'
style='display:none; position:fixed; top:0; left:0; width:100%; height:100%; background:rgba(0,0,0,0.7); z-index:100000; font-family:Verdana, sans-serif;'>
<div
style='width:90%; max-width:1200px; margin:50px auto; background:#fff; box-shadow:0 0 20px rgba(0,0,0,0.5); overflow:hidden; border-radius:4px;'>
<!-- Header imitating PHP Error -->
<div
style='background:#f7f7f7; color:#333; padding:15px 20px; border-bottom:1px solid #ccc; font-size:18px; font-weight:bold; display:flex; justify-content:space-between; align-items:center;'>
<span>
<span
style='background:#d9534f; color:white; padding:2px 6px; border-radius:3px; font-size:14px; vertical-align:middle; margin-right:10px;'>FATAL
ERROR</span>
Accessibility Violations Detected
</span>
<button onclick='document.getElementById("yaknet-a11y-console").style.display="none"'
style='border:none; background:none; font-size:24px; cursor:pointer; color:#999; line-height:1;'>&times;</button>
</div>
<div style='max-height:80vh; overflow-y:auto; padding:0;'>
<table style='width:100%; border-collapse:collapse; font-size:14px;'>
<thead style='background:#eeeff0; color:#333; text-align:left;'>
<tr>
<th style='padding:12px 15px; border-bottom:2px solid #ddd; width: 50px;'>#</th>
<th style='padding:12px 15px; border-bottom:2px solid #ddd;'>Violation / Message</th>
<th style='padding:12px 15px; border-bottom:2px solid #ddd;'>Source File</th>
</tr>
</thead>
<tbody>
<tr style='border-bottom:1px solid #eee; background:#fff;'>
<td style='padding:12px 15px; vertical-align:top; color:#999;'>1</td>
<td style='padding:12px 15px; vertical-align:top;'>
<div style='color:#cc0000; font-weight:bold; margin-bottom:5px; font-size:15px;'>Image
is missing alt attribute.</div>
<div style='font-size:12px; color:#555; margin-bottom:8px;'>Rule:
<code>img-alt-text</code></div>
<div
style='background:#f1f1f1; padding:8px; border-left:3px solid #ccc; font-family:monospace; font-size:12px; margin-bottom:8px; color:#333; overflow-x:auto;'>
&lt;img src="images/gadget.jpg" width="100"&gt;
</div>
<div style='font-size:13px; color:#222;'>
<span style='color:#28a745; font-weight:bold;'>Fix:</span> Add an alt="" attribute
describing the image, or alt="" if decorative.
</div>
</td>
<td
style='padding:12px 15px; vertical-align:top; font-family:monospace; font-size:13px; color:#333;'>
<div style='margin-bottom:5px;'>
home.php<strong>:14</strong>
</div>
</td>
</tr>
<tr style='border-bottom:1px solid #eee; background:#f9f9f9;'>
<td style='padding:12px 15px; vertical-align:top; color:#999;'>2</td>
<td style='padding:12px 15px; vertical-align:top;'>
<div style='color:#cc0000; font-weight:bold; margin-bottom:5px; font-size:15px;'>Image
is missing alt attribute.</div>
<div style='font-size:12px; color:#555; margin-bottom:8px;'>Rule:
<code>img-alt-text</code></div>
<div
style='background:#f1f1f1; padding:8px; border-left:3px solid #ccc; font-family:monospace; font-size:12px; margin-bottom:8px; color:#333; overflow-x:auto;'>
&lt;img src="images/widget.png" width="100"&gt;
</div>
<div style='font-size:13px; color:#222;'>
<span style='color:#28a745; font-weight:bold;'>Fix:</span> Add an alt="" attribute
describing the image, or alt="" if decorative.
</div>
</td>
<td
style='padding:12px 15px; vertical-align:top; font-family:monospace; font-size:13px; color:#333;'>
<div style='margin-bottom:5px;'>
home.php<strong>:14</strong>
</div>
</td>
</tr>
</tbody>
</table>
</div>
</div>
</div>
</body>
</html>
Reference in New Issue Copy Permalink