10 Common Website Accessibility Mistakes (And How to Fix Them in 2025)
Discover the 10 most common website accessibility mistakes Austrian businesses make in 2025, plus practical code fixes for each. Avoid EU Accessibility Act penalties with this comprehensive guide.
Are You Making These Critical Accessibility Mistakes? (The EU Act Deadline Has Passed)
The EU Accessibility Act deadline passed in June 2025, and enforcement has begun. Yet 83% of Austrian business websites still contain accessibility violations that could result in fines, lawsuits, and lost customers.
The good news? Most accessibility issues follow predictable patterns. Fix these 10 common mistakes, and you'll resolve approximately 75% of WCAG compliance issues on your website.
This guide provides practical, code-level fixes you can implement today - plus guidance on when to call in professional help.
---
Why These Mistakes Matter (Legal & Business Impact)
Before we dive into the fixes, understand what's at stake:
Legal Consequences
Business Impact
The average cost of fixing accessibility issues AFTER a lawsuit: €45,000-€120,000
The average cost of proactive compliance: €1,200-€4,500
Let's prevent the expensive scenario by catching these mistakes now.
---
Mistake #1: Missing Form Labels (87% of Austrian Sites)
The Problem
This is the single most common accessibility violation we find. Forms with placeholder text but no actual labels are completely unusable for screen reader users.
Non-Compliant Example:
```html
```
Why This Fails:
The Fix
Option 1: Visible Labels (Recommended)
```html
```
Option 2: Visually Hidden Labels (if design requires)
```html
```
WordPress/Page Builder Fix
Elementor:
1. Select form widget → Advanced tab
2. Enable "Show Label" option
3. Or add custom HTML with proper labels
WPBakery:
1. Edit Contact Form 7 shortcode
2. Add label tags: `[text* your-name label "Your Name"]`
Gravity Forms:
1. Enable "Show Label" in field settings
2. Never rely solely on placeholders
Impact
Fixing this resolves accessibility for blind users, cognitive disabilities, and voice control users. Estimated affected users: 5-8% of your audience.
---
Mistake #2: Insufficient Color Contrast (72% of Sites)
The Problem
Light gray text on white backgrounds looks "modern" but fails WCAG contrast requirements. This affects people with low vision, color blindness, and anyone viewing in bright sunlight.
Common Violations:
WCAG Requirements:
The Fix
Check Your Contrast:
Use WebAIM Contrast Checker: https://webaim.org/resources/contrastchecker/
Replace Low-Contrast Colors:
```css
/* ❌ Non-Compliant (2.85:1 ratio) */
p {
color: #999999;
background-color: #FFFFFF;
}
/* ✅ Compliant AA (7.00:1 ratio) */
p {
color: #595959;
background-color: #FFFFFF;
}
/* ✅ Compliant AAA (12.63:1 ratio) */
p {
color: #333333;
background-color: #FFFFFF;
}
```
For Links:
```css
/* ❌ Non-Compliant */
a {
color: #66B3FF; /* Light blue, low contrast */
}
/* ✅ Compliant */
a {
color: #0056B3; /* Dark blue, 8.59:1 ratio */
text-decoration: underline; /* Don't rely on color alone */
}
```
Brand Color Compliance
If your brand colors don't meet contrast requirements:
Option 1: Use darker shades for text
```css
/* Brand amber for backgrounds, dark variant for text */
:root {
--brand-amber: #D4A574; /* Backgrounds, accents */
--brand-amber-text: #8B6914; /* Text on white (4.55:1) */
}
```
Option 2: Add dark backgrounds
```css
/* Light brand color with dark background */
.cta-button {
background-color: #2C3E50; /* Dark navy */
color: #D4A574; /* Brand amber (4.89:1) */
}
```
Quick Audit
Test these elements on your site:
Impact
Fixing contrast helps 30%+ of users: elderly users, people with low vision, color blindness (8% of men), and mobile users in bright environments.
---
Mistake #3: Images Without Alt Text (68% of Sites)
The Problem
Every image must have alternative text describing its content and purpose. Missing or poor alt text makes your site unusable for blind users and hurts SEO.
Non-Compliant Examples:
```html
```
The Fix
Informative Images:
```html
alt="Deluxe hotel room with king bed, mountain view of Salzburg Alps, and traditional Austrian decor">
alt="Maria Schneider, CEO of Amadeus Web Design">
alt="Sample accessibility audit report showing color contrast violations and remediation recommendations">
```
Decorative Images:
```html
```
Functional Images (buttons, links):
```html
```
Alt Text Best Practices
DO:
DON'T:
WordPress/CMS Alt Text
WordPress:
1. Media Library → Select image → Alt Text field
2. Or while inserting: Image block → Alt text (Decorative) toggle
Automatic Checking:
Install "Accessibility Checker" plugin to flag missing alt text before publishing.
E-Commerce Special Case
Product images need context:
```html
alt="Nike Air Zoom Pegasus 40, men's running shoe in navy blue and orange, side view">
```
Impact
Proper alt text serves blind users (2% of population), users with images disabled, and improves SEO by helping Google understand your images.
---
Mistake #4: Keyboard Navigation Failures (61% of Sites)
The Problem
Many users cannot use a mouse:
If your site can't be fully navigated with just a keyboard, you're excluding these users and violating WCAG.
Common Keyboard Traps:
The Fix
Test Your Site:
1. Put away your mouse
2. Press `Tab` to move forward through interactive elements
3. Press `Shift + Tab` to move backward
4. Press `Enter` or `Space` to activate buttons/links
5. Press `Escape` to close modals/menus
6. Use `Arrow keys` for custom widgets
Fix #1: Ensure All Interactive Elements Are Focusable
```html
Menu
```
Fix #2: Add Visible Focus Indicators
```css
/* ❌ Focus outline removed (accessibility violation) */
*:focus {
outline: none;
}
/* ✅ Enhanced focus indicator (WCAG AAA) */
*:focus {
outline: 3px solid #D4A574; /* Brand amber */
outline-offset: 2px;
}
/* ✅ Even better: custom focus styles */
button:focus,
a:focus,
input:focus {
outline: 3px solid #D4A574;
outline-offset: 2px;
box-shadow: 0 0 0 4px rgba(212, 165, 116, 0.2);
}
```
Fix #3: Manage Focus in Modals
```javascript
// ✅ Trap focus inside modal when open
function openModal() {
const modal = document.getElementById('modal');
const focusableElements = modal.querySelectorAll(
'button, [href], input, select, textarea, [tabindex]:not([tabindex="-1"])'
);
const firstElement = focusableElements[0];
const lastElement = focusableElements[focusableElements.length - 1];
modal.style.display = 'block';
firstElement.focus();
modal.addEventListener('keydown', (e) => {
if (e.key === 'Escape') {
closeModal();
}
if (e.key === 'Tab') {
if (e.shiftKey && document.activeElement === firstElement) {
e.preventDefault();
lastElement.focus();
} else if (!e.shiftKey && document.activeElement === lastElement) {
e.preventDefault();
firstElement.focus();
}
}
});
}
```
Fix #4: Dropdown Menu Keyboard Support
```javascript
// ✅ Accessible dropdown navigation
const dropdownButton = document.querySelector('[aria-haspopup="true"]');
const dropdownMenu = document.querySelector('[role="menu"]');
dropdownButton.addEventListener('keydown', (e) => {
if (e.key === 'Enter' || e.key === ' ' || e.key === 'ArrowDown') {
e.preventDefault();
openDropdown();
focusFirstMenuItem();
}
});
// Arrow key navigation within menu
dropdownMenu.addEventListener('keydown', (e) => {
const menuItems = Array.from(dropdownMenu.querySelectorAll('[role="menuitem"]'));
const currentIndex = menuItems.indexOf(document.activeElement);
if (e.key === 'ArrowDown') {
e.preventDefault();
const nextIndex = (currentIndex + 1) % menuItems.length;
menuItems[nextIndex].focus();
} else if (e.key === 'ArrowUp') {
e.preventDefault();
const prevIndex = (currentIndex - 1 + menuItems.length) % menuItems.length;
menuItems[prevIndex].focus();
} else if (e.key === 'Escape') {
closeDropdown();
dropdownButton.focus();
}
});
```
Skip Navigation Link
Add a "Skip to main content" link as the first focusable element:
```html
Skip to main content
```
Impact
Keyboard accessibility serves 8-12% of users including blind users, motor disabilities, keyboard power users, and improves overall usability.
---
Mistake #5: Missing ARIA Labels on Icons and Buttons (54% of Sites)
The Problem
Icon-only buttons and navigation elements don't communicate their purpose to screen readers. A shopping cart icon might be obvious visually, but a screen reader just announces "button" without context.
Non-Compliant Examples:
```html
```
What Screen Readers Announce:
The Fix
Option 1: ARIA Label
```html
```
Option 2: Visually Hidden Text
```html
Follow us on Facebook
```
Option 3: Title Attribute (Least Preferred)
```html
```
Icon Font Accessibility
Font Awesome:
```html
Email us
```
SVG Icons:
```html
```
Search Forms
```html
```
Dynamic Content Updates
```html
```
Impact
Proper ARIA labels ensure blind users can navigate and use all website functions. Affects 2% of users directly, improves UX for voice control users.
---
Mistake #6: Non-Semantic HTML Structure (58% of Sites)
The Problem
Using `
Non-Compliant Structure:
```html
```
What Screen Readers Experience:
The Fix
Use Semantic HTML5 Elements:
```html
Blog Post Title
Article content...
```
Landmark Regions
Essential ARIA Landmarks:
```html
...
```
Heading Hierarchy
```html
Welcome to Our Site
Our Services
Service 1
Details
Welcome to Our Site
Our Services
Service 1: Web Design
Design Details
Service 2: SEO
SEO Details
Contact Us
```
Heading Hierarchy Rules:
` per page
Lists for Related Items
```html
Service 1
Service 2
Service 3
- Service 1
- Service 2
- Service 3
```
Navigation Menus
```html
```
Impact
Semantic HTML improves navigation for screen reader users (2%), SEO rankings, and code maintainability. It's the foundation of accessible web development.
---
Mistake #7: Inaccessible PDF Documents (43% of Sites)
The Problem
Many Austrian business websites offer PDF downloads for:
Most PDFs are not accessible:
This violates EU Accessibility Act requirements for downloadable documents.
The Fix
Option 1: Create Accessible PDFs from the Start
In Microsoft Word:
1. Use built-in heading styles (Heading 1, Heading 2, etc.)
2. Add alt text to all images (right-click image → Edit Alt Text)
3. Use built-in table tools (don't use tabs/spaces)
4. Check reading order is logical
5. Export: File → Save As → PDF → Options → "Document structure tags for accessibility"
In Adobe InDesign:
1. Use paragraph styles for headings
2. Set export tag for each style
3. Add alt text in Object Export Options
4. Set article order for reading sequence
5. Export: File → Export → Adobe PDF (Interactive) → Create Tagged PDF
Option 2: Remediate Existing PDFs
Adobe Acrobat Pro:
1. Tools → Accessibility → Full Check
2. Fix identified issues:
- Add tags (Tools → Accessibility → Autotag Document)
- Set reading order (Tools → Accessibility → Reading Order)
- Add alt text to images
- Add form field labels
3. Re-run Full Check until all issues resolved
Option 3: Provide HTML Alternative (Recommended)
```html
```
Scanned PDFs - Critical Issue
If you have scanned PDFs (images only):
```html
Download FormDownload Accessible Form (OCR processed)
```
Fix scanned PDFs:
1. Adobe Acrobat Pro: Tools → Enhance Scans → Recognize Text → In This File
2. Verify OCR accuracy (check text is readable)
3. Add structure tags
4. Better: recreate as native PDF or HTML form
Form PDFs
```html
Application Form
```
Quick PDF Accessibility Checklist
Before publishing a PDF, verify:
Impact
Accessible PDFs ensure all users can access your downloadable content, particularly important for legal documents, forms, and critical information. Required under EU Accessibility Act for downloadable resources.
---
Mistake #8: Auto-Playing Media Without Controls (39% of Sites)
The Problem
Videos or audio that play automatically on page load cause serious accessibility issues:
Non-Compliant Examples:
```html
```
The Fix
Fix #1: Remove Autoplay
```html
```
Fix #2: Add Pause/Stop Mechanism
If autoplay is essential for your design (generally not recommended), you must:
```html
```
Fix #3: Respect User Preferences
```javascript
// ✅ Check for reduced motion preference
const video = document.getElementById('hero-video');
const prefersReducedMotion = window.matchMedia('(prefers-reduced-motion: reduce)').matches;
if (!prefersReducedMotion) {
// Only autoplay if user hasn't requested reduced motion
video.play();
} else {
// Show static poster instead
video.pause();
}
```
Video/Audio Requirements
Complete Accessible Video:
```html
Your browser doesn't support HTML5 video.
```
Caption File Format (WebVTT)
```
WEBVTT
00:00:00.000 --> 00:00:03.000
Welcome to Amadeus Web Design.
00:00:03.500 --> 00:00:07.000
We specialize in accessible web development for Austrian businesses.
00:00:07.500 --> 00:00:11.000
Our services include WCAG audits and compliance remediation.
```
Background Videos
If you must use decorative background video:
```html
Welcome to Our Site
Pause Animation
```
Third-Party Embeds (YouTube, Vimeo)
```html
```
Impact
Proper media controls serve users with cognitive disabilities, screen reader users, photosensitive epilepsy (3% of population), and all users in sound-sensitive environments.
---
Mistake #9: Mobile Accessibility Failures (51% of Sites)
The Problem
A site that's "mobile responsive" for visual design might still have accessibility issues on mobile:
WCAG 2.1 added mobile-specific success criteria that many sites violate.
The Fix
Fix #1: Adequate Touch Target Sizes
WCAG 2.1 SC 2.5.5 Requirement: 44×44 CSS pixels minimum for all interactive elements
```css
/* ❌ Too small for touch */
button {
padding: 4px 8px;
font-size: 12px;
}
/* ✅ Adequate touch target */
button {
min-width: 44px;
min-height: 44px;
padding: 12px 20px;
font-size: 16px;
}
/* ✅ Links in text (adequate spacing) */
a {
padding: 8px 4px;
margin: 4px 0;
display: inline-block;
}
```
Mobile Navigation:
```css
/* ✅ Mobile-friendly nav links */
@media (max-width: 768px) {
nav a {
display: block;
padding: 16px 20px;
min-height: 44px;
font-size: 18px;
}
}
```
Fix #2: Enable User Zoom
```html
```
Fix #3: Form Field Sizing
```css
/* ✅ Mobile-friendly form fields */
@media (max-width: 768px) {
input[type="text"],
input[type="email"],
input[type="tel"],
select,
textarea {
min-height: 44px;
font-size: 16px; /* Prevents zoom on iOS */
padding: 12px;
}
/* Larger tap target for checkboxes/radios */
input[type="checkbox"],
input[type="radio"] {
width: 24px;
height: 24px;
}
label {
padding: 12px;
cursor: pointer;
}
}
```
Fix #4: Carousel/Slider Accessibility
```html
```
Fix #5: Orientation Support
```css
/* ✅ Support both portrait and landscape */
@media (orientation: landscape) {
/* Adjust layout for landscape */
}
@media (orientation: portrait) {
/* Adjust layout for portrait */
}
/* Don't restrict orientation */
/* ❌ Don't do this: */
/* @media (orientation: portrait) { body { transform: rotate(90deg); } } */
```
Fix #6: Spacing for Readability
```css
/* ✅ Mobile text spacing (WCAG 1.4.12) */
@media (max-width: 768px) {
body {
line-height: 1.5;
letter-spacing: 0.12em;
}
p {
margin-bottom: 1.5em;
}
h1, h2, h3, h4, h5, h6 {
margin-top: 1.5em;
margin-bottom: 0.5em;
}
}
```
Mobile Testing Checklist
Test your site on actual mobile devices:
Impact
Mobile accessibility serves all mobile users (70%+ of traffic), users with motor disabilities, elderly users with less precise touch control, and improves overall mobile UX.
---
Mistake #10: No Accessibility Statement (78% of Austrian Sites)
The Problem
The EU Accessibility Act requires covered entities to publish an accessibility statement explaining:
Most Austrian businesses don't have this page, leaving them non-compliant even if their site is technically accessible.
The Fix
Create an Accessibility Statement Page:
```html
Accessibility Statement
Our Commitment
Amadeus Web Design is committed to ensuring digital accessibility for people with disabilities. We continually improve the user experience for everyone and apply the relevant accessibility standards.
Conformance Status
This website conforms to WCAG 2.1 Level AAA standards. WCAG 2.1 AAA compliance means that the website meets all Level A, AA, and AAA success criteria.
Last reviewed: December 15, 2025
Review method: Professional WCAG audit using automated tools (axe, WAVE) and manual testing with screen readers (NVDA, JAWS, VoiceOver).
Accessibility Features
- Semantic HTML5 markup with ARIA landmarks
- Full keyboard navigation support
- WCAG AAA color contrast ratios
- Alt text for all images
- Captions and transcripts for video content
- Accessible forms with clear labels
- Skip navigation links
- Responsive design supporting up to 400% zoom
- User-controlled accessibility widget (font size, contrast, spacing)
Known Limitations
Despite our best efforts, some limitations may be present:
- Third-party embedded content (videos, maps) may not be fully accessible
- Legacy PDF documents are being updated progressively
- Some archive content from before 2024 may not meet current standards
We are actively working to address these issues.
Alternative Formats
If you encounter accessibility barriers or need content in an alternative format, please contact us:
- Email: accessibility@amadeuswebdesign.at
- Phone: +43 662 123 456
We will provide the information in your preferred format within 5 business days.
Feedback & Complaints
We welcome your feedback on the accessibility of this website. Please contact us if you encounter accessibility issues:
Response time: We aim to respond to accessibility feedback within 3 business days.
Enforcement Procedure
If you are not satisfied with our response, you may file a complaint with the Austrian regulatory authority:
Österreichische Forschungs- und Prüfzentrum Arsenal Ges.m.b.H.
Website: www.arsenal.ac.at
Technical Specifications
This website's accessibility relies on the following technologies:
- HTML5
- CSS3
- JavaScript (with graceful degradation)
- WAI-ARIA
Assessment Approach
Our organization assessed the accessibility of this website through:
- Self-evaluation (internal team)
- External evaluation (third-party WCAG auditor)
- User testing (people with disabilities)
Date of This Statement
This statement was created on and last updated on .
© 2025 Amadeus Web Design. All rights reserved.
```
Link to Accessibility Statement
Add prominent link in footer:
```html
```
EU Accessibility Act Compliance Template
For businesses covered by the Act, use this template language:
```html
EU Accessibility Act Compliance
This website complies with the European Accessibility Act (Directive EU 2019/882) and the Austrian implementing legislation (Barrierefreiheitsgesetz 2025).
Scope of coverage: This accessibility statement applies to the following services:
- Website content and functionality
- Online booking system
- Customer portal
- Downloadable documents (PDFs)
Date of compliance: June 28, 2025
Conformance level: WCAG 2.1 Level AA (with AAA enhancements)
```
Impact
An accessibility statement demonstrates legal compliance, builds user trust, provides recourse for users with issues, and protects against legal liability by documenting your accessibility efforts.
---
When to Call a Professional (You Can't Do It All)
While this guide helps you fix common mistakes, professional accessibility audits are essential for complete compliance. Here's when to seek expert help:
DIY is Sufficient For:
Professional Help Required For:
The Business Case for Professional Audits
DIY Approach Costs:
Professional Audit Investment:
ROI Calculation:
```
DIY hidden costs: €3,500 (time) + €300 (tools) + €50,000 (risk) = €53,800
Professional service: €4,500 (audit + Gold package)
Savings: €49,300 + peace of mind
```
---
Quick Action Plan: Fix These Issues Today
Immediate (Next 2 Hours)
1. Run automated scan: Use WAVE or axe DevTools (free browser extensions)
2. Fix form labels: Add `
3. Add alt text: Write descriptions for all images
4. Check color contrast: Use WebAIM contrast checker, fix low-contrast text
5. Test keyboard navigation: Tab through your site, fix broken navigation
This Week
6. Create accessibility statement page (use template above)
7. Fix heading hierarchy: Ensure proper H1→H2→H3 structure
8. Add ARIA labels: Label all icon-only buttons
9. Enable zoom: Remove `user-scalable=no` from viewport meta tag
10. Review PDFs: Identify which need OCR or alternatives
This Month
---
Conclusion: Don't Let These Mistakes Cost Your Business
The EU Accessibility Act deadline has passed. Austrian authorities are actively enforcing compliance, and the businesses making these 10 common mistakes are facing penalties.
What We've Covered:
1. Missing form labels - 87% of sites violate this
2. Insufficient color contrast - Affects 30%+ of users
3. Images without alt text - Completely excludes blind users
4. Keyboard navigation failures - 8-12% of users affected
5. Missing ARIA labels - Icon buttons unusable for screen readers
6. Non-semantic HTML - Breaks screen reader navigation
7. Inaccessible PDFs - Violates downloadable document requirements
8. Auto-playing media - Disorients screen reader users
9. Mobile accessibility failures - 70% of traffic affected
10. No accessibility statement - Regulatory requirement
Fixing these issues isn't just about compliance - it's about:
---
Get Your Website Compliant Today
Start with a professional WCAG 2.1 audit:
Then choose your compliance package:
Bronze - Essential compliance from €1,200 Silver - Enhanced accessibility from €2,400 Gold - Premium accessibility from €3,600 ⭐
Gold package includes:
See Our Gold Package in Action:
This website demonstrates our Gold package. Click the amber accessibility button in the bottom-right corner to try the widget features yourself!
---
Based in Salzburg, serving all of Austria.
[Schedule Your Accessibility Audit →](#contact)
---
About the Author: Amadeus Web Design is an accessibility-focused web development agency based in Salzburg, Austria. We specialize in helping Austrian businesses comply with the EU Accessibility Act through professional WCAG audits, remediation services, and ongoing monitoring.
Last Updated: December 2025
---
*Have questions about these accessibility mistakes? Contact us for a free 15-minute consultation to discuss your specific situation and get immediate guidance on your most critical issues.*