web-design-guidelineslisted

# Web Design Guidelines Audit UI 코드가 웹 표준, 접근성, 성능, UX 규칙을 준수하는지 검증하는 감사 도구. ## 사용법 ```bash # 특정 디렉토리 검사 /web-design-guidelines src/components/ # 특정 파일 검사 /web-design-guidelines src/pages/Home.tsx # 전체 프론트엔드 검사 /web-design-guidelines ``` ## 출력 형식 ``` [FAIL] src/components/Button.tsx:23 - 터치 타겟 44px 미만 (현재: 32px) [FAIL] src/pages/Form.tsx:45 - input에 autocomplete 속성 누락 [WARN] src/components/Modal.tsx:12 - aria-hidden 누락 [PASS] src/components/Card.tsx - 모든 규칙 통과 ``` --- ## 검사 규칙 (130+) ### 1. 접근성 (Accessibility) #### 시맨틱 HTML ``` [A01] <div> 클릭 가능 요소 금지 → <button> 또는 <a> 사용 [A02] heading 레벨 건너뛰기 금지 (h1→h3 금지) [A03] <nav>, <main>, <header>, <footer> 랜드마크 필수 [A04] <ul>/<ol> 없이 리스트 구조 금지 ``` > **대표 예시 (A01)** > Bad: `<div onClick={handleClick}>삭제</div>` > Good: `<button onClick={handleClick} type="button">삭제</button>` #### ARIA ``` [A10] aria-label이 visible text 복제하면 금지 [A11] aria-hidden="true"인 요소 내부에 포커스 가능 요소 금지 [A12] role="button"보다 <button> 우선 [A13] aria-live 사용 시 적절한 politeness 확인 (polite/assertive) [A14] 동적 콘텐츠에 aria-live region 필수 ``` > **대표 예시 (A11)** > Bad: `<div aria-hidden="true"><button>닫기</button></div>` > Good: `<div aria-hidden="true"><span>장식</span></div>` #### 키보드 & 포커스 ``` [A20] outline: none 또는 outline: 0 금지 (대체 포커스 스타일 없으면) [A21] tabindex > 0 금지 [A22] 모든 인터랙티브 요소 키보드 접근 가능 확인 [A23] 포커스 트랩 모달에서 Tab 순환 구현 확인 [A24] Skip to main content 링크 권장 ``` #### WCAG 2.2 신규 기준 (2023.10 확정) ``` [A25] 포커스 가려짐 금지 — sticky/fixed 요소가 포커스된 요소를 완전히 가리면 FAIL (WCAG 2.