accessibility-console/demo/broken.html

<!DOCTYPE html>
<html>
<head>
    <title>Broken Page</title>
</head>
<body>
    <h1 id="main-content">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>
    
    <!-- Positive tabindex -->
    <a href="/keyboard" tabindex="5">Keyboard test</a>

    <!-- Duplicate ID -->
    <div id="main-content">This is a duplicate main-content ID div!</div>

    <!-- Low Contrast -->
    <p style="color: #888888; background-color: #999999;">This text has extremely low contrast ratio!</p>

    <!-- Invalid ARIA role and missing controls target -->
    <div role="cool-widget" aria-controls="non-existent-popup">WAI-ARIA elements</div>

    <!-- Missing Iframe Title -->
    <iframe src="https://www.youtube.com/embed/dQw4w9WgXcQ" width="560" height="315"></iframe>

    <!-- New WCAG Rule Violations for testing -->
    
    <!-- LinkTextGeneric: Generic text without context -->
    <a href="/read-more">Click here</a>
    <a href="/devam-oku">devamını oku</a>
    
    <!-- PlaceholderAsLabel: Input relying only on placeholder -->
    <input type="text" placeholder="Search website...">

    <!-- ImageAltRedundant: Redundant words in alt text -->
    <img src="logo2.png" alt="logo of our company">
    <img src="profile.jpg" alt="profile photo of john doe">

    <!-- AriaHiddenFocusable: Focusable element hidden with aria-hidden="true" -->
    <div aria-hidden="true">
        <button type="button">Hidden click</button>
    </div>
    <a href="#" aria-hidden="true">Hidden link</a>

    <p>This page has multiple accessibility issues.</p>
</body>
</html>