♿ 无障碍检查

WCAG无障碍检查，输入HTML代码检查常见无障碍问题

\n\n

点击我

\n \n

\n \n \n

数据1

数据2

\n 了解更多\n 了解更多\n

浅色文字

\n \n \n

标题

跳级标题

\n\n'} function checkAccessibility(){ const html=document.getElementById('htmlInput').value;if(!html.trim()){return} const issues=[]; const doc=new DOMParser().parseFromString(html,'text/html'); // img without alt doc.querySelectorAll('img').forEach(el=>{if(!el.hasAttribute('alt'))issues.push({type:'error',title:'图片缺少alt属性',desc:`

没有alt属性，屏幕阅读器无法识别图片内容`,rule:'WCAG 1.1.1 Non-text Content'})}); // input without label doc.querySelectorAll('input,select,textarea').forEach(el=>{const id=el.getAttribute('id');const type=el.getAttribute('type');if(type==='hidden'||type==='submit'||type==='button'||type==='image')return;const hasAriaLabel=el.hasAttribute('aria-label')||el.hasAttribute('aria-labelledby');const hasLabel=id&&doc.querySelector(`label[for="${id}"]`);const hasTitle=el.hasAttribute('title');if(!hasAriaLabel&&!hasLabel&&!hasTitle)issues.push({type:'error',title:'表单控件缺少标签',desc:`<${el.tagName.toLowerCase()}> 没有关联的label、aria-label或title`,rule:'WCAG 1.3.1 Info and Relationships'})}); // div/span with click doc.querySelectorAll('[onclick]').forEach(el=>{if(!['A','BUTTON','INPUT','SELECT','TEXTAREA'].includes(el.tagName)){issues.push({type:'warn',title:'非交互元素使用了onclick',desc:`<${el.tagName.toLowerCase()}> 使用了onclick但不是按钮或链接，键盘用户无法操作`,rule:'WCAG 2.1.1 Keyboard'})}}); // video without caption doc.querySelectorAll('video').forEach(el=>{if(!el.querySelector('track'))issues.push({type:'warn',title:'视频缺少字幕',desc:'