179 lines
5.4 KiB
HTML
179 lines
5.4 KiB
HTML
<!DOCTYPE html>
|
|
<html>
|
|
<head>
|
|
<meta charset="UTF-8">
|
|
<title>Inaccessible Test Page</title>
|
|
<style>
|
|
body {
|
|
font-family: Arial, sans-serif;
|
|
padding: 20px;
|
|
background-color: #ffffff;
|
|
width: 1400px; /* Fixed width causes horizontal scroll at small sizes */
|
|
}
|
|
|
|
/* Low contrast text - WCAG violation */
|
|
.low-contrast {
|
|
color: #999999;
|
|
background-color: #ffffff;
|
|
}
|
|
|
|
/* Very low contrast - WCAG violation */
|
|
.very-low-contrast {
|
|
color: #cccccc;
|
|
background-color: #ffffff;
|
|
}
|
|
|
|
/* No focus indicators - WCAG violation */
|
|
a:focus, button:focus, input:focus {
|
|
outline: none;
|
|
}
|
|
|
|
/* Clickable div without keyboard access - WCAG violation */
|
|
.fake-button {
|
|
padding: 10px 20px;
|
|
background-color: #0066cc;
|
|
color: #ffffff;
|
|
cursor: pointer;
|
|
display: inline-block;
|
|
}
|
|
|
|
/* Fixed font sizes prevent zoom - WCAG violation */
|
|
.fixed-size {
|
|
font-size: 12px !important;
|
|
}
|
|
|
|
/* Form without labels - WCAG violation */
|
|
input {
|
|
margin: 10px 0;
|
|
padding: 5px;
|
|
}
|
|
|
|
/* Image without alt text will be added in HTML */
|
|
</style>
|
|
</head>
|
|
<body>
|
|
<!-- Missing lang attribute on html element - WCAG violation -->
|
|
<!-- Missing skip link - WCAG violation -->
|
|
|
|
<h1>Inaccessible Test Page</h1>
|
|
|
|
<!-- Low contrast text - WCAG 1.4.3 violation -->
|
|
<p class="low-contrast">
|
|
This text has insufficient contrast ratio (3.2:1) and fails WCAG AA requirements.
|
|
</p>
|
|
|
|
<p class="very-low-contrast">
|
|
This text has very low contrast (1.5:1) and is barely readable.
|
|
</p>
|
|
|
|
<!-- Clickable div without keyboard access - WCAG 2.1.1 violation -->
|
|
<div class="fake-button" onclick="alert('Clicked')">
|
|
Click Me (Not Keyboard Accessible)
|
|
</div>
|
|
|
|
<!-- Link without focus indicator - WCAG 2.4.7 violation -->
|
|
<a href="#nowhere">Link Without Focus Indicator</a>
|
|
|
|
<!-- Form without labels - WCAG 1.3.1, 3.3.2 violations -->
|
|
<form>
|
|
<input type="text" placeholder="Name">
|
|
<input type="email" placeholder="Email">
|
|
<input type="submit" value="Submit">
|
|
</form>
|
|
|
|
<!-- Image without alt text - WCAG 1.1.1 violation -->
|
|
<img src="data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='200' height='150'%3E%3Crect fill='%23ff0000' width='200' height='150'/%3E%3C/svg%3E">
|
|
|
|
<!-- Empty link - WCAG 2.4.4 violation -->
|
|
<a href="#"></a>
|
|
|
|
<!-- Button with no accessible name - WCAG 4.1.2 violation -->
|
|
<button></button>
|
|
|
|
<!-- Heading hierarchy skip - WCAG 1.3.1 violation -->
|
|
<h1>Heading 1</h1>
|
|
<h3>Heading 3 (skipped h2)</h3>
|
|
|
|
<!-- Table without headers - WCAG 1.3.1 violation -->
|
|
<table>
|
|
<tr>
|
|
<td>Name</td>
|
|
<td>Email</td>
|
|
</tr>
|
|
<tr>
|
|
<td>John Doe</td>
|
|
<td>john@example.com</td>
|
|
</tr>
|
|
</table>
|
|
|
|
<!-- Fixed width content causes horizontal scroll at 320px - WCAG 1.4.10 violation -->
|
|
<div style="width: 1200px; background-color: #f0f0f0; padding: 20px;">
|
|
This content has a fixed width and will cause horizontal scrolling on small screens.
|
|
</div>
|
|
|
|
<!-- Text with fixed pixel size prevents zoom - WCAG 1.4.4 violation -->
|
|
<p class="fixed-size">
|
|
This text has a fixed pixel size and may not resize properly when zoomed.
|
|
</p>
|
|
|
|
<!-- Keyboard trap (simulated with tabindex) -->
|
|
<div tabindex="0" onkeydown="event.preventDefault()">
|
|
This element traps keyboard focus
|
|
</div>
|
|
|
|
<!-- Color used as only visual means - WCAG 1.4.1 violation -->
|
|
<p>
|
|
<span style="color: red;">Required fields</span> must be filled out.
|
|
</p>
|
|
|
|
<!-- Insufficient color contrast on interactive element -->
|
|
<button style="background-color: #ffff00; color: #ffffff; border: none; padding: 10px;">
|
|
Low Contrast Button
|
|
</button>
|
|
|
|
<!-- Missing form field association -->
|
|
<div>
|
|
<span>Username</span>
|
|
<input type="text">
|
|
</div>
|
|
|
|
<!-- Redundant link text - WCAG 2.4.4 violation -->
|
|
<a href="#link1">Click here</a>
|
|
<a href="#link2">Click here</a>
|
|
<a href="#link3">Click here</a>
|
|
|
|
<!-- Empty heading - WCAG 2.4.6 violation -->
|
|
<h2></h2>
|
|
|
|
<!-- Iframe without title - WCAG 4.1.2 violation -->
|
|
<iframe src="about:blank"></iframe>
|
|
|
|
<!-- Duplicate ID - WCAG 4.1.1 violation -->
|
|
<div id="duplicate">First</div>
|
|
<div id="duplicate">Second</div>
|
|
|
|
<!-- Missing required ARIA attributes -->
|
|
<div role="button">Button Without Tabindex</div>
|
|
|
|
<!-- Incorrect ARIA usage -->
|
|
<div role="heading">Not Actually a Heading</div>
|
|
|
|
<!-- Text that's too small -->
|
|
<p style="font-size: 8px;">This text is too small to read comfortably.</p>
|
|
|
|
<!-- Link that opens in new window without warning - WCAG 3.2.2 violation -->
|
|
<a href="https://example.com" target="_blank">Opens in New Window</a>
|
|
|
|
<!-- Form with no submit button -->
|
|
<form>
|
|
<input type="text" placeholder="Search">
|
|
</form>
|
|
|
|
<!-- Content that requires horizontal scrolling -->
|
|
<div style="overflow-x: scroll; white-space: nowrap;">
|
|
<p>This content requires horizontal scrolling which violates WCAG 1.4.10 at narrow viewports.</p>
|
|
</div>
|
|
</body>
|
|
</html>
|
|
|