Overview Project — Build and Audit an Accessible Landing Page
In this tutorial, you will learn about Overview Project. We cover key concepts, practical examples, and best practices to help you master this topic.
Apply Accessibility fundamentals by building an accessible landing page with semantic HTML, keyboard navigation, color contrast, alt text, and ARIA landmarks, then audit it against WCAG criteria.
What You'll Learn
You will build a complete accessible landing page from scratch, then audit it using automated tools and manual testing. This project applies every concept from the 14 previous lessons.
Why It Matters
Theory without practice is forgettable. This project gives you hands-on experience creating an accessible interface and evaluating it against real standards.
Real-World Use
DodaTech runs a similar project with every new hire. Building an accessible component from scratch reveals what you understand and where you need more practice.
flowchart LR A[Plan] --> B[Build] B --> C[Test] C --> D[Audit] D --> E[Fix] E --> F[Review] A:::current classDef current fill:#f90,color:#fff,stroke:#333,stroke-width:2px
Project Requirements
Build a landing page for Durga Antivirus Pro that includes:
- Skip navigation link
- Semantic HTML structure with proper landmarks
- Navigation menu with at least 4 links
- A hero section with heading, text, and call-to-action button
- A features section with at least 3 feature cards
- A contact form with name, email, and message fields
- An image with descriptive alt text
- Visible focus indicators on all interactive elements
- Color contrast meeting WCAG AA minimum
- At least one ARIA landmark
Starter Template
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Durga Antivirus Pro — Protect Your Digital Life</title>
<style>
:root {
--primary: #005fcc;
--text: #1a1a1a;
--bg: #ffffff;
}
*:focus-visible {
outline: 2px solid var(--primary);
outline-offset: 2px;
}
body {
font-family: system-ui, sans-serif;
color: var(--text);
background: var(--bg);
line-height: 1.6;
margin: 0;
}
.skip-link {
position: absolute;
top: -40px;
left: 0;
background: var(--primary);
color: white;
padding: 8px;
}
.skip-link:focus {
top: 0;
}
.container {
max-width: 1200px;
margin: 0 auto;
padding: 1rem;
}
nav ul {
list-style: none;
display: flex;
gap: 1rem;
padding: 0;
}
.card {
border: 1px solid #ddd;
padding: 1.5rem;
border-radius: 8px;
}
.btn {
display: inline-block;
padding: 12px 24px;
min-height: 44px;
background: var(--primary);
color: white;
border: none;
border-radius: 4px;
font-size: 1rem;
cursor: pointer;
}
.btn:hover {
background: #004c9e;
}
form label {
display: block;
margin-top: 1rem;
}
form input, form textarea {
width: 100%;
padding: 8px;
margin-top: 4px;
border: 1px solid #ccc;
border-radius: 4px;
}
.grid {
display: grid;
grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
gap: 1.5rem;
}
</style>
</head>
<body>
<a href="#main-content" class="skip-link">Skip to main content</a>
<header role="banner">
<div class="container">
<nav aria-label="Main navigation">
<ul>
<li><a href="/">Home</a></li>
<li><a href="/features">Features</a></li>
<li><a href="/pricing">Pricing</a></li>
<li><a href="/contact">Contact</a></li>
</ul>
</nav>
</div>
</header>
<main id="main-content" role="main">
<section aria-labelledby="hero-title">
<div class="container">
<h1 id="hero-title">Protect Your Digital Life with Durga Antivirus Pro</h1>
<p>Real-time threat detection, zero-day protection, and a simple interface designed for everyone. Trusted by 2 million users worldwide.</p>
<button class="btn" type="button">Start your free trial</button>
</div>
</section>
<section aria-labelledby="features-title">
<div class="container">
<h2 id="features-title">Why Choose Durga Antivirus Pro</h2>
<div class="grid">
<article class="card">
<h3>Real-Time Protection</h3>
<p>Our AI-powered engine detects and blocks threats before they can harm your system, with 99.7 percent detection rate.</p>
</article>
<article class="card">
<h3>Easy to Use</h3>
<p>Plain language alerts and simple controls mean you do not need to be a security expert to stay safe.</p>
</article>
<article class="card">
<h3>Accessible by Design</h3>
<p>WCAG 2.2 AA compliant with full keyboard support, screen reader compatibility, and high contrast themes.</p>
</article>
</div>
</div>
</section>
<section aria-labelledby="contact-title">
<div class="container">
<h2 id="contact-title">Get in Touch</h2>
<form>
<label for="name">Name</label>
<input type="text" id="name" name="name" autocomplete="name" required>
<label for="email">Email</label>
<input type="email" id="email" name="email" autocomplete="email" required>
<label for="message">Message</label>
<textarea id="message" name="message" rows="4"></textarea>
<button class="btn" type="submit" style="margin-top:1rem;">Send message</button>
</form>
</div>
</section>
</main>
<footer role="contentinfo">
<div class="container">
<p>© 2026 DodaTech. Built by the developers of Doda Browser, DodaZIP, and Durga Antivirus Pro.</p>
</div>
</footer>
</body>
</html>
Expected behavior: Skip link appears on first Tab press. Navigation, main, and footer landmarks are announced by screen readers. All interactive elements have visible focus indicators. The form has proper labels associated with inputs.
Audit Checklist
Test your page against these criteria:
- Skip navigation link visible on focus
- All navigation links are keyboard accessible
- Heading hierarchy is logical (h1, h2, h3)
- All images have appropriate alt text
- Color contrast meets 4.5:1 for normal text
- Form labels are properly associated
- Focus indicators visible on all elements
- Page works at 200 percent zoom without horizontal scroll
- Landmarks are properly defined with ARIA roles
- No errors from WAVE or axe-core
Common Mistakes
1. Forgetting the Skip Link
The skip link is the first thing keyboard users encounter. Without it, they must Tab through every navigation link to reach content.
2. Skipping Heading Hierarchy
Jumping from h1 to h4 breaks screen reader navigation. Headings must descend in order without skipping levels.
3. Missing Label Associations
Labels without the for attribute are not associated with inputs. Screen readers will not announce the label.
4. Using Color Alone for Interactive States
Button hover and focus states should not rely on color changes alone. Add border, shadow, or scale changes.
5. Not Testing with Real Assistive Technology
Running WAVE is not enough. Test with NVDA or VoiceOver to hear how your page sounds.
6. Ignoring the Focus Order
Ensure Tab order matches the visual order. CSS order changes can break the logical Tab sequence.
7. Not Validating the HTML
Invalid HTML can break accessibility. Run your page through the W3C HTML validator.
Practice Questions
1. What is the first element keyboard users encounter on your page?
The skip navigation link. It must be the first focusable element.
2. Why does the form use label for instead of wrapping input in label?
The for attribute explicitly associates the label with the input, which works even when they are not adjacent in the DOM.
3. What happens if you remove the lang="en" attribute?
Screen readers would use the system default language for pronunciation, which may be incorrect.
4. Why are the feature cards wrapped in article elements?
The article element provides semantic meaning that screen readers can announce, especially when combined with heading elements.
5. Challenge: Run your page through the WAVE evaluation tool. Fix all errors, contrast errors, and alerts. Report which issues you found and how you fixed them.
FAQ
Mini Project
This is the mini project. Complete the landing page above, audit it with WAVE and manual keyboard testing, and create a one-page report of your findings with screenshots of any issues you discovered.
What's Next
You have completed the Accessibility Overview module. Continue to Accessibility Laws to learn about the legal requirements for digital accessibility. Or explore WCAG Compliance for the technical standards.
Built by the developers of DodaTech
Doda Browser, DodaZIP & Durga Antivirus Pro