Major upgrade v2.0.0

This commit is contained in:
Enes Yakıştır
2026-05-13 09:10:43 +03:00
commit e348025579
41 changed files with 2139 additions and 0 deletions
+20
View File
@@ -0,0 +1,20 @@
<!DOCTYPE html>
<html>
<head>
<title>Broken Page</title>
</head>
<body>
<h1>Welcome to a broken page</h1>
<!-- Missing alt attribute -->
<img src="logo.png">
<!-- Empty link -->
<a href="https://google.com"></a>
<!-- Empty button -->
<button type="submit"></button>
<p>This page has multiple accessibility issues.</p>
</body>
</html>
+195
View File
@@ -0,0 +1,195 @@
<!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>
+112
View File
@@ -0,0 +1,112 @@
<!DOCTYPE html>
<html lang="tr"> <!-- FIXED: Added lang attribute -->
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>YakNet Dynamic Demo (Fixed)</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: #28a745;
color: white;
padding: 0.5rem 1rem;
border: none;
cursor: pointer;
}
</style>
</head>
<body>
<header>
<div class="container" style="padding: 0;">
<h1>My Dynamic Site (Accessible)</h1>
<nav>
<a href="?page=home">Home</a>
<a href="?page=contact">Contact</a>
<a href="?page=about">About</a>
<!-- FIXED: Added aria-label to empty link, or removed it/added text -->
<a href="#" class="btn" aria-label="Profile">👤</a>
</nav>
</div>
</header>
<main class="container">
<h2>Latest Products</h2>
<p>Welcome to our accessible product catalog.</p>
<div class="products">
<div class="card">
<!-- FIXED: Added alt attribute describing the product -->
<img src="images/gadget.jpg" width="100" alt="Super Gadget">
<h3>Super Gadget</h3>
<p>$99</p>
<button class="btn">Buy Now</button>
</div>
<div class="card">
<!-- FIXED: Added alt attribute describing the product -->
<img src="images/widget.png" width="100" alt="Mega Widget">
<h3>Mega Widget</h3>
<p>$49</p>
<button class="btn">Buy Now</button>
</div>
<div class="card">
<!-- FIXED: Added alt attribute describing the product -->
<img src="images/thing.jpg" width="100" alt="Ultra Thing">
<h3>Ultra Thing</h3>
<p>$199</p>
<button class="btn">Buy Now</button>
</div>
</div>
<hr>
<h3>Sponsors</h3>
<div>
<!-- FIXED: Added empty alt="" for decorative images -->
<img src="https://via.placeholder.com/150" alt="">
<img src="https://via.placeholder.com/150" alt="">
</div>
</main>
<footer style="text-align: center; padding: 2rem; background: #f4f4f4; margin-top: 2rem;">
&copy; 2026 YakNet Demo
</footer>
<div
style="position:fixed; bottom:10px; right:10px; background:#28a745; color:white; padding:8px 15px; border-radius:4px; font-family:sans-serif; font-weight:bold; box-shadow: 0 2px 5px rgba(0,0,0,0.2);">
✅ Accessibility: 0 Errors</div>
</body>
</html>
+23
View File
@@ -0,0 +1,23 @@
<!DOCTYPE html>
<html lang="tr">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>YakNet Dynamic Demo (Fixed)</title>
<!-- Styles omitted for brevity -->
</head>
<body>
<!-- Content omitted for brevity -->
<h1>My Dynamic Site (Accessible)</h1>
<p>Success widget demonstration.</p>
<!-- The widget injected by HtmlReporter when setShowSuccess(true) is called -->
<div id='yaknet-a11y-success' onclick='this.style.display="none"'
style='position:fixed; bottom:10px; right:10px; background:#28a745; color:white; padding:8px 15px; border-radius:4px; font-family:sans-serif; font-weight:bold; box-shadow: 0 2px 5px rgba(0,0,0,0.2); cursor:pointer; z-index:9999;'>
✅ Accessibility: 0 Errors
</div>
</body>
</html>
+70
View File
@@ -0,0 +1,70 @@
<?php
// 1. Setup Autoloading (Mocking Composer)
require_once __DIR__ . '/../src/Scanner.php';
require_once __DIR__ . '/../src/Violation.php';
require_once __DIR__ . '/../src/SourceLocator.php';
require_once __DIR__ . '/../src/Reporter/HtmlReporter.php';
require_once __DIR__ . '/../src/Rule/RuleInterface.php';
require_once __DIR__ . '/../src/Rules/ImgAltText.php';
require_once __DIR__ . '/../src/Rules/FormLabel.php';
require_once __DIR__ . '/../src/Rules/HtmlHasLang.php';
require_once __DIR__ . '/../src/Rules/EmptyLink.php';
use YakNet\AccessibilityConsole\Scanner;
use YakNet\AccessibilityConsole\SourceLocator;
use YakNet\AccessibilityConsole\Reporter\HtmlReporter;
use YakNet\AccessibilityConsole\Rules\ImgAltText;
use YakNet\AccessibilityConsole\Rules\FormLabel;
// 2. Start Buffering to capture output
ob_start();
// 3. Simple Router
$page = $_GET['page'] ?? 'home';
$viewFile = __DIR__ . "/views/{$page}.php";
if (!file_exists($viewFile)) {
$viewFile = __DIR__ . '/views/home.php';
}
// 4. Render Layout (which includes the view)
$viewPath = $viewFile;
include __DIR__ . '/views/layout.php';
// 5. Capture Output
$html = ob_get_clean();
// 6. RUN ACCESSIBILITY SCANNER
// ==========================================
$scanner = new Scanner();
$scanner->addRule(new ImgAltText());
$scanner->addRule(new FormLabel());
$scanner->addRule(new \YakNet\AccessibilityConsole\Rules\HtmlHasLang());
$scanner->addRule(new \YakNet\AccessibilityConsole\Rules\EmptyLink());
// Scan the captured HTML
$violations = $scanner->scan($html);
if (!empty($violations)) {
// Locate Sources
// We point it to the 'views' directory so it knows where to look for the error source
$locator = new SourceLocator(__DIR__ . '/views');
foreach ($violations as $violation) {
$location = $locator->locate($violation->snippet);
if ($location) {
$violation->setSourceLocation($location['file'], $location['line']);
}
}
// Render Report
$reporter = new HtmlReporter();
$reportHtml = $reporter->render($violations);
// Inject into body
$html = str_replace('</body>', $reportHtml . '</body>', $html);
}
// 7. Output Final HTML
echo $html;
+75
View File
@@ -0,0 +1,75 @@
<?php
// 1. Setup Autoloading
require_once __DIR__ . '/../src/Scanner.php';
require_once __DIR__ . '/../src/Violation.php';
require_once __DIR__ . '/../src/SourceLocator.php';
require_once __DIR__ . '/../src/Reporter/HtmlReporter.php';
require_once __DIR__ . '/../src/Rule/RuleInterface.php';
require_once __DIR__ . '/../src/Rules/ImgAltText.php';
require_once __DIR__ . '/../src/Rules/FormLabel.php';
require_once __DIR__ . '/../src/Rules/HtmlHasLang.php';
require_once __DIR__ . '/../src/Rules/EmptyLink.php';
use YakNet\AccessibilityConsole\Scanner;
use YakNet\AccessibilityConsole\SourceLocator;
use YakNet\AccessibilityConsole\Reporter\HtmlReporter;
use YakNet\AccessibilityConsole\Rules\ImgAltText;
use YakNet\AccessibilityConsole\Rules\FormLabel;
use YakNet\AccessibilityConsole\Rules\HtmlHasLang;
use YakNet\AccessibilityConsole\Rules\EmptyLink;
// 2. Start Buffering
ob_start();
// 3. Simple Router for Fixed Views
$page = $_GET['page'] ?? 'home';
$viewFile = __DIR__ . "/views-fixed/{$page}.php";
if (!file_exists($viewFile)) {
$viewFile = __DIR__ . '/views-fixed/home.php';
}
// 4. Render Layout
$viewPath = $viewFile;
include __DIR__ . '/views-fixed/layout.php';
// 5. Capture Output
$html = ob_get_clean();
// 6. RUN ACCESSIBILITY SCANNER
$scanner = new Scanner();
$scanner->addRule(new ImgAltText());
$scanner->addRule(new FormLabel());
$scanner->addRule(new HtmlHasLang());
$scanner->addRule(new EmptyLink());
$violations = $scanner->scan($html);
if (!empty($violations)) {
// Locate Sources
$locator = new SourceLocator(__DIR__ . '/views-fixed');
foreach ($violations as $violation) {
$location = $locator->locate($violation->snippet);
if ($location) {
$violation->setSourceLocation($location['file'], $location['line']);
}
}
$reporter = new HtmlReporter();
// Enable success widget for this demo
$reporter->setShowSuccess(true);
$reportHtml = $reporter->render($violations);
$html = str_replace('</body>', $reportHtml . '</body>', $html);
} else {
// Violations is empty, but render() will return the success widget because we set it to true
$reporter = new HtmlReporter();
$reporter->setShowSuccess(true);
$reportHtml = $reporter->render($violations);
$html = str_replace('</body>', $reportHtml . '</body>', $html);
}
echo $html;
+102
View File
@@ -0,0 +1,102 @@
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Accessibility Console Preview</title>
</head>
<body>
<h1>Accessibility Console Preview</h1>
<p>This is a static preview of how the error console looks.</p>
<p>Click the "Accessibility: 2 Errors" button in the bottom right.</p>
<!-- Hardcoded output from HtmlReporter for demonstration -->
<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: 2 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;'>
<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="logo.png" /&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;'>
C:\Users\User\Project\views\header.php<strong>:42</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;'>Form
field &lt;input&gt; missing label.</div>
<div style='font-size:12px; color:#555; margin-bottom:8px;'>Rule:
<code>form-label</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;input type="text" name="username" /&gt;
</div>
<div style='font-size:13px; color:#222;'>
<span style='color:#28a745; font-weight:bold;'>Fix:</span> Associate a &lt;label&gt;
via "for" attribute, wrap in &lt;label&gt;, or use "aria-label".
</div>
</td>
<td
style='padding:12px 15px; vertical-align:top; font-family:monospace; font-size:13px; color:#333;'>
<div style='margin-bottom:5px;'>
C:\Users\User\Project\views\login.php<strong>:15</strong>
</div>
</td>
</tr>
</tbody>
</table>
</div>
</div>
</div>
</body>
</html>
+32
View File
@@ -0,0 +1,32 @@
<h2>Contact Us</h2>
<p>Get in touch with us.</p>
<form action="" method="post">
<div style="margin-bottom: 1rem;">
<!-- FIXED: Wrapped in label -->
<label>
Name:
<input type="text" name="fullname" placeholder="John Doe" style="padding: 8px; width: 100%;">
</label>
</div>
<div style="margin-bottom: 1rem;">
<!-- FIXED: Added for/id association -->
<label for="email">Email Address</label>
<br>
<input type="email" id="email" name="email" style="padding: 8px; width: 100%;">
</div>
<div style="margin-bottom: 1rem;">
<label for="message">Message</label>
<br>
<textarea id="message" name="message" rows="5" style="width: 100%;"></textarea>
</div>
<!-- FIXED: Added inner text or aria-label -->
<a href="#" class="btn" aria-label="Send via WhatsApp">
<i class="fa fa-send"></i> Send
</a>
<button type="submit" class="btn">Send Message</button>
</form>
+36
View File
@@ -0,0 +1,36 @@
<h2>Latest Products</h2>
<p>Welcome to our accessible product catalog.</p>
<?php
$products = [
['id' => 1, 'name' => 'Super Gadget', 'image' => 'gadget.jpg', 'price' => '$99'],
['id' => 2, 'name' => 'Mega Widget', 'image' => 'widget.png', 'price' => '$49'],
['id' => 3, 'name' => 'Ultra Thing', 'image' => 'thing.jpg', 'price' => '$199'],
];
?>
<div class="products">
<?php foreach ($products as $product): ?>
<div class="card">
<!-- FIXED: Added alt attribute describing the product -->
<img src="images/<?php echo $product['image']; ?>" width="100"
alt="<?php echo htmlspecialchars($product['name']); ?>">
<h3>
<?php echo $product['name']; ?>
</h3>
<p>
<?php echo $product['price']; ?>
</p>
<button class="btn">Buy Now</button>
</div>
<?php endforeach; ?>
</div>
<hr>
<h3>Sponsors</h3>
<div>
<!-- FIXED: Added empty alt="" for decorative images -->
<img src="https://via.placeholder.com/150" alt="">
<img src="https://via.placeholder.com/150" alt="">
</div>
+75
View File
@@ -0,0 +1,75 @@
<!DOCTYPE html>
<html lang="tr"> <!-- FIXED: Added lang attribute -->
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>YakNet Dynamic Demo (Fixed)</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: #28a745;
color: white;
padding: 0.5rem 1rem;
border: none;
cursor: pointer;
}
</style>
</head>
<body>
<header>
<div class="container" style="padding: 0;">
<h1>My Dynamic Site (Accessible)</h1>
<nav>
<a href="?page=home">Home</a>
<a href="?page=contact">Contact</a>
<a href="?page=about">About</a>
<!-- FIXED: Added aria-label to empty link, or removed it/added text -->
<a href="#" class="btn" aria-label="Profile">👤</a>
</nav>
</div>
</header>
<main class="container">
<?php include $viewPath; ?>
</main>
<footer style="text-align: center; padding: 2rem; background: #f4f4f4; margin-top: 2rem;">
&copy;
<?php echo date('Y'); ?> YakNet Demo
</footer>
</body>
</html>
+31
View File
@@ -0,0 +1,31 @@
<h2>Contact Us</h2>
<p>Get in touch with us.</p>
<form action="" method="post">
<div style="margin-bottom: 1rem;">
<!-- ERROR: No label for input -->
<div>Name:</div>
<input type="text" name="fullname" placeholder="John Doe" style="padding: 8px; width: 100%;">
</div>
<div style="margin-bottom: 1rem;">
<!-- ERROR: Label exists but not associated with For/ID -->
<label>Email Address</label>
<br>
<input type="email" name="email" style="padding: 8px; width: 100%;">
</div>
<div style="margin-bottom: 1rem;">
<label for="message">Message</label>
<br>
<textarea id="message" name="message" rows="5" style="width: 100%;"></textarea>
</div>
<!-- ERROR: Submit button without clear text if it was an input type=image, but button is usually fine.
Let's add a problematic icon link -->
<a href="#" class="btn">
<i class="fa fa-send"></i> <!-- Empty link text error (if we had that rule) -->
</a>
<button type="submit" class="btn">Send Message</button>
</form>
+36
View File
@@ -0,0 +1,36 @@
<h2>Latest Products</h2>
<p>Welcome to our dynamic product catalog. (Intentionally filled with errors)</p>
<?php
$products = [
['id' => 1, 'name' => 'Super Gadget', 'image' => 'gadget.jpg', 'price' => '$99'],
['id' => 2, 'name' => 'Mega Widget', 'image' => 'widget.png', 'price' => '$49'],
['id' => 3, 'name' => 'Ultra Thing', 'image' => 'thing.jpg', 'price' => '$199'],
];
?>
<div class="products">
<?php foreach ($products as $product): ?>
<div class="card">
<!-- ERROR: Dynamic image without alt text -->
<img src="images/<?php echo $product['image']; ?>" width="100">
<h3>
<?php echo $product['name']; ?>
</h3>
<p>
<?php echo $product['price']; ?>
</p>
<button class="btn">Buy Now</button>
<!-- Error: Button might need specific accessible name if icon-only, but text is okay here. -->
</div>
<?php endforeach; ?>
</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>
+74
View File
@@ -0,0 +1,74 @@
<!DOCTYPE html>
<html> <!-- Missing lang attribute error -->
<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>
<a href="#" class="btn"></a> <!-- Error: Empty Link -->
</nav>
</div>
</header>
<main class="container">
<?php include $viewPath; ?>
</main>
<footer style="text-align: center; padding: 2rem; background: #f4f4f4; margin-top: 2rem;">
&copy;
<?php echo date('Y'); ?> YakNet Demo
</footer>
</body>
</html>