Access-Pro Customization Guide
SYSTEM451 — How to customize your templates while keeping full WCAG 2.2 compliance.
1. Getting Started
Place all HTML files in the same folder. Open index.html in a browser — all nav links will work automatically.
These templates use Tailwind CSS CDN — no npm, no build step, no configuration needed.
Files included in your download:
- ›index.html — Home page
- ›about.html — About page
- ›portfolio.html — Portfolio / case studies
- ›shop.html — Shop / pricing page
- ›services.html — Services page
- ›contact.html — Contact page with validated form
- ›accessibility.html — Accessibility statement
- ›guide.html — This customization guide
2. Changing Text
Text changes are the safest customization. Just keep these rules in mind:
✅ Safe to change freely
All visible text content: headings, paragraphs, button labels, nav items, footer text, addresses, and contact details.
⚠️ Change the text, not the tag
Heading tags (H1/H2/H3) — only change the text inside them, never change the tag level or skip levels. H1 must appear exactly once per page.
❌ Never remove
aria-label, aria-required, aria-describedby, aria-current, role attributes, and id attributes linked to ARIA. These are invisible to sighted users but critical for screen readers.
3. Changing Images
Content images (photos, products, screenshots)
Always add a descriptive alt attribute. Describe what is shown, not just the name. Example: alt="Screenshot of dashboard showing monthly revenue chart"
Decorative images (backgrounds, dividers)
Use an empty alt: alt="" — this tells screen readers to ignore it.
Images of text
Avoid entirely. Use HTML text instead — images of text cannot be zoomed accessibly.
Hero background images
These are decorative and use aria-hidden="true" in the HTML. Keep this attribute in place.
4. Changing Colors
Always verify contrast after any color change. Color is the highest-risk change for compliance.
Normal text (under 18pt)
≥ 4.5 : 1 contrast ratioLarge text (≥ 18pt or 14pt bold)
≥ 3 : 1 contrast ratioUI components & graphics
≥ 3 : 1 contrast ratioFree contrast checking tools:
- WebAIM Contrast Checker — paste two hex colors, get instant ratio
- WhoCanUse.com — see how colors affect different vision types
- WAVE Browser Extension — live audit of any page
5. Adding New Pages
- Copy an existing page (e.g.
about.html) and rename it. - Update the
<title>tag in the <head> to reflect the new page name. - Add the new page link to the
buildNavsection in every other page file. - Update the breadcrumb text and
aria-current="page"to match the new page. - Ensure there is exactly one H1 on the new page.
- Add the new link to the footer's nav section on all pages.
6. What NOT to Do
Remove the skip link at the top of each page
Delete or override the focus ring CSS in the <style> block
Use color alone to convey information (e.g. "red = error")
Add auto-playing audio or video without user controls
Create links or buttons with no visible or aria-label text
Skip heading levels (e.g. H1 → H3, skipping H2)
Use placeholder text as the only label for form inputs
Add custom interactive elements without keyboard support and ARIA roles
7. Testing After Changes
⌨️ Keyboard Test
Tab through every page. Every link and button must be reachable and show a visible focus indicator. Nothing should require a mouse.
🔊 Screen Reader Test
Use NVDA (Windows, free) or VoiceOver (Mac, built-in). Navigate each page without looking at the screen.
🌊 WAVE Audit
Install the WAVE browser extension. Run it on every page and aim for zero errors.
🔍 Zoom Test
Zoom to 200% in your browser. All content must remain readable and not overlap.
🎨 Contrast Check
After any color change, paste your hex values into the WebAIM Contrast Checker.
📱 Mobile Test
View each page on a real phone or use browser DevTools. All text must be readable, all buttons easily tappable (≥24px).
Skip the Learning Curve
Already have an existing website? The SYSTEM451 team will migrate your content into a fully compliant Access-Pro template — branded, tested, and ready to launch. No compliance worries, no guesswork.
SYSTEM451 · Access-Pro Templates · hello@system451.com