{% extends "base.html" %}
{% block title %}Accessible Page - VulnAPI{% endblock %}
{% block content %}
<main role="main" aria-labelledby="page-title">
  <h1 id="page-title">Accessible Page</h1>
  <p>This page follows WCAG 2.1 AA guidelines.</p>

  <section aria-labelledby="form-title">
    <h2 id="form-title">Contact Form</h2>
    <form role="form" aria-label="Contact form">
      <div class="form-group">
        <label for="acc-name">Full Name <span aria-label="required">*</span></label>
        <input type="text" id="acc-name" name="name" required aria-required="true"
               aria-describedby="name-hint">
        <small id="name-hint">Enter your first and last name.</small>
      </div>
      <div class="form-group">
        <label for="acc-email">Email Address <span aria-label="required">*</span></label>
        <input type="email" id="acc-email" name="email" required aria-required="true">
      </div>
      <div class="form-group">
        <label for="acc-message">Message</label>
        <textarea id="acc-message" name="message" rows="4" style="width:100%;padding:0.5rem;"></textarea>
      </div>
      <button type="submit" class="btn btn-primary" aria-label="Submit contact form">Submit</button>
    </form>
  </section>

  <section aria-labelledby="info-title" style="margin-top:2rem;">
    <h2 id="info-title">Information</h2>
    <img src="/static/placeholder.png" alt="Placeholder image showing application logo" width="100" height="100">
    <p>All images have descriptive alt text. Color contrast meets WCAG AA ratio of 4.5:1.</p>
    <nav aria-label="Pagination">
      <ul role="list" style="list-style:none;display:flex;gap:0.5rem;">
        <li><a href="?page=1" aria-label="Page 1">1</a></li>
        <li><a href="?page=2" aria-label="Page 2" aria-current="page">2</a></li>
        <li><a href="?page=3" aria-label="Page 3">3</a></li>
      </ul>
    </nav>
  </section>
</main>
{% endblock %}