접근성 테스트

<div class="stage"><div class="title">ACCESSIBILITY CHECK</div><div class="canvas"><div class="focusline"><div id="focus0"><small>1</small><span>Email</span></div><div id="focus1"><small>2</small><span>Submit</span></div><div id="focus2"><small>3</small><span>Button</span></div></div><div class="audit" id="audit">tab order: 1 → 2 → 3</div></div></div>

.stage{width:min(94vw,820px);height:min(88vh,330px);box-sizing:border-box;padding:clamp(9px,2.4vmin,18px);border:1px solid var(--line);border-radius:13px;background:var(--surface);display:flex;flex-direction:column;gap:clamp(7px,2vmin,14px);font:600 clamp(12px,2.5vmin,16px)/1.28 "Pretendard Variable",Pretendard,-apple-system,BlinkMacSystemFont,"Apple SD Gothic Neo",sans-serif;color:var(--fg);overflow:hidden}.title{color:var(--accent);letter-spacing:.035em;flex:none}.canvas{position:relative;flex:1;min-height:0;display:flex;align-items:center;justify-content:center}.muted{color:var(--muted)}.mono{font-family:ui-monospace,SFMono-Regular,monospace}.box{border:1px solid var(--line);border-radius:8px;background:var(--bg);padding:clamp(5px,1.4vmin,12px);text-align:center}.active{border-color:var(--accent)!important;color:var(--accent)!important;background:color-mix(in srgb,var(--accent) 12%,var(--surface))!important}.canvas{flex-direction:column;gap:clamp(8px,3vmin,20px)}.focusline{display:flex;gap:clamp(3px,1.5vmin,10px);width:min(96%,630px)}.focusline>div{flex:1;min-width:0;border:2px solid var(--line);border-radius:6px;padding:clamp(5px,1.7vmin,11px);display:flex;align-items:center;gap:5px}.focusline small{border-radius:50%;background:var(--line);width:clamp(16px,4vmin,25px);height:clamp(16px,4vmin,25px);display:grid;place-items:center;flex:none}.focusline span{overflow:hidden;text-overflow:ellipsis;white-space:nowrap}.focusline .focused{border-color:var(--accent)}.focusline .bad{border-color:var(--accent-3)}.audit{color:var(--accent)}

let n=0;function tab(){const step=n++%3;for(let i=0;i<3;i++){const el=document.getElementById('focus'+i);el.classList.toggle('focused',i===step&&i!==2);el.classList.toggle('bad',i===step&&i===2)}document.getElementById('audit').textContent=step===2?'issue: button has no name':'tab order: 1 → 2 → 3'}tab();setInterval(tab,850)