{% extends "base.html" %}
{% block title %}Inaccessible Page - VulnAPI{% endblock %}
{% block content %}
<!-- INTENTIONAL WCAG VIOLATIONS - for testing purposes -->
<h1>Inaccessible Page</h1>
<p>This page intentionally violates WCAG guidelines for testing accessibility scanners.</p>

<!-- VIOLATION 1: Image without alt text -->
<img src="/static/placeholder.png">
<img src="/static/logo.png">

<!-- VIOLATION 2: Low contrast text (white on light gray) -->
<div style="background:#f0f0f0;padding:1rem;margin:1rem 0;">
  <p style="color:#ffffff;">This text has very low contrast ratio (white on light gray).</p>
  <p style="color:#cccccc;">This text is also barely visible.</p>
</div>

<!-- VIOLATION 3: Form inputs without labels -->
<div style="margin:1rem 0;">
  <input type="text" placeholder="Email">
  <input type="text" placeholder="Username">
  <input type="password" placeholder="Password">
  <button onclick="void(0)">Submit</button>
</div>

<!-- VIOLATION 4: Missing ARIA roles on interactive elements -->
<div onclick="alert('clicked')" style="cursor:pointer;padding:0.5rem;background:#eee;margin:0.5rem 0;">
  Clickable div without role or keyboard support
</div>
<div onclick="void(0)" style="cursor:pointer;padding:0.5rem;background:#ddd;margin:0.5rem 0;">
  Another clickable div with no ARIA
</div>

<!-- VIOLATION 5: Empty link -->
<a href="/dashboard"></a>
<a href="/settings"><img src="/static/icon.png"></a>

<!-- VIOLATION 6: Missing language attribute on content -->
<table>
  <tr>
    <th>Name</th>
    <th>Value</th>
  </tr>
  <tr>
    <td>Item 1</td>
    <td>Low contrast cell</td>
  </tr>
</table>
{% endblock %}