accessibilityos/test-accessibility-code.html at main · UtkarsHMer05/accessibilityos · GitHub

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
<!-- TEST CODE FOR ACCESSIBILITY VERIFICATION -->
<!-- This code has multiple accessibility issues for Navigator to find -->

<!DOCTYPE html>
<html>

<head>
    <meta charset="UTF-8">
    <title></title>
    <style>
        .btn {
            padding: 10px 20px;
            background: blue;
            color: white;
            cursor: pointer;
        }

        .hero-img {
            width: 100%;
            height: 400px;
            object-fit: cover;
        }
    </style>
</head>

<body>
    <header>
        <nav>
            <a href="/">Home</a>
            <a href="/about">Click here</a>
            <a href="/products">Click here for more</a>
        </nav>
    </header>

    <main>
        <h1>Welcome to Our Store</h1>

        <!-- Issue: Image missing alt text -->
        <img src="hero-banner.jpg" class="hero-img">

        <!-- Issue: Div used as button -->
        <div class="btn" onclick="addToCart()">Add to Cart</div>

        <!-- Issue: Form inputs missing labels -->
        <form action="/subscribe">
            <input type="text" name="name" placeholder="Your name">
            <input type="email" name="email" placeholder="Your email">
            <input type="submit" value="Subscribe">
        </form>

        <!-- Issue: Another image without alt -->
        <img src="product-1.jpg">

        <h3>Our Products</h3>

        <!-- Issue: Table without proper headers -->
        <table>
            <tr>
                <td>Product Name</td>
                <td>Price</td>
                <td>Quantity</td>
            </tr>
            <tr>
                <td>Widget A</td>
                <td>$19.99</td>
                <td>10</td>
            </tr>
        </table>

        <!-- Issue: Link with no text -->
        <a href="/download"><img src="download-icon.png"></a>

        <!-- Issue: Low color contrast (hypothetical) -->
        <p style="color: #999; background: #aaa;">Important notice here</p>
        </form>
    </main>

    <footer>
        <p>Contact us: <a href="mailto:info@store.com">here</a></p>
    </footer>
</body>

</html>