-
Notifications
You must be signed in to change notification settings - Fork 0
Expand file tree
/
Copy pathindex.html
More file actions
144 lines (135 loc) · 5.57 KB
/
index.html
File metadata and controls
144 lines (135 loc) · 5.57 KB
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
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
137
138
139
140
141
142
143
144
<!DOCTYPE html>
<!-- Intentionally missing lang attribute -->
<html>
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Accessibility Pitfalls Demo</title>
<link rel="stylesheet" href="styles.css">
</head>
<body>
<!-- No skip link to bypass navigation -->
<header>
<div class="logo">ACME Corp</div>
<nav>
<ul>
<li><a href="index.html">Home</a></li>
<li><a href="products.html">Products</a></li>
<li><a href="gallery.html">Gallery</a></li>
<li><a href="about.html">About</a></li>
<li><a href="contact.html">Contact</a></li>
</ul>
</nav>
</header>
<main>
<!-- Inconsistent heading structure (skipping from h1 to h3) -->
<h1>Welcome to ACME Corporation</h1>
<h3>Your One-Stop Solution Provider</h3>
<!-- Missing alt text on image -->
<img src="https://placehold.co/800x400" class="hero-image">
<section class="features">
<!-- Use of color only to convey information -->
<div class="feature">
<span class="status-dot available"></span>
<h5>Premium Plan</h5>
<p>Our most popular offering with all the features you need.</p>
</div>
<div class="feature">
<span class="status-dot unavailable"></span>
<h5>Enterprise Solution</h5>
<p>Custom solutions for large businesses.</p>
</div>
<div class="feature">
<span class="status-dot coming-soon"></span>
<h5>Mobile Platform</h5>
<p>Access our services on the go.</p>
</div>
</section>
<!-- Poor color contrast in this section -->
<section class="poor-contrast">
<h4>Limited Time Offer!</h4>
<p>Sign up today and get 25% off your first purchase.</p>
<button>Learn More</button>
</section>
<!-- Inaccessible form with no labels -->
<section class="contact-form">
<h2>Contact Us</h2>
<form>
<!-- No labels for form fields -->
<input type="text" placeholder="Full Name">
<input type="email" placeholder="Email Address">
<select>
<option value="" disabled selected>Select a topic</option>
<option value="support">Customer Support</option>
<option value="sales">Sales Inquiry</option>
<option value="other">Other</option>
</select>
<textarea placeholder="Your Message"></textarea>
<!-- Non-semantic button with no ARIA role -->
<div class="submit-btn">Submit</div>
</form>
</section>
<!-- Interactive elements that aren't keyboard accessible -->
<section class="gallery">
<h4>Our Projects</h4>
<div class="carousel">
<!-- Custom carousel with mouse-only interaction -->
<div class="carousel-item active">
<!-- Another image missing alt text -->
<img src="https://placehold.co/300x200">
<div class="info">Project Alpha</div>
</div>
<div class="carousel-item">
<img src="https://placehold.co/300x200">
<div class="info">Project Beta</div>
</div>
<div class="carousel-item">
<img src="https://placehold.co/300x200">
<div class="info">Project Gamma</div>
</div>
<div class="carousel-nav">
<span class="dot active"></span>
<span class="dot"></span>
<span class="dot"></span>
</div>
</div>
</section>
<!-- Dynamic content that isn't announced to assistive technologies -->
<section class="notifications">
<h4>Notifications</h4>
<div id="notification-area">
<!-- Notifications will be dynamically added here without ARIA live regions -->
</div>
<button id="add-notification">Show New Notification</button>
</section>
</main>
<footer>
<div class="columns">
<div class="column">
<h6>About Us</h6>
<p>ACME Corporation is a leading provider of innovative solutions for businesses of all sizes.</p>
</div>
<div class="column">
<h6>Quick Links</h6>
<ul>
<li><a href="#">Privacy Policy</a></li>
<li><a href="#">Terms of Service</a></li>
<li><a href="#">Careers</a></li>
</ul>
</div>
<div class="column">
<h6>Follow Us</h6>
<!-- Social media icons without proper labels -->
<div class="social-icons">
<a href="#" class="icon facebook"></a>
<a href="#" class="icon twitter"></a>
<a href="#" class="icon instagram"></a>
<a href="#" class="icon linkedin"></a>
</div>
</div>
</div>
<p class="copyright">© 2023 ACME Corporation. All rights reserved.</p>
</footer>
<script src="script.js"></script>
</body>
</html>