index.html

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="utf-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>Blazor Accessibility Target</title>
    <link rel="stylesheet" href="app.css" />
</head>
<body>
    <div class="page">
        <header class="banner">
            <h2>Blazor Accessibility Target</h2>
        </header>

        <div class="content">
            <div class="hero">
                <h2>Welcome to the Accessibility Report Target</h2>
                <p class="muted">This page intentionally contains accessibility issues for the workshop.</p>

                <img src="data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='300' height='150'%3E%3Crect width='300' height='150' fill='%236e7681'/%3E%3Ctext x='50%25' y='50%25' dominant-baseline='middle' text-anchor='middle' fill='%23ffffff' font-family='sans-serif' font-size='18'%3EWorkshop%3C/text%3E%3C/svg%3E" />

                <h4>Quick actions</h4>
                <form>
                    <input type="text" />
                    <button type="submit">Submit</button>
                </form>

                <h3>About this app</h3>
                <p>
                    The accessibility report generator uses the GitHub Copilot SDK and the Playwright MCP server
                    to analyze this page and produce a WCAG-aligned report.
                </p>

                <a href="https://github.com/features/copilot" class="low-contrast-link">Learn more</a>
            </div>
        </div>

        <footer class="footer">
            Built for the Copilot SDK Workshop
        </footer>
    </div>
</body>
</html>