ada tools update
This commit is contained in:
Josh at WLTechBlog
178
test/testdata/test-inaccessible.html
vendored
Normal file
178
test/testdata/test-inaccessible.html
vendored
Normal file
@@ -0,0 +1,178 @@
|
||||
<!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>
|
||||
|
||||
Reference in New Issue
Block a user