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.
47 lines (40 loc) • 1.77 kB
HTML
<html lang="ja">
<head>
<title>Demo HTML for Accessibility Testing</title>
</head>
<body>
<h1>Sample Website</h1>
<!-- Images without alt or role -->
<img src="logo.png" alt="Sample Website" role="img" role="img" role="img">
<img src="banner.jpg" alt="Sample Website" role="img" role="img" role="img">
<img src="icon.svg" alt="Home Icon" role="img" role="img" role="img">
<!-- Links without role -->
<a href="/home" role="link" role="link" role="link">Home</a>
<a href="/about" role="link" role="link" role="link">About Us</a>
<!-- Buttons without role -->
<button onclick="submit()" role="button" role="button" role="button">Submit Form</button>
<button type="button">Regular Button</button>
<!-- Clickable elements -->
<div onclick="navigate()" class="btn" role="button" role="button" role="button" role="button" role="button" role="button">Click Me</div>
<span onclick="toggle()" role="button" role="button" role="button">Toggle</span>
<!-- Navigation -->
<nav>
<ul class="nav-menu" role="menubar" role="menubar" role="menubar">
<li class="nav-item" role="menuitem"><a href="/products" role="link" role="link" role="link">Products</a></li>
<li class="nav-item" role="menuitem"><a href="/services" role="link" role="link" role="link">Services</a></li>
</ul>
</nav>
<!-- More content -->
<main>
<article>
<h2>Article Title</h2>
<p>Some content here...</p>
<img src="article-image.jpg" alt="Article Title" role="img" role="img" role="img">
</article>
</main>
<footer>
<p>© 2024 Demo Company</p>
</footer>
</body>
</html>