♿ Accessibility Checker
Check your website for WCAG compliance and accessibility issues
`;document.getElementById('htmlInput').value = sampleHTML;
}function clearAll() {
document.getElementById('htmlInput').value = '';
document.getElementById('resultsSection').classList.remove('active');
checkResults = {
errors: [],
warnings: [],
passed: [],
wcagLevel: 'AA',
totalChecks: 0,
passedChecks: 0,
score: 0
};
}function showNotification(message) {
const notification = document.getElementById('downloadNotification');
notification.textContent = message;
notification.classList.add('show');
setTimeout(() => {
notification.classList.remove('show');
}, 3000);
}function exportPDF() {
const timestamp = new Date().toLocaleString();
const errorCount = checkResults.errors.length;
const warningCount = checkResults.warnings.length;
const passedCount = checkResults.passed.length;
const score = checkResults.score;const content = `
╔════════════════════════════════════════════════════════════════╗
║ ║
║ ACCESSIBILITY COMPLIANCE REPORT ║
║ ║
║ CalcsHub.com ║
║ Your Trusted Calculation And Solution Hub ║
║ ║
╚════════════════════════════════════════════════════════════════╝━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━
REPORT INFORMATION
━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━Generated On : ${timestamp}
WCAG Level : ${checkResults.wcagLevel}
Accessibility Score: ${score}%
Status : ${errorCount === 0 ? 'PASSED ✓' : 'FAILED ✗'}━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━
COMPLIANCE SUMMARY
━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━┌──────────────────────────┬──────────────┐
│ Category │ Count │
├──────────────────────────┼──────────────┤
│ Errors (Must Fix) │ ${errorCount.toString().padEnd(12)}│
│ Warnings (Should Fix) │ ${warningCount.toString().padEnd(12)}│
│ Passed Checks │ ${passedCount.toString().padEnd(12)}│
│ Total Checks │ ${checkResults.totalChecks.toString().padEnd(12)}│
└──────────────────────────┴──────────────┘${errorCount === 0 && warningCount === 0 ? `
┌────────────────────────────────────────────────────────────────┐
│ │
│ ✓ EXCELLENT! Your code is fully accessible! │
│ │
│ All WCAG ${checkResults.wcagLevel} accessibility checks passed. │
│ Your website is accessible to users with disabilities. │
│ │
└────────────────────────────────────────────────────────────────┘
` : ''}
${errorCount > 0 ? `━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━
❌ ERRORS - MUST FIX (${errorCount})
━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━${checkResults.errors.map((error, index) => `
┌─ Error #${index + 1} ─────────────────────────────────────────────────
│
│ 📋 Category: ${error.category}
│ 📖 WCAG: ${error.wcag} - Level ${error.level}
│
│ 📝 Issue:
│ ${error.message}
│
│ 💡 Solution:
│ ${error.solution}
│
└──────────────────────────────────────────────────────────────────
`).join('\n')}
` : ''}
${warningCount > 0 ? `━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━
⚠️ WARNINGS - SHOULD FIX (${warningCount})
━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━${checkResults.warnings.map((warning, index) => `
┌─ Warning #${index + 1} ───────────────────────────────────────────────
│
│ 📋 Category: ${warning.category}
│ 📖 WCAG: ${warning.wcag} - Level ${warning.level}
│
│ 📝 Issue:
│ ${warning.message}
│
│ 💡 Solution:
│ ${warning.solution}
│
└──────────────────────────────────────────────────────────────────
`).join('\n')}
` : ''}
${passedCount > 0 ? `━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━
✅ PASSED CHECKS (${passedCount})
━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━${checkResults.passed.map((passed, index) => `
✓ ${passed.category}: ${passed.message}
`).join('')}
` : ''}━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━
RECOMMENDATIONS
━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━${errorCount > 0 ? '• Fix all errors immediately - these are critical accessibility barriers.\n' : ''}${warningCount > 0 ? '• Address warnings to improve overall accessibility.\n' : ''}${errorCount === 0 && warningCount === 0 ? '• Your website meets WCAG ' + checkResults.wcagLevel + ' standards!\n' : ''}• Test with real assistive technologies (screen readers).
• Conduct user testing with people with disabilities.
• Implement keyboard navigation throughout the site.
• Ensure sufficient color contrast (use contrast checkers).
• Regularly audit your website for accessibility.━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━
WCAG COMPLIANCE LEVELS
━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━Level A : Minimum level of conformance (basic accessibility)
Level AA : Recommended level - addresses common barriers
Level AAA : Enhanced level - highest accessibility standards━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━
ABOUT THIS REPORT
━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━This report was generated by CalcsHub Accessibility Checker, a free
tool for auditing web accessibility and WCAG compliance.Tool : Accessibility Checker
Website : CalcsHub.com
Description : Your Trusted Calculation And Solution Hub
WCAG Level : ${checkResults.wcagLevel}
Date : ${timestamp}━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━Thank you for making the web accessible!
Visit CalcsHub.com for more tools.━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━╔════════════════════════════════════════════════════════════════╗
║ End of Report - CalcsHub.com © ${new Date().getFullYear()} ║
╚════════════════════════════════════════════════════════════════╝
`;const blob = new Blob([content], { type: 'text/plain;charset=utf-8' });
const url = URL.createObjectURL(blob);
const a = document.createElement('a');
a.href = url;
a.download = `Accessibility-Report-${new Date().getTime()}.txt`;
document.body.appendChild(a);
a.click();
document.body.removeChild(a);
URL.revokeObjectURL(url);
showNotification('✓ Accessibility Report downloaded successfully!');
}function exportText() {
exportPDF(); // Same format for text export
}function printResults() {
window.print();
}function shareResults() {
const errorCount = checkResults.errors.length;
const warningCount = checkResults.warnings.length;
const score = checkResults.score;
const shareText = `Accessibility Check Results: ${score}% score, ${errorCount} errors, ${warningCount} warnings. WCAG ${checkResults.wcagLevel} compliance check. Check your accessibility at CalcsHub.com`;if (navigator.share) {
navigator.share({
title: 'Accessibility Check Results',
text: shareText
}).then(() => {
showNotification('✓ Results shared successfully!');
}).catch(err => console.log('Error sharing:', err));
} else {
navigator.clipboard.writeText(shareText).then(() => {
showNotification('✓ Results copied to clipboard!');
}).catch(() => {
alert('Share text:\n\n' + shareText);
});
}
}// Auto-resize textarea
const textarea = document.getElementById('htmlInput');
textarea.addEventListener('input', function() {
this.style.height = 'auto';
this.style.height = Math.max(300, this.scrollHeight) + 'px';
});
