♿ AI Accessibility Checker

粘贴 HTML 代码，快速检查 WCAG 无障碍问题并获取修复建议

0
总问题数
0
错误
0
警告
0
建议
🔎

粘贴 HTML 代码并点击"开始检查"

\n'; function loadSample(){document.getElementById('htmlInput').value=SAMPLE;runCheck()} function clearAll(){ document.getElementById('htmlInput').value=''; document.getElementById('results').innerHTML='
🔎

粘贴 HTML 代码并点击"开始检查"

'; upStats([]); } function upStats(issues){ var e=0,w=0,s=0; issues.forEach(function(i){if(i.level==='error')e++;else if(i.level==='warning')w++;else s++}); document.getElementById('totalCount').textContent=issues.length; document.getElementById('errorCount').textContent=e; document.getElementById('warningCount').textContent=w; document.getElementById('suggestionCount').textContent=s; } function renderIssues(issues){ if(!issues.length){ document.getElementById('results').innerHTML='
✅

太棒了！未发现无障碍问题。

'; return; } var levelOrder={error:0,warning:1,suggestion:2}; issues.sort(function(a,b){return levelOrder[a.level]-levelOrder[b.level]}); var levelLabel={error:'错误',warning:'警告',suggestion:'建议'}; var html='

检查结果（'+issues.length+' 个问题）

'; issues.forEach(function(item){ html+='
'; html+='
'+levelLabel[item.level]+''; html+=''+item.title+'
'; html+='
'+item.desc+'
'; html+='
'+item.fix+'
'; html+='
'; }); document.getElementById('results').innerHTML=html; } function runCheck(){ var code=document.getElementById('htmlInput').value.trim(); if(!code){alert('请先输入 HTML 代码');return} var issues=[]; var parser=new DOMParser(); var doc=parser.parseFromString(code,'text/html'); /* 1. img without alt */ doc.querySelectorAll('img').forEach(function(img){ if(!img.hasAttribute('alt')){ issues.push({level:'error',title:'图片缺少 alt 属性',desc:'<img src="'+esc(img.getAttribute('src')||'')+'"> 没有 alt 属性',fix:'添加描述性的 alt 属性，如 alt="图片描述"。装饰性图片使用 alt=""'}); }else if(img.getAttribute('alt')===''){ issues.push({level:'suggestion',title:'图片 alt 为空',desc:'<img src="'+esc(img.getAttribute('src')||'')+'"> 的 alt 属性为空字符串',fix:'如果是装饰性图片，alt="" 是正确的。如果图片传达信息，请添加描述文字'}); } }); /* 2. links without text */ doc.querySelectorAll('a').forEach(function(a){ var txt=(a.textContent||'').trim(); var aria=a.getAttribute('aria-label')||''; if(!txt && !aria && !a.querySelector('img')){ issues.push({level:'error',title:'链接缺少可访问文本',desc:'<a href="'+esc(a.getAttribute('href')||'')+'"> 没有文本内容',fix:'添加链接文字或 aria-label 属性'}); } }); /* 3. form inputs without labels */ doc.querySelectorAll('input,select,textarea').forEach(function(el){ var type=el.getAttribute('type')||'text'; if(type==='hidden'||type==='submit'||type==='button'||type==='reset')return; var id=el.getAttribute('id'); var aria=el.getAttribute('aria-label')||el.getAttribute('aria-labelledby')||''; var hasLabel=false; if(id){hasLabel=!!doc.querySelector('label[for="'+id+'"]')} if(!hasLabel && !aria && !el.closest('label')){ issues.push({level:'error',title:'表单控件缺少标签',desc:'<'+el.tagName.toLowerCase()+' type="'+esc(type)+'"> 没有关联的 label',fix:'添加