accessibility-console/demo/broken.html

<!DOCTYPE html>
<html lang="tr"><!-- FIXED: Added lang attribute (WCAG 3.1.1) -->
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Erişilebilir Demo Sayfa</title><!-- FIXED: Non-empty page title (WCAG 2.4.2) -->
    <style>
        body {
            font-family: sans-serif;
            margin: 0;
            padding: 2rem;
            background: #ffffff;
            color: #1a1a1a; /* FIXED: High contrast text (WCAG 1.4.3) */
            line-height: 1.6;
        }
        /* FIXED: Sufficient contrast (WCAG 1.4.3) - was #888 on #999, now dark on white */
        .low-contrast-example {
            color: #595959; /* 7:1 contrast on white */
            background-color: #ffffff;
            padding: 0.5rem;
        }
        label {
            display: block;
            margin-bottom: 0.25rem;
            font-weight: 600;
        }
        input {
            padding: 0.4rem;
            border: 1px solid #ccc;
            border-radius: 4px;
            width: 100%;
            max-width: 300px;
        }
        iframe {
            border: none;
        }
        video {
            display: block;
            margin-top: 0.5rem;
        }
        [role="button"] {
            cursor: pointer;
        }
    </style>
</head>
<body>
    <h1 id="main-content">Erişilebilir Demo Sayfa</h1>
    <!-- FIXED: Removed duplicate id="main-content" (WCAG 4.1.1) -->

    <!-- FIXED: Added alt attribute (WCAG 1.1.1) -->
    <img src="logo.png" alt="YakNet Şirket">

    <!-- FIXED: Added descriptive link text (WCAG 2.4.4) -->
    <a href="https://google.com">Google Ana Sayfasına Git</a>

    <!-- FIXED: Added discernible button text (WCAG 4.1.2) -->
    <button type="submit">Formu Gönder</button>

    <!-- FIXED: Removed positive tabindex (WCAG 2.4.3) — use natural DOM order -->
    <a href="/keyboard">Klavye Testi</a>

    <!-- FIXED: Removed duplicate id="main-content" — unique wrapper instead -->
    <div id="duplicate-content-wrapper">Bu bölümün içeriği buradadır.</div>

    <!-- FIXED: High contrast text (WCAG 1.4.3) -->
    <p class="low-contrast-example">Bu metnin kontrast oranı WCAG AA gereksinimlerini karşılamaktadır.</p>

    <!-- FIXED: Valid WAI-ARIA role (WCAG 4.1.2) and removed reference to non-existent element -->
    <div role="region" aria-label="WAI-ARIA Örnek Bölüm">WAI-ARIA bölüm örneği</div>

    <!-- FIXED: Added descriptive title to iframe (WCAG 4.1.2) -->
    <iframe
        src="https://www.youtube.com/embed/aqz-KE-bpKQ"
        width="560"
        height="315"
        title="YouTube Video: Örnek Video İçeriği"
    ></iframe>

    <!-- FIXED: Descriptive link text instead of generic "click here" / "devamını oku" (WCAG 2.4.4) -->
    <a href="/read-more">Makaleyi Devamı: WCAG Erişilebilirlik Kılavuzu</a>
    <a href="/devam-oku">Şiir Serisinin Devamını Oku: "Bahar Rüzgarı"</a>

    <!-- FIXED: Added associated <label> element (WCAG 1.3.1 & 3.3.2) -->
    <div>
        <label for="search-input">Web sitesinde ara</label>
        <input type="text" id="search-input" placeholder="Arama teriminizi girin...">
    </div>

    <!-- FIXED: Removed redundant words "logo" and "photo" from alt texts (WCAG 1.1.1) -->
    <img src="logo2.png" alt="Şirketimizin simgesi">
    <img src="profile.jpg" alt="John Doe vesikalık">

    <!-- FIXED: Removed aria-hidden="true" from focusable elements (WCAG 4.1.2) -->
    <div>
        <button type="button">Gizli Olmayan Tıklanabilir Düğme</button>
    </div>
    <a href="#">Normal Bağlantı</a>

    <!-- FIXED: Added non-empty heading text (WCAG 2.4.6) -->
    <h2>Alt Bölüm Başlığı</h2>

    <!-- FIXED: Added <track> element for video captions (WCAG 1.2.2) -->
    <video
        src="https://commondatastorage.googleapis.com/gtv-videos-bucket/sample/ForBiggerBlazes.mp4"
        width="320"
        height="240"
        controls
    >
        <track kind="captions" src="captions.vtt" srclang="tr" label="Türkçe Altyazı" default>
    </video>

    <!-- FIXED: Added non-empty label text (WCAG 1.3.1) -->
    <label for="name-input">Ad Soyad</label>
    <input type="text" id="name-input" name="name">

    <!-- FIXED: Added tabindex="0" to make role="button" keyboard focusable (WCAG 2.1.1) -->
    <div role="button" tabindex="0">Tıklanabilir Div Düğme (Erişilebilir)</div>

    <p>Bu sayfa WCAG 2.1 erişilebilirlik standartlarına uygun olarak düzenlenmiştir.</p>
</body>
</html>