gbu-accessibility-package
Version:
Comprehensive accessibility fixes for HTML files. Smart context-aware alt text generation, form labels, button names, link names, landmarks, heading analysis, and WCAG-compliant role attributes. Covers major axe DevTools issues with individual fix modes.
150 lines (130 loc) • 5.76 kB
HTML
<html lang="ja">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Enhanced Alt Attribute Test Cases</title>
</head>
<body>
<header>
<h1>Enhanced Alt Attribute Testing</h1>
<p>Test cases for diverse alt attribute checking and generation</p>
</header>
<main>
<!-- Test Case 1: Missing alt attribute -->
<section>
<h2>Company Logo</h2>
<p>Welcome to our innovative technology company</p>
<img src="company-logo.png" width="200" height="100">
</section>
<!-- Test Case 2: Empty alt attribute for content image -->
<section>
<h2>Product Showcase</h2>
<p>Our latest smartphone with advanced features</p>
<img src="smartphone-product.jpg" alt="" width="300" height="200">
</section>
<!-- Test Case 3: Alt text too long -->
<section>
<h2>Team Photo</h2>
<img src="team-photo.jpg" alt="This is a very long description of our amazing team photo showing all the wonderful people who work at our company including engineers, designers, managers, and other staff members working together in our beautiful modern office space" width="400" height="300">
</section>
<!-- Test Case 4: Alt text with redundant words -->
<section>
<h2>Office Environment</h2>
<img src="office.jpg" alt="Image of office picture showing workplace photo" width="350" height="250">
</section>
<!-- Test Case 5: Generic alt text -->
<section>
<h2>Learn More</h2>
<p>Discover our services</p>
<a href="/services">
<img src="arrow-right.png" alt="Click here" width="24" height="24">
</a>
</section>
<!-- Test Case 6: Data visualization without proper description -->
<section>
<h2>Sales Performance</h2>
<p>Our sales increased by 25% this quarter</p>
<img src="sales-chart.png" alt="Chart" width="500" height="300">
</section>
<!-- Test Case 7: Decorative image with content alt -->
<section>
<h2>Welcome Section</h2>
<img src="decorative-border.png" alt="Beautiful decorative border image" width="100%" height="20">
<p>Welcome to our website</p>
</section>
<!-- Test Case 8: Functional icon without proper description -->
<section>
<h2>Contact Us</h2>
<button onclick="openChat()">
<img src="chat-icon.svg" alt="Icon" width="20" height="20">
</button>
</section>
<!-- Test Case 9: Complex image needing detailed description -->
<section>
<h2>System Architecture</h2>
<p>Our microservices architecture overview</p>
<img src="architecture-diagram.png" alt="Diagram" width="600" height="400">
</section>
<!-- Test Case 10: Image with filename in alt text -->
<section>
<h2>Product Features</h2>
<img src="feature-screenshot.png" alt="feature-screenshot.png showing app interface" width="300" height="200">
</section>
<!-- Test Case 11: Logo without "logo" in alt text -->
<section>
<h2>Partners</h2>
<img src="partner-logo.png" alt="Microsoft" width="150" height="75">
</section>
<!-- Test Case 12: Chart with some data context -->
<section>
<h2>Growth Metrics</h2>
<p>User growth from 1000 to 5000 users, showing 400% increase</p>
<img src="growth-chart.png" alt="User growth statistics" width="400" height="250">
</section>
<!-- Test Case 13: Image in figure with figcaption -->
<figure>
<img src="research-data.jpg" alt="" width="350" height="200">
<figcaption>Research findings from our latest study on user behavior patterns</figcaption>
</figure>
<!-- Test Case 14: Multiple images with similar generic alt text -->
<section>
<h2>Gallery</h2>
<img src="photo1.jpg" alt="Photo" width="200" height="150">
<img src="photo2.jpg" alt="Photo" width="200" height="150">
<img src="photo3.jpg" alt="Photo" width="200" height="150">
</section>
<!-- Test Case 15: Image with inconsistent alt and aria-label -->
<section>
<h2>Navigation</h2>
<img src="home-icon.png" alt="Home" aria-label="Go to homepage" width="32" height="32">
</section>
<!-- Test Case 16: Food image in restaurant context -->
<section>
<h2>Today's Special</h2>
<p>Delicious authentic Japanese cuisine</p>
<img src="sushi-plate.jpg" alt="" width="300" height="200">
</section>
<!-- Test Case 17: Technology device in business context -->
<section>
<h2>Enterprise Solutions</h2>
<p>Professional laptop for business productivity</p>
<img src="business-laptop.jpg" width="250" height="180">
</section>
<!-- Test Case 18: Nature image in lifestyle context -->
<section>
<h2>Wellness Program</h2>
<p>Find peace and tranquility in nature</p>
<img src="peaceful-forest.jpg" alt="" width="400" height="250">
</section>
</main>
<footer>
<p>Enhanced Alt Attribute Test Cases - GBU Accessibility Tool</p>
</footer>
<script>
function openChat() {
alert('Chat opened!');
}
</script>
</body>
</html>