Skip to content

Testing 508 git actions with a site that will fail #45

New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Merged
mr-flowjangles merged 3 commits into from
Feb 12, 2026
Merged

Testing 508 git actions with a site that will fail #45

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
3 commits
Select commit Hold shift + click to select a range
89807e8
Testing 508 git actions with a site that will fail
Feb 11, 2026
f44cace
Testing 508 git actions with a site that will fail
Feb 11, 2026
13befee
Testing 508 git actions with a site that will fail: config update
Feb 11, 2026
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
10 changes: 3 additions & 7 deletions .github/workflows/accessibility.yml
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -17,17 +17,13 @@ jobs:
with:
node-version: '20'

- name: Install pa11y
run: npm install -g pa11y
- name: Install pa11y-ci
run: npm install -g pa11y-ci

- name: Start local server
run: |
npx http-server app -p 8080 -s &
sleep 3

- name: Run 508 accessibility scan
run: |
pa11y http://localhost:8080/index.html \
--runner htmlcs \
--standard Section508 \
--timeout 30000
run: pa11y-ci
17 changes: 17 additions & 0 deletions .pa11yci
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -0,0 +1,17 @@
{
"defaults": {
"runner": "htmlcs",
"standard": "WCAG2AA",
"timeout": 30000,
"chromeLaunchConfig": {
"args": [
"--no-sandbox",
"--disable-setuid-sandbox"
]
}
},
"urls": [
"http://localhost:8080/index.html",
"http://localhost:8080/cat-facts.html"
]
}
282 changes: 282 additions & 0 deletions app/cat-facts.html
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -0,0 +1,282 @@
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<style>
* { margin: 0; padding: 0; box-sizing: border-box; }

body {
font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
min-height: 100vh;
color: #333;
}

.hero {
text-align: center;
padding: 4rem 2rem 2rem;
color: white;
}

.hero h3 {
font-size: 3rem;
margin-bottom: 0.5rem;
}

.hero p {
font-size: 1.1rem;
color: #d4c6e8;
}

.cards {
display: grid;
grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
gap: 1.5rem;
padding: 2rem;
max-width: 1200px;
margin: 0 auto;
}

.card {
background: white;
border-radius: 12px;
overflow: hidden;
box-shadow: 0 4px 15px rgba(0,0,0,0.1);
transition: transform 0.2s;
}

.card:hover { transform: translateY(-4px); }

.card img {
width: 100%;
height: 200px;
object-fit: cover;
}

.card-body {
padding: 1.5rem;
}

.card-body h5 {
font-size: 1.25rem;
margin-bottom: 0.5rem;
color: #764ba2;
}

.card-body p {
line-height: 1.6;
color: #ccc;
}

.fun-fact {
color: red;
font-weight: bold;
font-size: 0.85rem;
margin-top: 0.75rem;
}

.newsletter {
background: rgba(255,255,255,0.1);
backdrop-filter: blur(10px);
padding: 3rem 2rem;
text-align: center;
margin: 2rem auto;
max-width: 600px;
border-radius: 12px;
}

.newsletter h4 {
color: white;
font-size: 1.5rem;
margin-bottom: 1rem;
}

.newsletter input {
padding: 0.75rem 1rem;
border: none;
border-radius: 8px 0 0 8px;
font-size: 1rem;
width: 250px;
}

.newsletter button {
padding: 0.75rem 1.5rem;
background: #764ba2;
color: white;
border: none;
border-radius: 0 8px 8px 0;
font-size: 1rem;
cursor: pointer;
}

.stats {
display: flex;
justify-content: center;
gap: 3rem;
padding: 2rem;
color: white;
}

.stat {
text-align: center;
}

.stat .number {
font-size: 2.5rem;
font-weight: bold;
}

.stat .label {
font-size: 0.85rem;
color: #d4c6e8;
}

