MPA Accessibility — Building Inclusive Multi-Page Applications
In this tutorial, you will learn about MPA Accessibility. We cover key concepts, practical examples, and best practices to help you master this topic.
MPA accessibility covers semantic HTML, skip navigation links, focus management on page load, ARIA landmarks, accessible forms, screen reader announcements, and keyboard navigation in server-rendered pages.
What You'll Learn
By the end of this tutorial, you will understand how to build accessible MPAs using semantic HTML elements, ARIA landmarks, skip navigation links, focus management during page transitions, accessible form controls with proper labels and error states, and keyboard navigation patterns.
Why It Matters
One billion people worldwide have a disability. Accessibility is a legal requirement in many countries (ADA, Section 508, EN 301 549). MPAs have inherent accessibility advantages over SPAs because the browser handles navigation natively — but you must still implement semantic HTML, focus management, and proper form labeling. Accessible MPAs reach more users and rank better in search.
Real-World Use
After a lawsuit, a major e-commerce MPA rebuilt their site to meet WCAG 2.1 AA standards. Changes included: proper heading hierarchy, descriptive link text, form error announcements, skip navigation links, and keyboard-accessible product filters. The rebuild increased overall traffic by 12 percent and reduced support calls from screen reader users by 40 percent.
Accessible MPA Structure
┌──────────────────────────────────────────────────────────┐
│ Accessible MPA Page Structure │
├──────────────────────────────────────────────────────────┤
│ │
│ <a href="#main" class="skip-link">Skip to content</a> │
│ │
│ <header role="banner"> │
│ <nav aria-label="Main navigation">...</nav> │
│ </header> │
│ │
│ <main id="main" role="main"> │
│ <h1>Page Title</h1> │
│ <nav aria-label="Breadcrumb">...</nav> │
│ <section aria-labelledby="section-heading"> │
│ <h2 id="section-heading">Section Title</h2> │
│ </section> │
│ </main> │
│ │
│ <footer role="contentinfo">...</footer> │
│ │
└──────────────────────────────────────────────────────────┘
Think of accessibility like building a building with ramps, elevators, and braille signs. MPAs are already an accessible building because the structure is straightforward. But you still need to label rooms (ARIA landmarks), provide clear signs (descriptive links), ensure door handles work for everyone (keyboard access), and announce floor changes (focus management).
Semantic HTML and ARIA Landmarks
<!-- Accessible MPA template -->
<!DOCTYPE html>
<html lang="en">
<head>
<title>Accessible Product Page — My Store</title>
</head>
<body>
<!-- Skip navigation link — first focusable element -->
<a href="#main-content"
class="skip-link"
tabindex="1">
Skip to main content
</a>
<!-- Header with navigation -->
<header role="banner">
<nav aria-label="Main navigation">
<ul>
<li><a href="/" aria-current="page">Home</a></li>
<li><a href="/products">Products</a></li>
<li><a href="/about">About</a></li>
<li><a href="/contact">Contact</a></li>
</ul>
</nav>
<!-- Search form with proper label -->
<form role="search" action="/search" method="GET">
<label for="search-input" class="sr-only">
Search products
</label>
<input type="search"
id="search-input"
name="q"
placeholder="Search products..."
aria-label="Search products">
<button type="submit" aria-label="Search">Go</button>
</form>
</header>
<!-- Main content -->
<main id="main-content" role="main">
<nav aria-label="Breadcrumb">
<ol>
<li><a href="/">Home</a></li>
<li><a href="/products">Products</a></li>
<li aria-current="page">Product Name</li>
</ol>
</nav>
<h1>Product Name</h1>
<!-- Product image with alt text -->
<img src="/images/product.jpg"
alt="Product Name — 100% organic cotton t-shirt in blue"
loading="lazy">
<!-- Price with accessible labeling -->
<p aria-label="Price: $29.99 USD">
<span aria-hidden="true">$29.99</span>
</p>
</main>
<!-- Footer -->
<footer role="contentinfo">
<p>© 2026 My Store. All rights reserved.</p>
</footer>
</body>
</html>
Accessible Form Error Handling
<!-- Accessible form with error handling -->
<form method="POST" action="/register" novalidate>
<h2>Create Account</h2>
<!-- Name field -->
<div class="form-field">
<label for="name">Full Name</label>
<input type="text"
id="name"
name="name"
required
minlength="2"
aria-describedby="name-hint name-error"
aria-invalid="<%= locals.errors?.name ? 'true' : 'false' %>">
<p id="name-hint" class="hint">
Must be at least 2 characters
</p>
<% if (locals.errors?.name) { %>
<p id="name-error"
class="error"
role="alert">
<%= errors.name %>
</p>
<% } %>
</div>
<!-- Email field -->
<div class="form-field">
<label for="email">Email Address</label>
<input type="email"
id="email"
name="email"
required
aria-describedby="email-error"
aria-invalid="<%= locals.errors?.email ? 'true' : 'false' %>">
<% if (locals.errors?.email) { %>
<p id="email-error"
class="error"
role="alert">
<%= errors.email %>
</p>
<% } %>
</div>
<button type="submit">Create Account</button>
</form>
Focus Management and Announcements
// Focus management on page load
(function() {
function managePageFocus() {
// Move focus to main content for screen readers
const main = document.querySelector('main');
const heading = document.querySelector('h1');
if (heading) {
if (!heading.hasAttribute('tabindex')) {
heading.setAttribute('tabindex', '-1');
}
heading.focus({ preventScroll: true });
} else if (main) {
main.setAttribute('tabindex', '-1');
main.focus({ preventScroll: true });
}
// Announce page change to screen readers
const announcer = document.getElementById('a11y-announcer');
if (announcer) {
announcer.textContent = `Page loaded: ${document.title}`;
}
}
// Create live region for announcements
if (!document.getElementById('a11y-announcer')) {
const announcer = document.createElement('div');
announcer.id = 'a11y-announcer';
announcer.setAttribute('aria-live', 'polite');
announcer.setAttribute('aria-atomic', 'true');
announcer.classList.add('sr-only');
document.body.appendChild(announcer);
}
// Run on page load
if (document.readyState === 'loading') {
document.addEventListener('DOMContentLoaded', managePageFocus);
} else {
managePageFocus();
}
})();
Common Mistakes
- Missing or empty alt text on images. Every image needs alt text. Decorative images use alt="". Informative images describe their content. Missing alt text causes screen readers to read the filename.
- Poor color contrast. Text must have a contrast ratio of at least 4.5:1 for normal text and 3:1 for large text. Use tools like WebAIM Contrast Checker to verify.
- Keyboard traps. Interactive elements must be focusable and operable by keyboard. Focusable elements should have visible focus indicators. Avoid tabindex values greater than 0.
- Forms without explicit labels. Every form input must have an associated label. Do not rely solely on placeholder text, which disappears and has poor contrast.
- Dynamic content without announcements. Content that updates without page reload (AJAX, HTMX) must be announced to screen readers using aria-live regions.
Practice Questions
- What is the purpose of a skip navigation link?
- How do you associate a form label with its input?
- What is an ARIA landmark and why is it important?
- How do you announce dynamic content updates to screen readers?
- What is the minimum color contrast ratio for normal text?
Challenge: Perform an accessibility audit of an MPA using the WAVE tool, axe DevTools, and keyboard-only navigation. Fix all issues found: add skip navigation links, ensure proper heading hierarchy (h1 to h6), label all form inputs, add alt text to images, fix color contrast issues, ensure keyboard operability, and test with a screen reader (NVDA or VoiceOver).
FAQ
Mini Project
Build an accessible MPA with: skip navigation link as the first focusable element, proper heading hierarchy on every page, all form inputs with explicit labels and error announcements, descriptive link text (no "click here"), ARIA landmarks (banner, navigation, main, contentinfo, search), keyboard-accessible navigation, focus management on page load, and color contrast meeting WCAG AA standards. Test with axe DevTools and NVDA screen reader.
What's Next
You understand MPA accessibility. Now learn about MPA Security to protect your application from common web vulnerabilities.
Built by the developers of DodaTech
Doda Browser, DodaZIP & Durga Antivirus Pro