Accessibility 检查

网页无障碍 Accessibility 检查工具，颜色对比度和 ARIA 规范校验

前端设计免费本地处理

颜色对比度检查

前景色背景色

对比度: 15.4:1

示例文本预览 - Sample Text Preview

ARIA 无障碍检查

字体大小: 16px 导入HTML: 上传文件未选择文件

Accessibility 检查功能亮点

✨

WCAG 对比度校验

实时计算对比度，同时展示 AA 和 AAA 级别的普通文本和大号文本判定结果。

⚡

ARIA 规范检查

检测图片 alt、按钮可访问名、表单标签、交互元素 role 等常见无障碍问题。

🔒

纯前端本地处理

所有操作在浏览器中完成，数据不上传服务器，保障隐私安全。

Accessibility 检查常见问题

AA 是基本无障碍标准，对比度要求 4.5:1；AAA 是更高标准，对比度要求 7:1，提供更好的可读性。

大号文本（≥18pt 或 14pt 加粗）因为字号较大本身就更容易阅读，所以对比度要求略低。

覆盖图片 alt 属性、按钮/链接可访问名称、表单标签、交互元素 role/tabindex、标题层级顺序等。

'; ToolUI.download(html, 'a11y-report.html', 'text/html'); }); var a11yCopyBtn = document.createElement('button'); a11yCopyBtn.className = 'btn btn-secondary'; a11yCopyBtn.textContent = '📋 复制结果'; a11yCopyBtn.addEventListener('click', function() { var list = document.getElementById('issueList'); if (!list || !list.innerText.trim()) { ToolUI.toast('请先执行检查', 'error'); return; } var ratioEl = document.getElementById('ratioDisplay'); var text = (ratioEl ? ratioEl.textContent + '\n' : '') + list.innerText; ToolUI.copyWithFeedback(text, a11yCopyBtn, '检查结果已复制'); }); document.querySelector('.tool-actions').appendChild(a11yCopyBtn); document.getElementById('fontSizeSlider').addEventListener('input', function() { var v = this.value; document.getElementById('fontSizeVal').textContent = v + 'px'; var preview = document.getElementById('previewBox'); if (preview) preview.style.fontSize = v + 'px'; }); document.getElementById('importHtml').addEventListener('change', function(e) { var file = e.target.files[0]; document.getElementById('fileName_importHtml').textContent = file ? file.name : '未选择文件'; if (!file) return; var reader = new FileReader(); reader.onload = function(ev) { document.getElementById('htmlInput').value = ev.target.result; }; reader.readAsText(file); }); var origCheckContrast = checkContrast; checkContrast = function() { origCheckContrast(); var ratioText = document.getElementById('ratioDisplay').textContent; var match = ratioText.match(/[\d.]+/); if (match) { var ratio = parseFloat(match[0]); var viz = document.getElementById('contrastViz'); var bar = document.getElementById('contrastVizBar'); viz.removeAttribute('hidden'); var pct = Math.min(100, (ratio / 21) * 100); bar.style.width = pct + '%'; bar.style.background = ratio >= 4.5 ? '#10b981' : ratio >= 3 ? '#f59e0b' : '#ef4444'; } }; checkContrast(); window.location.protocol === 'file:' ? Promise.reject('本地模式') : fetch('/search-index.json').then(r => r.json()).then(tools => { var current = "tools/a11y-checker.html"; var currentCat = "前端设计"; var related = tools.filter(t => t.path !== current && t.category === currentCat).slice(0, 5); if (related.length < 4) { var others = tools.filter(t => t.path !== current && !related.includes(t)).slice(0, 5 - related.length); related.push(...others); } document.getElementById('relatedGrid').innerHTML = related.slice(0, 5).map(t => '').join(''); }).catch(() => {}); document.getElementById('globalSearch').addEventListener('keydown', function(e) { if (e.key === 'Enter') { var q = this.value.trim(); if (q) window.location.href = '/?q=' + encodeURIComponent(q); } }); document.querySelectorAll('.faq-question').forEach(function(btn) { btn.addEventListener('click', function() { var item = this.closest('.faq-item'); var answer = item.querySelector('.faq-answer'); var arrow = this.querySelector('.faq-arrow'); var isOpen = answer.classList.contains('open'); document.querySelectorAll('.faq-item.open').forEach(function(o) { o.classList.remove('open'); o.querySelector('.faq-answer').classList.remove('open'); o.querySelector('.faq-arrow').classList.remove('open'); }); if (!isOpen) { item.classList.add('open'); answer.classList.add('open'); arrow.classList.add('open'); } }); });