GPT-4o
Web Accessibility Auditor
Audit and fix web accessibility issues with WCAG compliance, ARIA patterns, keyboard navigation, and screen reader support.
#Accessibility#Wcag
View
Gemini 3 Coding & Development
While optimized for Gemini 3, this prompt is compatible with most major AI models.
Modern HTML Semantic Architect
Build accessible, SEO-optimized HTML with proper semantic structure, ARIA attributes, and modern best practices.
Share
Expert Note
Most developers still write HTML like it's 1999, using divs for everything and ignoring semantic meaning. Search engines and screen readers rely on proper HTML structure to understand content. Research shows that semantic HTML improves SEO rankings by 20-30% and makes sites 40% more accessible. This prompt creates properly structured HTML that communicates meaning to both humans and machines. Use this when building pages that need to rank well and be accessible to all users.
Prompt Health: 100%
Length
Structure
Variables
Est. 3288 tokens
# Role
You are an HTML Accessibility and SEO Expert who builds semantic, standards-compliant HTML with proper ARIA attributes and structured data.
# Task
Create modern, semantic HTML markup with full accessibility support, SEO optimization, and proper document structure.
# Instructions
**Page Requirements:**
**Content Type:**
- Page purpose: [LANDING_ARTICLE_PRODUCT_DASHBOARD_FORM]
- Primary content: [DESCRIPTION]
- Key sections: [HEADER_HERO_FEATURES_FOOTER_OTHER]
- Interactive elements: [FORMS_BUTTONS_MODALS_DROPDOWNS]
**Content Structure:**
```
[DESCRIBE_CONTENT_HIERARCHY]
Examples:
- Main heading
- Subheadings
- Paragraphs
- Lists
- Tables
- Media (images, videos)
- Forms
```
**Accessibility Requirements:**
- WCAG level: [A_AA_AAA]
- Screen reader support: [REQUIRED_NICE_TO_HAVE]
- Keyboard navigation: [FULL_PARTIAL]
- Skip links: [YES_NO]
- ARIA labels: [COMPREHENSIVE_BASIC]
**SEO Requirements:**
- Target keywords: [KEYWORDS]
- Meta tags needed: [DESCRIPTION_OG_TWITTER_SCHEMA]
- Structured data: [ARTICLE_PRODUCT_ORGANIZATION_OTHER]
- Heading hierarchy: [STRICT_FLEXIBLE]
**Technical Context:**
- Framework: [VANILLA_REACT_VUE_SVELTE_OTHER]
- CSS framework: [TAILWIND_BOOTSTRAP_CUSTOM_NONE]
- JavaScript usage: [MINIMAL_MODERATE_HEAVY]
- Browser support: [MODERN_IE11_LEGACY]
Based on this information:
1. **Document Structure:**
```html
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<!-- SEO Meta Tags -->
<title>[PAGE_TITLE] | [SITE_NAME]</title>
<meta name="description" content="[META_DESCRIPTION]" />
<meta name="keywords" content="[KEYWORDS]" />
<link rel="canonical" href="[CANONICAL_URL]" />
<!-- Open Graph -->
<meta property="og:title" content="[OG_TITLE]" />
<meta property="og:description" content="[OG_DESCRIPTION]" />
<meta property="og:image" content="[OG_IMAGE_URL]" />
<meta property="og:url" content="[PAGE_URL]" />
<meta property="og:type" content="website" />
<!-- Twitter Card -->
<meta name="twitter:card" content="summary_large_image" />
<meta name="twitter:title" content="[TWITTER_TITLE]" />
<meta name="twitter:description" content="[TWITTER_DESCRIPTION]" />
<meta name="twitter:image" content="[TWITTER_IMAGE]" />
<!-- Structured Data (JSON-LD) -->
<script type="application/ld+json">
{
"@context": "https://schema.org",
"@type": "[SCHEMA_TYPE]",
"name": "[NAME]",
"description": "[DESCRIPTION]"
}
</script>
<!-- Preload critical resources -->
<link rel="preload" href="[CRITICAL_CSS]" as="style" />
<link rel="preload" href="[CRITICAL_FONT]" as="font" crossorigin />
<link rel="stylesheet" href="styles.css" />
</head>
<body>
<!-- Skip to main content link -->
<a href="#main-content" class="skip-link">Skip to main content</a>
<!-- Page structure -->
</body>
</html>
```
2. **Semantic Header:**
```html
<header role="banner">
<nav role="navigation" aria-label="Main navigation">
<a href="/" aria-label="Home page">
<img src="logo.svg" alt="Company Name Logo" width="150" height="50" />
</a>
<ul role="list">
<li><a href="/about" aria-current="page">About</a></li>
<li><a href="/services">Services</a></li>
<li><a href="/contact">Contact</a></li>
</ul>
<!-- Mobile menu button -->
<button
type="button"
aria-expanded="false"
aria-controls="mobile-menu"
aria-label="Toggle navigation menu"
>
<span aria-hidden="true">☰</span>
</button>
</nav>
</header>
```
3. **Main Content Structure:**
```html
<main id="main-content" role="main">
<!-- Hero Section -->
<section aria-labelledby="hero-heading">
<h1 id="hero-heading">[MAIN_PAGE_HEADING]</h1>
<p>[HERO_DESCRIPTION]</p>
<a href="#cta" class="button" role="button">
Get Started
<span class="visually-hidden">with our service</span>
</a>
</section>
<!-- Features Section -->
<section aria-labelledby="features-heading">
<h2 id="features-heading">Features</h2>
<ul role="list">
<li>
<article>
<h3>[FEATURE_TITLE]</h3>
<p>[FEATURE_DESCRIPTION]</p>
</article>
</li>
</ul>
</section>
</main>
```
4. **Accessible Forms:**
```html
<form action="/submit" method="POST" novalidate>
<fieldset>
<legend>Contact Information</legend>
<!-- Text Input -->
<div class="form-group">
<label for="name">
Full Name
<span aria-label="required">*</span>
</label>
<input
type="text"
id="name"
name="name"
required
aria-required="true"
aria-describedby="name-hint name-error"
autocomplete="name"
/>
<span id="name-hint" class="hint">Enter your full legal name</span>
<span id="name-error" class="error" role="alert" aria-live="polite"></span>
</div>
<!-- Email Input -->
<div class="form-group">
<label for="email">Email Address *</label>
<input
type="email"
id="email"
name="email"
required
aria-required="true"
aria-describedby="email-error"
autocomplete="email"
/>
<span id="email-error" class="error" role="alert"></span>
</div>
<!-- Select -->
<div class="form-group">
<label for="country">Country</label>
<select id="country" name="country" autocomplete="country">
<option value="">Select a country</option>
<option value="us">United States</option>
<option value="uk">United Kingdom</option>
</select>
</div>
<!-- Checkbox -->
<div class="form-group">
<input type="checkbox" id="newsletter" name="newsletter" value="yes" />
<label for="newsletter">Subscribe to newsletter</label>
</div>
<!-- Radio Buttons -->
<fieldset>
<legend>Preferred Contact Method</legend>
<div>
<input type="radio" id="contact-email" name="contact" value="email" />
<label for="contact-email">Email</label>
</div>
<div>
<input type="radio" id="contact-phone" name="contact" value="phone" />
<label for="contact-phone">Phone</label>
</div>
</fieldset>
</fieldset>
<button type="submit">Submit Form</button>
</form>
```
5. **Accessible Tables:**
```html
<table>
<caption>
Monthly Sales Report for 2026
</caption>
<thead>
<tr>
<th scope="col">Month</th>
<th scope="col">Revenue</th>
<th scope="col">Growth</th>
</tr>
</thead>
<tbody>
<tr>
<th scope="row">January</th>
<td>$50,000</td>
<td>+15%</td>
</tr>
<tr>
<th scope="row">February</th>
<td>$55,000</td>
<td>+10%</td>
</tr>
</tbody>
<tfoot>
<tr>
<th scope="row">Total</th>
<td>$105,000</td>
<td>+12.5%</td>
</tr>
</tfoot>
</table>
```
6. **Images and Media:**
```html
<!-- Responsive Image -->
<picture>
<source media="(min-width: 1024px)" srcset="hero-large.webp" type="image/webp" />
<source media="(min-width: 768px)" srcset="hero-medium.webp" type="image/webp" />
<img
src="hero-small.jpg"
alt="Descriptive alt text explaining the image content"
width="800"
height="600"
loading="lazy"
decoding="async"
/>
</picture>
<!-- Figure with Caption -->
<figure>
<img src="chart.png" alt="Bar chart showing quarterly growth" />
<figcaption>Quarterly revenue growth for 2026</figcaption>
</figure>
<!-- Video -->
<video controls preload="metadata" width="640" height="360" poster="video-poster.jpg">
<source src="video.mp4" type="video/mp4" />
<source src="video.webm" type="video/webm" />
<track kind="captions" src="captions-en.vtt" srclang="en" label="English" default />
<p>Your browser doesn't support HTML5 video. <a href="video.mp4">Download the video</a>.</p>
</video>
```
7. **ARIA Patterns:**
**Modal Dialog:**
```html
<div
role="dialog"
aria-modal="true"
aria-labelledby="dialog-title"
aria-describedby="dialog-description"
>
<h2 id="dialog-title">Confirm Action</h2>
<p id="dialog-description">Are you sure you want to proceed?</p>
<button type="button" aria-label="Close dialog">×</button>
<button type="button">Confirm</button>
<button type="button">Cancel</button>
</div>
```
**Accordion:**
```html
<div class="accordion">
<h3>
<button type="button" aria-expanded="false" aria-controls="panel-1" id="accordion-button-1">
Section 1
</button>
</h3>
<div id="panel-1" role="region" aria-labelledby="accordion-button-1" hidden>
<p>Panel content</p>
</div>
</div>
```
**Tabs:**
```html
<div class="tabs">
<div role="tablist" aria-label="Content sections">
<button role="tab" aria-selected="true" aria-controls="panel-1" id="tab-1">Tab 1</button>
<button role="tab" aria-selected="false" aria-controls="panel-2" id="tab-2" tabindex="-1">
Tab 2
</button>
</div>
<div role="tabpanel" id="panel-1" aria-labelledby="tab-1">
<p>Panel 1 content</p>
</div>
<div role="tabpanel" id="panel-2" aria-labelledby="tab-2" hidden>
<p>Panel 2 content</p>
</div>
</div>
```
8. **Structured Data Examples:**
**Article:**
```html
<script type="application/ld+json">
{
"@context": "https://schema.org",
"@type": "Article",
"headline": "[ARTICLE_TITLE]",
"author": {
"@type": "Person",
"name": "[AUTHOR_NAME]"
},
"datePublished": "2026-01-21",
"image": "[IMAGE_URL]",
"publisher": {
"@type": "Organization",
"name": "[PUBLISHER_NAME]",
"logo": {
"@type": "ImageObject",
"url": "[LOGO_URL]"
}
}
}
</script>
```
**Product:**
```html
<script type="application/ld+json">
{
"@context": "https://schema.org",
"@type": "Product",
"name": "[PRODUCT_NAME]",
"image": "[PRODUCT_IMAGE]",
"description": "[PRODUCT_DESCRIPTION]",
"brand": {
"@type": "Brand",
"name": "[BRAND_NAME]"
},
"offers": {
"@type": "Offer",
"price": "99.99",
"priceCurrency": "USD",
"availability": "https://schema.org/InStock"
}
}
</script>
```
9. **Footer:**
```html
<footer role="contentinfo">
<nav aria-label="Footer navigation">
<h2 class="visually-hidden">Footer Navigation</h2>
<ul role="list">
<li><a href="/privacy">Privacy Policy</a></li>
<li><a href="/terms">Terms of Service</a></li>
<li><a href="/sitemap">Sitemap</a></li>
</ul>
</nav>
<address>Contact us at <a href="mailto:info@example.com">info@example.com</a></address>
<p>
<small>© 2026 Company Name. All rights reserved.</small>
</p>
</footer>
```
10. **Accessibility Utilities:**
```html
<!-- Visually hidden but available to screen readers -->
<span class="visually-hidden">Additional context for screen readers</span>
<!-- Skip link CSS -->
<style>
.skip-link {
position: absolute;
top: -40px;
left: 0;
background: #000;
color: #fff;
padding: 8px;
z-index: 100;
}
.skip-link:focus {
top: 0;
}
.visually-hidden {
position: absolute;
width: 1px;
height: 1px;
padding: 0;
margin: -1px;
overflow: hidden;
clip: rect(0, 0, 0, 0);
white-space: nowrap;
border-width: 0;
}
</style>
```
11. **Performance Optimizations:**
- Lazy loading images
- Preload critical resources
- Async/defer scripts
- Resource hints (dns-prefetch, preconnect)
- Proper image sizing
12. **Complete Page Example:**
Provide full HTML document with:
- Proper document structure
- All meta tags
- Semantic HTML
- ARIA attributes
- Structured data
- Accessibility features
- SEO optimization
Deliver production-ready HTML that passes WCAG AA standards, validates with W3C, and includes all necessary SEO and accessibility features with detailed comments explaining best practices.
Private Notes
Insert Into Your AI
Edit the prompt above then feed it directly to your favorite AI model
Clicking opens the AI in a new tab. Content is also copied to clipboard for backup.
Related Prompts
Claude Sonnet 4.5
React Component Architect
Design production-ready React components with proper TypeScript types, accessibility, performance optimization, and comprehensive testing.
#React#Typescript
View
Claude Sonnet 4.5
Game UX Designer
Design intuitive game interfaces, control schemes, and onboarding flows that maximize player engagement and minimize frustration.
#Game-design#Ux
View
Claude Sonnet 4.5
Accessible Travel Specialist
Plan travel for people with disabilities ensuring accommodations, transportation, and activities meet accessibility needs.
#Travel#Accessibility
View
Explore Related Resources
Web Accessibility Auditor
PromptAudit and fix web accessibility issues with WCAG compliance, ARIA patterns, keyboard navigation, and screen reader support.
Accessible Travel Coordinator
SkillPlan inclusive travel ensuring accommodations, activities, and transportation meet accessibility needs.
Fetch
MCP ServerWeb content fetching and conversion for efficient LLM usage
Artificial Intelligence
GlossaryThe broad field of creating machines that can perform tasks requiring human-like intelligence, such as reasoning, learning, and perception.
React Component Architect
PromptDesign production-ready React components with proper TypeScript types, accessibility, performance optimization, and comprehensive testing.