Git Komut Rehberi & Terminal Asistanı
Sıfırdan Yeni Bir Depo Başlatın:
Mevcut Bir Git Deposu veya Klasörü Gönderin:
Hataları Geri Alma, İptal & Temizlik:
Son commit'i geri al (yapılan değişiklikleri korur):
git reset --soft HEAD~1
Yapılan yerel değişiklikleri iptal et (çalışma ağacını temizler):
git restore .
Takip edilmeyen gereksiz dosyaları sil:
git clean -fd
Değişiklikleri geçici sakla ve geri getir (stash):
git stash git stash pop
Dal (Branch) ve Sürüm Etiketleri:
Yeni dal aç ve geçiş yap:
git checkout -b yeni-ozellik git push -u origin yeni-ozellik
Sürüm etiketi (tag) oluştur ve gönder:
git tag -a v1.0.0 -m "Sürüm 1.0.0" git push origin --tags
Major upgrade v2.0.0
This commit is contained in:
@@ -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>
|
||||
@@ -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;">
|
||||
© 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;'>×</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;'>
|
||||
<img src="images/gadget.jpg" width="100">
|
||||
</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;'>
|
||||
<img src="images/widget.png" width="100">
|
||||
</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>
|
||||
@@ -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;">
|
||||
© 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>
|
||||
@@ -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>
|
||||
@@ -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;
|
||||
@@ -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;
|
||||
@@ -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;'>×</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;'>
|
||||
<img src="logo.png" />
|
||||
</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 <input> 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;'>
|
||||
<input type="text" name="username" />
|
||||
</div>
|
||||
<div style='font-size:13px; color:#222;'>
|
||||
<span style='color:#28a745; font-weight:bold;'>Fix:</span> Associate a <label>
|
||||
via "for" attribute, wrap in <label>, 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>
|
||||
@@ -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>
|
||||
@@ -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>
|
||||
@@ -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;">
|
||||
©
|
||||
<?php echo date('Y'); ?> YakNet Demo
|
||||
</footer>
|
||||
</body>
|
||||
|
||||
</html>
|
||||
@@ -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>
|
||||
@@ -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>
|
||||
@@ -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;">
|
||||
©
|
||||
<?php echo date('Y'); ?> YakNet Demo
|
||||
</footer>
|
||||
</body>
|
||||
|
||||
</html>
|
||||
Reference in New Issue
Block a user