table {
width: 90%;
max-width: 800px;
margin: 2rem auto;
border-collapse: collapse;
background: white;
border-radius: 12px;
overflow: hidden;
box-shadow: 0 4px 15px rgba(0,0,0,0.1);
}

td, th {
padding: 1rem;
text-align: left;
border-bottom: 1px solid #eee;
}

tr:nth-child(even) { background: #f8f7fc; }

footer {
text-align: center;
padding: 2rem;
color: #d4c6e8;
font-size: 0.85rem;
}

.clickable {
color: #d4c6e8;
text-decoration: none;
}
</style>
</head>
<body>

<!-- VIOLATION: Skips h1, h2 — starts at h3 (heading hierarchy) -->
<div class="hero">
<h3>Amazing Cat Facts</h3>
<p>Everything you never knew you needed to know about cats</p>
</div>

<div class="stats">
<div class="stat">
<div class="number">73M</div>
<!-- VIOLATION: Color alone conveys meaning (red = important) -->
<div class="label">Pet Cats in US</div>
</div>
<div class="stat">
<div class="number">30%</div>
<div class="label">Of Households</div>
</div>
<div class="stat">
<div class="number">9,500</div>
<div class="label">Years Domesticated</div>
</div>
</div>

<div class="cards">

<!-- VIOLATION: img has no alt attribute -->
<div class="card">
<img src="https://placecats.com/600/400">
<div class="card-body">
<h5>Sleep Champions</h5>
<p>Cats sleep an average of 12-16 hours per day. That means a nine-year-old cat has been awake for only three years of its life.</p>
<!-- VIOLATION: Uses color alone to indicate importance -->
<div class="fun-fact">★ Important fact</div>
</div>
</div>

<!-- VIOLATION: img has empty alt -->
<div class="card">
<img src="https://placecats.com/601/400" alt="">
<div class="card-body">
<h5>Super Speed</h5>
<p>A house cat can reach speeds up to 30 mph in short bursts. That's faster than Usain Bolt's top speed of 27.8 mph.</p>
<div class="fun-fact">★ Important fact</div>
</div>
</div>

<!-- VIOLATION: img with no alt -->
<div class="card">
<img src="https://placecats.com/602/400">
<div class="card-body">
<h5>Whisker Wisdom</h5>
<p>A cat's whiskers are roughly as wide as its body and help it determine whether it can fit through an opening.</p>
<div class="fun-fact">★ Important fact</div>
</div>
</div>
</div>

<!-- VIOLATION: Table without proper th scope or caption -->
<table>
<tr>
<td><b>Breed</b></td>
<td><b>Origin</b></td>
<td><b>Lifespan</b></td>
<td><b>Temperament</b></td>
</tr>
<tr>
<td>Maine Coon</td>
<td>United States</td>
<td>12-15 years</td>
<td>Gentle, playful</td>
</tr>
<tr>
<td>Siamese</td>
<td>Thailand</td>
<td>15-20 years</td>
<td>Vocal, social</td>
</tr>
<tr>
<td>Persian</td>
<td>Iran</td>
<td>12-17 years</td>
<td>Calm, affectionate</td>
</tr>
<tr>
<td>Bengal</td>
<td>United States</td>
<td>12-16 years</td>
<td>Energetic, curious</td>
</tr>
</table>

<!-- VIOLATION: Form inputs with no labels -->
<div class="newsletter">
<h4>Subscribe to Cat Facts</h4>
<div>
<input type="text" placeholder="Your name">
<input type="email" placeholder="Enter your email">
<button>Subscribe</button>
</div>
</div>

<!-- VIOLATION: Link with no discernible text -->
<footer>
<p>Made with love for cats everywhere</p>
<a class="clickable" href="/privacy">
<img src="https://placecats.com/20/20">
</a>
<!-- VIOLATION: onclick on div (not keyboard accessible) -->
<div onclick="alert('meow!')" style="cursor: pointer; color: white; margin-top: 1rem;">
Click for a surprise!
</div>
</footer>

</body>
</html>
Loading