shortcut/cremote
1
0
Fork 0
Code Issues Pull Requests Packages Projects Releases Wiki Activity

ada tools update

Browse Source
This commit is contained in:
Josh at WLTechBlog
2025-10-02 11:40:26 -05:00
parent 2ef7512918
commit 2817b8a049
11 changed files with 6010 additions and 180 deletions
Download Patch File Download Diff File Expand all files Collapse all files

282
test/testdata/test-accessible.html vendored Normal file
View File

@@ -0,0 +1,282 @@
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Accessible Test Page</title>
<style>
* {
box-sizing: border-box;
}
body {
font-family: Arial, sans-serif;
line-height: 1.6;
max-width: 1200px;
margin: 0 auto;
padding: 20px;
background-color: #ffffff;
color: #000000;
}
h1, h2, h3 {
color: #000000;
}
/* High contrast text */
.high-contrast {
color: #000000;
background-color: #ffffff;
}
/* Visible focus indicators */
a:focus, button:focus, input:focus, select:focus, textarea:focus {
outline: 3px solid #0066cc;
outline-offset: 2px;
}
/* Responsive layout */
.container {
display: flex;
flex-wrap: wrap;
gap: 20px;
}
.card {
flex: 1 1 300px;
padding: 20px;
border: 1px solid #000000;
border-radius: 4px;
}
/* Form styles */
label {
display: block;
margin-bottom: 5px;
font-weight: bold;
}
input, select, textarea {
width: 100%;
padding: 8px;
margin-bottom: 15px;
border: 1px solid #000000;
border-radius: 4px;
}
button {
padding: 10px 20px;
background-color: #0066cc;
color: #ffffff;
border: none;
border-radius: 4px;
cursor: pointer;
font-size: 16px;
}
button:hover {
background-color: #0052a3;
}
/* Navigation */
nav {
margin-bottom: 20px;
}
nav ul {
list-style: none;
padding: 0;
display: flex;
gap: 20px;
}
nav a {
color: #0066cc;
text-decoration: none;
padding: 5px 10px;
}
nav a:hover {
text-decoration: underline;
}
/* Skip link */
.skip-link {
position: absolute;
top: -40px;
left: 0;
background: #000000;
color: #ffffff;
padding: 8px;
text-decoration: none;
z-index: 100;
}
.skip-link:focus {
top: 0;
}
/* Responsive images */
img {
max-width: 100%;
height: auto;
}
/* Media queries for responsive design */
@media (max-width: 768px) {
.container {
flex-direction: column;
}
nav ul {
flex-direction: column;
gap: 10px;
}
}
@media (max-width: 320px) {
body {
padding: 10px;
}
.card {
padding: 10px;
}
}
</style>
</head>
<body>
<a href="#main-content" class="skip-link">Skip to main content</a>
<header>
<h1>Accessible Test Page</h1>
<nav aria-label="Main navigation">
<ul>
<li><a href="#home">Home</a></li>
<li><a href="#about">About</a></li>
<li><a href="#services">Services</a></li>
<li><a href="#contact">Contact</a></li>
</ul>
</nav>
</header>
<main id="main-content">
<section>
<h2>Welcome</h2>
<p class="high-contrast">
This is an accessible test page designed to pass WCAG 2.1 Level AA criteria.
It includes proper semantic HTML, high contrast colors, keyboard navigation,
and responsive design.
</p>
</section>
<section>
<h2>Features</h2>
<div class="container">
<div class="card">
<h3>High Contrast</h3>
<p>All text meets WCAG AA contrast requirements (4.5:1 for normal text, 3:1 for large text).</p>
</div>
<div class="card">
<h3>Keyboard Navigation</h3>
<p>All interactive elements are keyboard accessible with visible focus indicators.</p>
</div>
<div class="card">
<h3>Responsive Design</h3>
<p>Content reflows properly at 320px width without horizontal scrolling.</p>
</div>
</div>
</section>
<section>
<h2>Interactive Elements</h2>
<button type="button">Click Me</button>
<a href="#example">Example Link</a>
</section>
<section>
<h2>Contact Form</h2>
<form>
<div>
<label for="name">Name:</label>
<input type="text" id="name" name="name" required aria-required="true">
</div>
<div>
<label for="email">Email:</label>
<input type="email" id="email" name="email" required aria-required="true">
</div>
<div>
<label for="subject">Subject:</label>
<select id="subject" name="subject">
<option value="">Select a subject</option>
<option value="general">General Inquiry</option>
<option value="support">Support</option>
<option value="feedback">Feedback</option>
</select>
</div>
<div>
<label for="message">Message:</label>
<textarea id="message" name="message" rows="5" required aria-required="true"></textarea>
</div>
<button type="submit">Submit</button>
</form>
</section>
<section>
<h2>Images</h2>
<img src="data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='400' height='300'%3E%3Crect fill='%230066cc' width='400' height='300'/%3E%3Ctext x='50%25' y='50%25' dominant-baseline='middle' text-anchor='middle' fill='white' font-size='24'%3EAccessible Image%3C/text%3E%3C/svg%3E"
alt="Accessible image with descriptive alt text">
</section>
<section>
<h2>Lists</h2>
<ul>
<li>Semantic HTML elements</li>
<li>Proper heading hierarchy</li>
<li>ARIA labels where appropriate</li>
<li>Keyboard accessible controls</li>
</ul>
</section>
<section>
<h2>Table</h2>
<table>
<caption>WCAG 2.1 Compliance Summary</caption>
<thead>
<tr>
<th scope="col">Criterion</th>
<th scope="col">Level</th>
<th scope="col">Status</th>
</tr>
</thead>
<tbody>
<tr>
<td>1.4.3 Contrast (Minimum)</td>
<td>AA</td>
<td>Pass</td>
</tr>
<tr>
<td>2.1.1 Keyboard</td>
<td>A</td>
<td>Pass</td>
</tr>
<tr>
<td>1.4.10 Reflow</td>
<td>AA</td>
<td>Pass</td>
</tr>
</tbody>
</table>
</section>
</main>
<footer>
<p>&copy; 2025 Accessible Test Page. All rights reserved.</p>
</footer>
</body>
</html>

178
test/testdata/test-inaccessible.html vendored Normal file
View 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>